/* ============================================================
   Teknovate — capa de marca sobre Vuexy
   Fuente: BB-Teknovate-v2.pdf (brand book oficial, 2023), p. 53 y 57.
   Se carga DESPUÉS de core.css y de los CSS de front-page.
   ============================================================ */

/* Tipografía institucional: Lexend Deca.
   El brand book la define como la tipografía para textos extensos,
   "desarrollada con la intención de facilitar la lectura en pantallas
   digitales". Arial es SOLO para el eslogan dentro del logo.
   Alternativa recomendada: autoalojar la fuente para no depender de
   Google Fonts. Por ahora se carga del CDN. */
@import url('https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@300;400;500;600;700&display=swap');

:root {
  /* ---- Paleta oficial (brand book p. 53) ---- */
  --tk-azul:      #1F82F7;   /* Pantone 3415 C · RGB 31,130,247  */
  --tk-rojo:      #F9291F;   /* Pantone 174 C  · RGB 249,41,31   */
  --tk-amarillo:  #FFB500;   /* Pantone 151 C  · RGB 255,181,0   */
  --tk-naranja:   #FF6600;   /*                  RGB 255,103,0   */
  --tk-verde:     #00A647;   /*                  RGB 0,166,71    */
  --tk-morado:    #706CB5;   /*                  RGB 112,108,181 */

  /* Variante oscura del azul, para estados hover. No está en el
     brand book: es el azul oficial oscurecido. */
  --tk-azul-osc:  #1668D0;

  --tk-negro:     #272525;
  --tk-gris:      #5A5757;

  /* ---- Colores semánticos de Bootstrap alineados a la marca ---- */
  --bs-warning:     #FFB500;
  --bs-warning-rgb: 255, 181, 0;
  --bs-danger:      #F9291F;
  --bs-danger-rgb:  249, 41, 31;
  --bs-success:     #00A647;
  --bs-success-rgb: 0, 166, 71;
  --bs-info:        #706CB5;
  --bs-info-rgb:    112, 108, 181;

  /* ---- Tipografía ---- */
  --bs-font-sans-serif: 'Lexend Deca', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* Titulares en el negro de marca */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  color: var(--tk-negro);
}

/* ------------------------------------------------------------
   HERO — se reemplaza el fondo de Vuexy (lavanda/rosa) por un
   degradado en la paleta. El <img> del fondo se oculta en vez de
   borrarse, para poder volver atrás sin tocar el HTML.
   Y se recorta el espacio inferior que ocupaba el mockup del
   template, que no se usa.
   ------------------------------------------------------------ */
.landing-hero > img { display: none !important; }

.landing-hero {
  background: linear-gradient(180deg, #E8F2FE 0%, #F5FAFF 55%, #FFFFFF 100%);
  /* El navbar es fijo: el hero necesita despejarlo por arriba */
  padding-block-start: 9rem !important;
  padding-block-end: 4.5rem !important;
}
@media (max-width: 767.98px) {
  .landing-hero { padding-block-start: 7rem !important; }
}

.landing-hero .hero-text-box { max-width: 46rem; margin-inline: auto; }

/* El hero del template reserva alto para la imagen de dashboard */
.landing-hero-blank { display: none; }

/* ------------------------------------------------------------
   FOOTER — el template lo diseñó oscuro: pone --bs-footer-text
   en blanco y el fondo lo daba una imagen (footer-bg.png, en
   tonos violeta de Vuexy) que no se usa. Acá el footer es claro,
   así que se invierte el color del texto.
   Ventaja adicional: el logo full color funciona sin necesitar
   la versión en blanco.
   ------------------------------------------------------------ */
.landing-footer {
  --bs-footer-text: var(--tk-negro);
  border-top: 1px solid var(--bs-border-color);
}
.landing-footer .footer-link,
.landing-footer .footer-text { opacity: 0.85; }
.landing-footer .footer-title { opacity: 1; font-weight: 600; }
.landing-footer .footer-link:hover { color: var(--tk-azul); opacity: 1; }

/* ------------------------------------------------------------
   Suavizado general — el template es muy rectangular. Se
   redondean tarjetas y se cambia el borde duro por sombra suave.
   ------------------------------------------------------------ */
.card {
  border-radius: 1rem;
}

/* Tarjetas con borde: se quita el trazo y se usa profundidad */
.card.border:not(.border-primary):not(.border-success):not(.border-warning):not(.border-info) {
  border-color: transparent !important;
  box-shadow: 0 .125rem .5rem rgba(39, 37, 37, .06), 0 .0625rem .125rem rgba(39, 37, 37, .04);
}

/* Las tarjetas de servicio conservan la franja de color arriba,
   pero con las esquinas superiores redondeadas */
.card.border-top.border-4 {
  border-inline: 0 !important;
  border-block-end: 0 !important;
}

/* Tarjetas de cifras: sin borde duro */
.landing-fun-facts .card {
  border-width: 0 !important;
  box-shadow: 0 .125rem .75rem rgba(39, 37, 37, .07);
}

/* Botones y campos, menos cuadrados */
.btn { border-radius: .625rem; }
.btn-lg { border-radius: .75rem; }
.form-control, .form-select { border-radius: .625rem; }

/* Aire entre secciones */
.section-py { padding-block: 5rem; }
@media (max-width: 767.98px) {
  .section-py { padding-block: 3.25rem; }
}

/* ============================================================
   Componentes propios del sitio
   ============================================================ */

/* Morado de marca — la cuarta línea (socio técnico) */
.tk-text-morado { color: var(--tk-morado) !important; }
.tk-card-morado { border-top-color: var(--tk-morado) !important; }

/* Sección puente bajo el hero */
.tk-bridge { background: #fff; }
.tk-bridge-lead {
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--tk-negro);
}

/* Listas de capacidades, con viñeta discreta */
.tk-list li {
  position: relative;
  padding-inline-start: 1rem;
  margin-block-end: .4rem;
}
.tk-list li::before {
  content: "";
  position: absolute;
  inset-inline-start: 0;
  inset-block-start: .5rem;
  inline-size: .3rem;
  block-size: .3rem;
  border-radius: 50%;
  background: currentColor;
  opacity: .45;
}

/* Casos: el problema va destacado, la solución en tono normal */
.tk-caso-title { color: var(--tk-azul); font-weight: 700; }
.tk-caso-problema {
  font-weight: 500;
  color: var(--tk-negro);
  border-inline-start: 3px solid var(--tk-azul);
  padding-inline-start: .875rem;
}

/* Sección "Cómo hacemos ingeniería" — fondo diferenciado */
.tk-ingenieria { background: linear-gradient(180deg, #F5FAFF 0%, #FFFFFF 100%); }
.tk-quote {
  padding-block: 1.75rem;
  border-block: 2px solid var(--tk-azul);
}

/* Cifras sin caja */
.tk-cifra h3 { font-size: 2.5rem; font-weight: 800; }
.tk-cifra p { font-size: .875rem; max-inline-size: 14rem; margin-inline: auto; }

/* Tarjeta de identidad dentro de "Por qué Teknovate" */
.tk-card-quien { background: var(--tk-azul); }
.tk-card-quien p { color: #fff; }
.tk-card-quien strong { color: #fff; }

/* Trayectoria del equipo */
.tk-card-trayectoria { background: var(--bs-body-bg); border: 1px solid var(--bs-border-color) !important; }

/* ============================================================
   Ilustraciones
   Familia visual única: azul profundo, teal, acentos morados,
   superficies claras. Son apoyo del contenido, no protagonistas
   —salvo el hero y el diagrama de proceso.
   ============================================================ */

/* --- Hero: 50/50 en escritorio, apilado en móvil --- */
.tk-hero-art {
  display: flex;
  justify-content: center;
}
.tk-hero-art img {
  inline-size: 100%;
  max-inline-size: 780px;
  block-size: auto;
  object-fit: contain;
  border-radius: 1rem;
  animation: tk-aparece .7s ease-out both;
}
@keyframes tk-aparece {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .tk-hero-art img { animation: none; }
}
@media (max-width: 991.98px) {
  .tk-hero-art img { max-inline-size: 100%; }
}

/* --- Tarjetas de servicio: ilustración arriba, misma altura las cuatro --- */
.tk-card-art {
  display: flex;
  align-items: center;
  justify-content: center;
  block-size: 200px;
  margin-block-end: .5rem;
}
.tk-card-art img {
  max-block-size: 200px;
  max-inline-size: 100%;
  inline-size: auto;
  block-size: auto;
  object-fit: contain;
}
@media (max-width: 575.98px) {
  .tk-card-art { block-size: 168px; }
  .tk-card-art img { max-block-size: 168px; }
}

/* --- Diagrama de proceso: pieza protagonista --- */
.tk-proceso {
  margin-inline: auto;
  max-inline-size: 1160px;
  text-align: center;
}
.tk-proceso img {
  inline-size: 100%;
  block-size: auto;
  object-fit: contain;
}
/* En pantallas angostas el diagrama pierde legibilidad: se permite
   desplazamiento horizontal controlado en vez de recortar pasos. */
@media (max-width: 767.98px) {
  .tk-proceso {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    padding-block-end: .5rem;
  }
  .tk-proceso img { min-inline-size: 620px; }
}

/* La sección de ingeniería se ensancha para dar aire al diagrama */
.tk-ingenieria .col-lg-9 { max-inline-size: 1200px; flex: 0 0 100%; }

/* --- Trayectoria del equipo: texto izquierda, ilustración derecha --- */
/* Ilustración de capacidades: ancho completo. Tiene mucho detalle
   —contenedores, seguridad, datos, móvil— y a media columna se pierde. */
.tk-trayectoria-art {
  margin-inline: auto;
  max-inline-size: 1100px;
  text-align: center;
}
.tk-trayectoria-art img {
  inline-size: 100%;
  block-size: auto;
  object-fit: contain;
}
@media (max-width: 767.98px) {
  .tk-trayectoria-art { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .tk-trayectoria-art img { min-inline-size: 560px; }
}

/* --- Capacidades técnicas, agrupadas por categoría --- */
.tk-cap {
  block-size: 100%;
  padding-inline-start: 1rem;
  border-inline-start: 3px solid var(--tk-azul);
}
.tk-cap-t {
  font-weight: 700;
  color: var(--tk-negro);
  margin-block-end: .35rem;
  font-size: .9375rem;
}
.tk-cap-l {
  margin-block-end: 0;
  font-size: .875rem;
  color: var(--tk-gris);
  line-height: 1.6;
}
/* Cada categoría toma un color de la paleta, sin repetir */
.tk-cap:nth-of-type(1) { border-inline-start-color: var(--tk-azul); }
.row > div:nth-child(3) .tk-cap { border-inline-start-color: var(--tk-verde); }
.row > div:nth-child(4) .tk-cap { border-inline-start-color: var(--tk-amarillo); }
.row > div:nth-child(5) .tk-cap { border-inline-start-color: var(--tk-naranja); }
.row > div:nth-child(6) .tk-cap { border-inline-start-color: var(--tk-morado); }

/* Puntos de entrada — se autocalifica el visitante */
.tk-entrada {
  padding: 1.5rem;
  border-radius: 1rem;
  background: #fff;
  border: 1px solid var(--bs-border-color);
}
.tk-entrada-q {
  font-weight: 700;
  color: var(--tk-azul);
  font-size: 1.0625rem;
}

/* ------------------------------------------------------------
   Botón flotante de WhatsApp
   ------------------------------------------------------------ */
.tk-wa {
  position: fixed;
  inset-block-end: 1.25rem;
  inset-inline-end: 1.25rem;
  z-index: 1030;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 3.25rem;
  block-size: 3.25rem;
  border-radius: 50%;
  background: #25d366;
  color: #fff;
  box-shadow: 0 .25rem .75rem rgba(0, 0, 0, .25);
  transition: transform .2s ease-in-out;
}
.tk-wa:hover { color: #fff; transform: scale(1.06); }
.tk-wa i { font-size: 1.75rem; }

a { color: var(--tk-azul); }
a:hover { color: var(--tk-azul-osc); }

/* ============================================================
   ⚠️ REGLA DEL BRAND BOOK — no romper (p. 45 y 51)
   Cada color secundario identifica una UNIDAD DE NEGOCIO:
     rojo     → Dashboard / Data Analytics
     naranja  → Projects Administration
     amarillo → Consultor de Tecnología
     verde    → Transformación Digital
     azul     → Desarrollo de Software
     morado   → E-Commerce
   El logo NO se recolorea libremente: al cambiarle el color pasa a
   representar otra unidad. Fuera de full color, solo negro o blanco.
   Fondos corporativos permitidos: azul, amarillo, rojo, negro.
   ============================================================ */

/* ---- Método Teknovate 360 -------------------------------------------------
   Bloque dentro de "Cómo hacemos ingeniería". Publica el QUÉ y el resultado;
   el detalle del método vive en el brochure, que se entrega uno a uno. */
.tk-metodo {
  border-top: 1px solid var(--tk-linea, #e6e9ee);
  padding-top: 2.5rem;
}
.tk-metodo-card {
  background: #f7f9fc;
  border: 1px solid #e6ecf5;
  border-radius: .75rem;
  padding: 1.35rem 1.25rem;
}
.tk-metodo-card h6 { color: var(--tk-azul, #1F82F7); }
.tk-metodo-claim {
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--tk-negro, #272525);
}

/* ---- Página /360 ----------------------------------------------------------
   Landing de la oferta Teknovate 360. Misma línea gráfica que el sitio:
   blanco, azul estructural, geometría simple. Sin la receta del método. */
/* padding extra arriba: el navbar es fijo y tapaba el badge del hero */
.tk360-hero { background: linear-gradient(180deg,#f4f8ff 0%,#ffffff 100%); padding-top: 7rem !important; }
.tk360-title { font-size: clamp(2.1rem, 5vw, 3.2rem); font-weight: 800; letter-spacing: -.02em; }
.tk360-lead  { font-size: 1.15rem; color: var(--tk-gris, #5a5757); }

.tk360-pain {
  background:#fff; border:1px solid #e6ecf5; border-radius:.75rem; padding:1.35rem 1.25rem;
}
.tk360-pain--wide { border-left:3px solid var(--tk-azul,#1F82F7); }
.tk360-pain h6 { color: var(--tk-negro,#272525); }

.tk360-capas .tk360-capa {
  height:100%; background:#f7f9fc; border:1px solid #e6ecf5; border-radius:.75rem;
  padding:1.25rem 1rem; text-align:center;
}
.tk360-capa span {
  display:inline-flex; align-items:center; justify-content:center;
  width:2rem; height:2rem; border-radius:50%;
  background:var(--tk-azul,#1F82F7); color:#fff; font-weight:800; font-size:.9rem;
  margin-bottom:.6rem;
}
.tk360-capa h6 { font-weight:800; margin-bottom:.35rem !important; }
.tk360-capa p  { color:var(--tk-gris,#5a5757); }

.tk360-paso {
  background:#fff; border:1px solid #e6ecf5; border-radius:.75rem; padding:1.5rem 1.35rem;
  position:relative;
}
.tk360-paso-n {
  display:inline-flex; align-items:center; justify-content:center;
  width:2.25rem; height:2.25rem; border-radius:.5rem;
  background:#eef5ff; color:var(--tk-azul,#1F82F7); font-weight:800; margin-bottom:.75rem;
}
.tk360-nota {
  background:#eef5ff; border-left:3px solid var(--tk-azul,#1F82F7);
  border-radius:.5rem; padding:1.25rem 1.35rem;
}
.tk360-quien {
  background:#fff; border:1px solid #e6ecf5; border-radius:.6rem;
  padding:.9rem 1.1rem; height:100%; font-size:.95rem;
}
.tk360-cierre { background:linear-gradient(180deg,#ffffff 0%,#f4f8ff 100%); }

/* ---- Honeypot del formulario de contacto ---------------------------------
   Se saca de la vista sin display:none, que algunos bots detectan. */
.gss-hp {
  position: absolute !important;
  left: -9999px !important;
  width: 1px; height: 1px; overflow: hidden;
}