/* ============================================================
   TECNOSOP — Sistema de diseño
   Paleta: rojo Tecnosop + grafito + slate (base B2B Service)
   Tipografía: Manrope (títulos) + Inter (texto)
   ============================================================ */

:root {
  /* Marca — colores oficiales del manual (Brand.pdf)
     --ts-red      Pantone 1788: logo, íconos, bordes y acentos gráficos (mínimo 3:1)
     --ts-red-cta  mismo tono, oscurecido para fondos de botón y texto rojo pequeño (5.86:1, AA)
     --ts-red-dark hover y énfasis (6.74:1) */
  --ts-red: #EB2629;
  --ts-red-cta: #C51E24;
  --ts-red-dark: #B31D23;
  --ts-red-soft: #FDEDED;
  /* Secundarios oficiales (Pantone 200-5 y 201-9). Se usan para lo informativo
     y para la línea co-gestionada, sin competir con el rojo de acción. */
  --ts-blue: #66A6D9;       /* Pantone 200-5: acentos gráficos */
  --ts-blue-mid: #BFD9E6;   /* Pantone 201-9: superficies y texto sobre oscuro */
  --ts-blue-dark: #1B5C88;  /* texto sobre claro (7.16:1) */
  --ts-blue-soft: #F1F7FA;  /* fondos de nota */
  /* Neutros */
  --ts-ink: #21211A;        /* oficial Pantone 419 */
  --ts-ink-2: #2B2B23;      /* superficie oscura elevada */
  --ts-ink-3: #3A3A30;      /* bordes en oscuro */
  --ts-slate: #475569;      /* texto secundario */
  --ts-slate-light: #94A3B8;
  --ts-bg: #F7F8FA;         /* fondo alterno claro */
  --ts-surface: #FFFFFF;
  --ts-border: #E4E8EE;
  /* Semánticos */
  --ts-green: #15803D;
  --ts-green-soft: #EAF7EF;
  --ts-amber: #B45309;
  --ts-amber-soft: #FEF6E7;
  /* Texto sobre oscuro */
  --ts-on-dark: #F1F5F9;
  --ts-on-dark-muted: #A9B4C0;
  /* Tipografía */
  --font-heading: 'Manrope', system-ui, sans-serif;
  --font-body: 'Inter', system-ui, sans-serif;
  /* Ritmo */
  --section-pad: clamp(4rem, 8vw, 6.5rem);
  --radius: 16px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 2px rgba(33, 33, 26, .06), 0 1px 8px rgba(33, 33, 26, .05);
  --shadow-md: 0 6px 24px rgba(33, 33, 26, .09);
  --shadow-lg: 0 18px 48px rgba(33, 33, 26, .16);
  /* Movimiento */
  --ease-out: cubic-bezier(.22, 1, .36, 1);
  --dur: .55s;
  /* Bootstrap overrides */
  --bs-primary: #EB2629;
  --bs-link-color: #B31D23;
  --bs-link-hover-color: #8E171C;
  --bs-body-color: #333B45;
  --bs-body-font-family: var(--font-body);
}

/* ---------- Base ---------- */
html { scroll-behavior: smooth; scroll-padding-top: 96px; }
body {
  font-family: var(--font-body);
  color: #333B45;
  background: var(--ts-surface);
  font-size: 1rem;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
  touch-action: manipulation;
}
h1, h2, h3, h4, h5, .h1, .h2, .h3 {
  font-family: var(--font-heading);
  font-weight: 800;
  color: var(--ts-ink);
  line-height: 1.15;
  letter-spacing: -.015em;
}
.lead { font-size: 1.125rem; color: var(--ts-slate); }
a { text-decoration: none; }
p a, li a { text-decoration: underline; text-underline-offset: 3px; }
img { max-width: 100%; height: auto; }
.skip-link { position: absolute; z-index: 2000; background: var(--ts-ink); color: #fff; padding: .75rem 1.25rem; border-radius: 0 0 var(--radius-sm) 0; }

.ico { width: 24px; height: 24px; flex-shrink: 0; }
.ico-sm { width: 18px; height: 18px; }
.ico-lg { width: 30px; height: 30px; }

/* ---------- Botones ---------- */
.btn { font-weight: 600; border-radius: 999px; padding: .7rem 1.5rem; transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out), background-color .18s; }
.btn .ico { vertical-align: -4px; margin-left: .35rem; transition: transform .18s var(--ease-out); }
.btn:hover .ico { transform: translateX(3px); }
.btn:active { transform: scale(.97); }
.btn-primary { --bs-btn-bg: var(--ts-red-cta); --bs-btn-border-color: var(--ts-red-cta); --bs-btn-hover-bg: var(--ts-red-dark); --bs-btn-hover-border-color: var(--ts-red-dark); --bs-btn-active-bg: var(--ts-red-dark); --bs-btn-active-border-color: var(--ts-red-dark); box-shadow: 0 4px 14px rgba(197, 30, 36, .3); }
.btn-primary:hover { box-shadow: 0 6px 20px rgba(197, 30, 36, .38); transform: translateY(-1px); }
.btn-outline-dark { --bs-btn-border-color: var(--ts-ink-3); --bs-btn-color: var(--ts-ink); }
.btn-lg { padding: .9rem 1.9rem; font-size: 1.05rem; }
.btn:focus-visible, a:focus-visible { outline: 3px solid rgba(235, 38, 41, .45); outline-offset: 2px; }

/* ---------- Navbar ---------- */
.site-header { background: rgba(255, 255, 255, .92); backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px); border-bottom: 1px solid transparent; transition: border-color .25s, box-shadow .25s; }
.site-header.scrolled { border-color: var(--ts-border); box-shadow: 0 2px 16px rgba(33, 33, 26, .07); }
.navbar-toggler { min-width: 44px; min-height: 44px; }
.navbar { padding: .85rem 0; }
.navbar-brand img { display: block; }
.navbar .nav-link { font-weight: 600; color: var(--ts-ink); padding: .55rem .9rem !important; border-radius: 8px; position: relative; }
.navbar .nav-link:hover { color: var(--ts-red-cta); }
.navbar .nav-link.active { color: var(--ts-red-cta); }
.navbar .nav-link.active::after { content: ''; position: absolute; left: .9rem; right: .9rem; bottom: .25rem; height: 2px; background: var(--ts-red); border-radius: 2px; }
.btn-nav { padding: .55rem 1.25rem; white-space: nowrap; }
.dropdown-servicios { border: 1px solid var(--ts-border); border-radius: var(--radius); padding: .6rem; min-width: 340px; }
.dropdown-servicios .dropdown-item { display: flex; gap: .8rem; align-items: flex-start; border-radius: var(--radius-sm); padding: .6rem .7rem; white-space: normal; }
.dropdown-servicios .dropdown-item small { display: block; color: var(--ts-slate); font-size: .8rem; }
.dropdown-servicios .dropdown-item strong { color: var(--ts-ink); font-size: .92rem; }
.dropdown-servicios .dropdown-item:hover { background: var(--ts-bg); }
.dropdown-servicios .dropdown-item.destacado strong { color: var(--ts-red-dark); }
.dd-ico { color: var(--ts-red); margin-top: 2px; }
.dd-ico .ico { width: 20px; height: 20px; }
@media (min-width: 992px) {
  .dropdown-servicios { min-width: 620px; }
  .dropdown-servicios.show { display: grid; grid-template-columns: 1fr 1fr; }
  .dropdown-servicios.show li { display: contents; }
}

/* ---------- Secciones ---------- */
.section { padding: var(--section-pad) 0; }
.section-alt { background: var(--ts-bg); }
.section-dark { background: linear-gradient(180deg, var(--ts-ink) 0%, #26261F 100%); color: var(--ts-on-dark); }
.section-dark h2, .section-dark h3 { color: #fff; }
.section-dark p { color: var(--ts-on-dark-muted); }
.eyebrow { display: inline-flex; align-items: center; gap: .5rem; font-size: .8rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--ts-red-cta); margin-bottom: 1rem; }
.eyebrow::before { content: ''; width: 22px; height: 2px; background: var(--ts-red); border-radius: 2px; }
.section-title { font-size: clamp(1.75rem, 3.6vw, 2.6rem); margin-bottom: 1rem; }
.section-intro { max-width: 720px; }

/* ---------- Hero: carrusel de servicios ---------- */
.hero-slider { background: var(--ts-ink); color: var(--ts-on-dark); }
.hero-slider .carousel-item { min-height: clamp(540px, 78vh, 720px); padding: calc(96px + clamp(2.5rem, 6vw, 4.5rem)) 0 clamp(3.5rem, 7vw, 5.5rem); display: none; }
.hero-slider .carousel-item.active,
.hero-slider .carousel-item-next,
.hero-slider .carousel-item-prev { display: flex; align-items: center; }
.slide-media { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }
.slide-overlay { position: absolute; inset: 0; background: linear-gradient(90deg, rgba(15, 19, 23, .93) 0%, rgba(15, 19, 23, .82) 42%, rgba(15, 19, 23, .45) 72%, rgba(15, 19, 23, .3) 100%), linear-gradient(0deg, rgba(15, 19, 23, .55) 0%, transparent 35%); }
.slide-content { position: relative; z-index: 2; }
.hero-slider h1, .hero-slider .slide-title { color: #fff; font-family: var(--font-heading); font-weight: 800; line-height: 1.12; letter-spacing: -.02em; font-size: clamp(1.9rem, 4.2vw, 3.1rem); max-width: 780px; }
.hero-slider .lead { color: #C7D0D9; font-size: clamp(1.02rem, 1.5vw, 1.18rem); max-width: 640px; margin-top: 1rem; }
/* Entrada suave del contenido de cada diapositiva */
.js .hero-slider .carousel-item .slide-content > * { opacity: 0; transform: translateY(18px); transition: opacity .6s var(--ease-out), transform .6s var(--ease-out); }
.hero-slider .carousel-item.active .slide-content > * { opacity: 1; transform: none; }
.hero-slider .carousel-item.active .slide-content > :nth-child(1) { transition-delay: .15s; }
.hero-slider .carousel-item.active .slide-content > :nth-child(2) { transition-delay: .25s; }
.hero-slider .carousel-item.active .slide-content > :nth-child(3) { transition-delay: .35s; }
.hero-slider .carousel-item.active .slide-content > :nth-child(4) { transition-delay: .45s; }
/* Indicadores y flechas */
.hero-slider .carousel-indicators { z-index: 3; margin-bottom: 1.4rem; }
.hero-slider .carousel-indicators button { width: 28px; height: 4px; border-radius: 999px; background: rgba(255, 255, 255, .35); border: 0; opacity: 1; transition: background .2s, width .2s; position: relative; }
/* Área táctil ampliada sin cambiar el tamaño visual del indicador */
.hero-slider .carousel-indicators button::after { content: ''; position: absolute; left: 0; right: 0; top: -14px; bottom: -14px; }
.hero-slider .carousel-indicators button.active { background: var(--ts-red); width: 44px; }
.hero-slider .carousel-control-prev, .hero-slider .carousel-control-next { width: 8%; z-index: 3; opacity: .55; }
.hero-slider .carousel-control-prev:hover, .hero-slider .carousel-control-next:hover { opacity: 1; }
@media (max-width: 767.98px) {
  .hero-slider .carousel-control-prev, .hero-slider .carousel-control-next { display: none; }
  .hero-slider .carousel-item { min-height: 88svh; }
}

.hero-badge { display: inline-flex; align-items: center; gap: .5rem; background: rgba(235, 38, 41, .14); border: 1px solid rgba(235, 38, 41, .35); color: #FCA5A9; font-size: .85rem; font-weight: 600; padding: .4rem 1rem; border-radius: 999px; margin-bottom: 1.4rem; }
.hero-badge .ico { width: 16px; height: 16px; }
/* Variante azul: identifica la línea co-gestionada (empresas con IT propio) */
.hero-badge.azul { background: rgba(102, 166, 217, .16); border-color: rgba(102, 166, 217, .4); color: var(--ts-blue-mid); }
.btn-ghost-light { --bs-btn-color: #fff; --bs-btn-border-color: rgba(255,255,255,.45); --bs-btn-hover-bg: rgba(255,255,255,.12); --bs-btn-hover-color: #fff; --bs-btn-hover-border-color: rgba(255,255,255,.7); }

/* Barra de confianza */
.trustbar { background: rgba(255, 255, 255, .04); border-top: 1px solid rgba(255, 255, 255, .08); }
.trustbar .container { display: flex; flex-wrap: wrap; gap: .5rem 2.5rem; justify-content: center; padding-top: 1.1rem; padding-bottom: 1.1rem; }
.trustbar span { display: inline-flex; align-items: center; gap: .55rem; color: var(--ts-on-dark-muted); font-size: .88rem; font-weight: 500; }
.trustbar .ico { width: 17px; height: 17px; color: var(--ts-red); }

/* Muro de logos de clientes.
   Los logos vienen de fuentes distintas (colores, formatos y proporciones
   dispares), así que se neutralizan en gris y se igualan por altura, no por
   ancho: es lo que hace que la grilla se lea como un conjunto. */
/* El ancho es el recurso escaso, no la altura: los logos apaisados (Concentrix
   es 6,5:1) se achican hasta ser ilegibles si la celda es angosta. De ahí el
   padding lateral mínimo y el escalón de columnas 2 → 3 → 6. */
.logo-cliente-caja { display: flex; align-items: center; justify-content: center; height: 100%; min-height: 84px; padding: .5rem .35rem; }
/* mix-blend-mode: multiply hace desaparecer el fondo blanco de los logos que no
   tienen transparencia (JPG). Sobre fondo claro el blanco se vuelve invisible y
   el dibujo se mantiene, así que sirve igual para PNG/WebP con alfa. */
.logo-cliente { max-width: 100%; max-height: 52px; width: auto; height: auto; object-fit: contain; filter: grayscale(1); opacity: .7; mix-blend-mode: multiply; transition: filter .25s var(--ease-out), opacity .25s var(--ease-out); }
.logo-cliente-caja:hover .logo-cliente { filter: grayscale(0); opacity: 1; }
/* Si el archivo todavía no está, el alt queda legible en vez de romper la grilla. */
.logo-cliente:-moz-broken { color: var(--ts-slate); font-size: .82rem; }
@media (prefers-reduced-motion: reduce) { .logo-cliente { transition: none; } }

/* Marcas con las que se resolvió cada caso de éxito ("Resuelto con") */
.logos-caso-caja { background: var(--ts-bg); border: 1px solid var(--ts-border); border-radius: var(--radius); padding: 1.4rem 1rem; text-align: center; }
.logos-caso-titulo { font-size: .72rem; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--ts-slate); margin-bottom: .9rem; }
/* Solo algunos logos llevan rótulo (los que son un símbolo sin el nombre de la marca).
   La franja fija de 34px para el logo mantiene todos alineados aunque el de al lado
   no tenga texto debajo. Los logotipos son apaisados, así que el ancho es el límite
   que manda: por eso max-width es generoso y max-height, corto. */
.logos-caso { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-start; gap: 1rem 1.6rem; }
.logo-marca { display: flex; flex-direction: column; align-items: center; gap: .45rem; margin: 0; }
.logo-marca img { height: 34px; max-width: 150px; width: auto; object-fit: contain; object-position: center; filter: grayscale(1); opacity: .75; mix-blend-mode: multiply; transition: filter .25s var(--ease-out), opacity .25s var(--ease-out); }
.logo-marca figcaption { font-size: .74rem; font-weight: 500; color: var(--ts-slate); }
.card-ts:hover .logo-marca img { filter: grayscale(0); opacity: 1; }

/* Carrusel de casos de éxito (home).
   El alto mínimo es fijo a propósito: los textos varían entre 137 y 217
   caracteres, y sin él la página daría un salto en cada cambio de diapositiva. */
.casos-carrusel { position: relative; max-width: 720px; margin: 3rem auto 0; }
.caso-slide { background: var(--ts-bg); border: 1px solid var(--ts-border); border-radius: var(--radius); padding: 2.25rem 2rem 1.9rem; min-height: 340px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .9rem; }
.caso-slide-titulo { font-size: 1.32rem; line-height: 1.3; margin: 0; max-width: 26ch; }
.caso-slide-gano { color: var(--ts-slate); margin: 0; max-width: 54ch; font-size: .97rem; }
.caso-slide-marcas { margin-top: .2rem; }
.caso-slide-marcas img { max-height: 26px; max-width: 100px; }
.caso-slide-marcas figcaption { font-size: .7rem; }
.caso-slide:hover .logo-marca img { filter: grayscale(0); opacity: 1; }
.caso-slide-link { font-weight: 600; color: var(--ts-red-cta); display: inline-flex; align-items: center; }
.caso-slide-link:hover { color: var(--ts-red-dark); }
.caso-control { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--ts-border); background: #fff; color: var(--ts-ink); display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-sm); transition: background-color .2s, color .2s, border-color .2s; }
.caso-control:hover { background: var(--ts-red-cta); color: #fff; border-color: var(--ts-red-cta); }
.caso-control-prev { left: -22px; }
.caso-control-next { right: -22px; }
.casos-carrusel-pie { margin: 1.1rem 0 0; font-size: .84rem; color: var(--ts-slate); }
@media (max-width: 860px) {
  .caso-control-prev { left: 2px; }
  .caso-control-next { right: 2px; }
  .caso-slide { padding-left: 3.6rem; padding-right: 3.6rem; min-height: 400px; }
}
@media (prefers-reduced-motion: reduce) { .casos-carrusel .carousel-item { transition: none; } }

/* ---------- Tarjetas ---------- */
.card-ts { background: var(--ts-surface); border: 1px solid var(--ts-border); border-radius: var(--radius); padding: 1.75rem; height: 100%; box-shadow: var(--shadow-sm); transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out), border-color .25s; position: relative; }
a.card-ts { display: block; color: inherit; }
.card-ts:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); border-color: #D6DCE4; }
.card-ts h3 { font-size: 1.15rem; margin-bottom: .5rem; }
.card-ts p { color: var(--ts-slate); font-size: .95rem; margin-bottom: 0; }
.card-ts .para-quien { display: block; margin-top: .9rem; font-size: .85rem; font-weight: 600; color: var(--ts-ink); }
.card-ico { display: inline-flex; width: 52px; height: 52px; align-items: center; justify-content: center; border-radius: 14px; background: var(--ts-red-soft); color: var(--ts-red); margin-bottom: 1.1rem; }
.card-ico .ico { width: 26px; height: 26px; }
.card-destacada { border-top: 3px solid var(--ts-red); }
.card-badge { position: absolute; top: 1.4rem; right: 1.4rem; font-size: .7rem; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ts-red-dark); background: var(--ts-red-soft); padding: .25rem .65rem; border-radius: 999px; }
.link-mas { display: inline-flex; align-items: center; gap: .3rem; font-weight: 600; color: var(--ts-red-dark); font-size: .92rem; padding: .8rem 0; margin: .2rem 0 -.8rem; }
.link-mas .ico { transition: transform .18s var(--ease-out); }
.card-ts:hover .link-mas .ico, .link-mas:hover .ico { transform: translateX(4px); }

/* Dos caminos */
.camino { border-radius: var(--radius); padding: 2.25rem; height: 100%; border: 1px solid var(--ts-border); background: var(--ts-surface); box-shadow: var(--shadow-sm); transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out); }
.camino:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.camino .tag-camino { display: inline-block; font-size: .78rem; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: .3rem .8rem; border-radius: 999px; margin-bottom: 1.1rem; }
.camino-a .tag-camino { background: var(--ts-red-soft); color: var(--ts-red-dark); }
.camino-b .tag-camino { background: var(--ts-blue-soft); color: var(--ts-blue-dark); }
.camino h3 { font-size: 1.35rem; }

/* Tira de acceso rápido a servicios */
.strip-servicios { display: flex; flex-wrap: wrap; justify-content: center; gap: .75rem; }
.strip-servicios a { display: inline-flex; align-items: center; gap: .55rem; padding: .6rem 1.1rem; min-height: 44px; border: 1px solid var(--ts-border); border-radius: 999px; background: var(--ts-surface); color: var(--ts-ink); font-weight: 600; font-size: .92rem; box-shadow: var(--shadow-sm); transition: transform .18s var(--ease-out), box-shadow .18s var(--ease-out), border-color .18s; }
.strip-servicios a .ico { width: 19px; height: 19px; color: var(--ts-red); }
.strip-servicios a:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: #D6DCE4; color: var(--ts-red-dark); }
.strip-servicios a:active { transform: scale(.97); }

/* Listas con check */
.lista-check { list-style: none; padding: 0; margin: 0; }
.lista-check li { display: flex; gap: .85rem; margin-bottom: 1.05rem; align-items: flex-start; }
.lista-check .ico { color: var(--ts-green); margin-top: .2rem; width: 21px; height: 21px; }
.lista-check strong { color: var(--ts-ink); }
.lista-check.roja .ico { color: var(--ts-red); }

/* Lista con íconos representativos (chip como las tarjetas de servicio) */
.lista-iconos { list-style: none; padding: 0; margin: 0; }
.lista-iconos li { display: flex; gap: 1rem; margin-bottom: 1.25rem; align-items: flex-start; }
.lista-iconos strong { color: var(--ts-ink); }
.li-ico { display: inline-flex; flex-shrink: 0; width: 44px; height: 44px; align-items: center; justify-content: center; border-radius: 12px; background: var(--ts-red-soft); color: var(--ts-red); }
.li-ico .ico { width: 22px; height: 22px; }

/* Marcadores COMPLETAR: permitir salto de línea (Bootstrap usa nowrap) */
.badge.text-bg-light { white-space: normal; text-align: left; line-height: 1.4; vertical-align: baseline; }

/* Bloque destacado / citas */
.bloque-destacado { background: var(--ts-blue-soft); border-left: 4px solid var(--ts-blue); border-radius: 0 var(--radius) var(--radius) 0; padding: 1.6rem 1.8rem; }
.bloque-destacado p:last-child { margin-bottom: 0; }
.section-dark .bloque-destacado { background: rgba(255, 255, 255, .05); }

/* Proceso 4 pasos */
.paso { position: relative; padding-left: 0; }
.paso-num { font-family: var(--font-heading); font-weight: 800; font-size: 2.6rem; line-height: 1; color: transparent; -webkit-text-stroke: 1.5px var(--ts-red); margin-bottom: .8rem; }
.paso h3 { font-size: 1.1rem; }
.paso p { font-size: .93rem; color: var(--ts-slate); }
@media (min-width: 992px) {
  .proceso-grid { position: relative; }
  .proceso-grid::before { content: ''; position: absolute; top: 1.2rem; left: 4%; right: 4%; height: 1px; background: linear-gradient(90deg, transparent, var(--ts-border) 15%, var(--ts-border) 85%, transparent); }
}

/* Métricas */
.stat { text-align: center; }
.stat .num { font-family: var(--font-heading); font-weight: 800; font-size: clamp(2.2rem, 4vw, 3rem); color: #fff; font-variant-numeric: tabular-nums; }
.stat .num .suf { color: var(--ts-red); }
.stat .lbl { color: var(--ts-on-dark-muted); font-size: .9rem; }

/* ---------- Hero interno de página ---------- */
.page-hero { background: radial-gradient(900px 420px at 85% -20%, rgba(235, 38, 41, .14), transparent 60%), linear-gradient(180deg, #21211A, #2C2C23); color: var(--ts-on-dark); padding: calc(96px + 3.2rem) 0 3.6rem; position: relative; overflow: hidden; }
.page-hero h1 { color: #fff; font-size: clamp(1.9rem, 3.8vw, 2.9rem); max-width: 900px; }
.page-hero .lead { color: var(--ts-on-dark-muted); max-width: 760px; }
.breadcrumb { --bs-breadcrumb-divider-color: var(--ts-slate-light); font-size: .84rem; margin-bottom: 1.4rem; }
.breadcrumb a { color: var(--ts-slate-light); }
.breadcrumb a:hover { color: #fff; }
.breadcrumb .active { color: var(--ts-on-dark-muted); }

/* Tarjeta "qué recibe cada mes" */
.entregable { background: linear-gradient(135deg, #fff, #FBFBFD); border: 1px solid var(--ts-border); border-radius: var(--radius); padding: 2rem; box-shadow: var(--shadow-md); }
.entregable .ico-head { color: var(--ts-red); margin-bottom: .8rem; }
.entregable .ico-head .ico { width: 30px; height: 30px; }

/* ---------- Planes ---------- */
.plan { border: 1px solid var(--ts-border); border-radius: var(--radius); background: #fff; padding: 2rem; height: 100%; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out); }
.plan:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.plan.recomendado { border: 2px solid var(--ts-red); box-shadow: var(--shadow-md); }
.plan.plan-alt { border-top: 3px solid var(--ts-blue); }
.plan .plan-tag { align-self: flex-start; font-size: .72rem; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; background: var(--ts-red-cta); color: #fff; padding: .3rem .8rem; border-radius: 999px; margin-bottom: 1rem; }
.plan h3 { font-size: 1.3rem; }
.plan .plan-sub { color: var(--ts-slate); font-size: .92rem; min-height: 3em; }
.plan .lista-check { flex-grow: 1; }
.plan .lista-check li { margin-bottom: .7rem; font-size: .93rem; }
.plan .ideal { font-size: .85rem; background: var(--ts-bg); border-radius: var(--radius-sm); padding: .8rem 1rem; margin: 1rem 0; color: var(--ts-ink); }
.tabla-comparativa th { font-family: var(--font-heading); font-weight: 700; white-space: nowrap; }
.tabla-comparativa td, .tabla-comparativa th { padding: .95rem 1.1rem; vertical-align: top; }
.tabla-comparativa .col-ts { background: var(--ts-red-soft); }

/* ---------- Sectores ---------- */
.sector { display: flex; gap: 1.4rem; align-items: flex-start; }
.sector .card-ico { margin-bottom: 0; }
.sector h3 { font-size: 1.2rem; }
.sector .servicios-tag { font-size: .82rem; color: var(--ts-slate); font-style: italic; }

/* ---------- FAQ ---------- */
.accordion-ts .accordion-item { border: 1px solid var(--ts-border); border-radius: var(--radius-sm) !important; margin-bottom: .8rem; overflow: hidden; background: #fff; }
.accordion-ts .accordion-button { font-family: var(--font-heading); font-weight: 700; color: var(--ts-ink); font-size: 1rem; padding: 1.15rem 1.4rem; background: #fff; }
.accordion-ts .accordion-button:not(.collapsed) { background: var(--ts-bg); color: var(--ts-red-dark); box-shadow: none; }
.accordion-ts .accordion-button:focus { box-shadow: 0 0 0 3px rgba(235, 38, 41, .2); }
.accordion-ts .accordion-body { color: var(--ts-slate); padding: 1.1rem 1.4rem 1.4rem; }

/* ---------- CTA band ---------- */
.cta-band { background: radial-gradient(700px 340px at 15% 120%, rgba(235, 38, 41, .25), transparent 60%), linear-gradient(135deg, var(--ts-ink), #303026); padding: clamp(3.5rem, 6vw, 5rem) 0; }
.cta-inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1.5rem; }
.cta-title { color: #fff; font-size: clamp(1.5rem, 3vw, 2.1rem); margin-bottom: .5rem; }
.cta-sub { color: var(--ts-on-dark-muted); max-width: 560px; }
.btn-cta { white-space: normal; }

/* ---------- Blog ---------- */
.post-card { border: 1px solid var(--ts-border); border-radius: var(--radius); overflow: hidden; background: #fff; height: 100%; display: flex; flex-direction: column; box-shadow: var(--shadow-sm); transition: transform .25s var(--ease-out), box-shadow .25s var(--ease-out); }
.post-card:hover { transform: translateY(-5px); box-shadow: var(--shadow-md); }
.post-card .post-visual { aspect-ratio: 16 / 8; display: flex; align-items: center; justify-content: center; color: #fff; background: linear-gradient(135deg, var(--ts-ink), #3A3A30); }
.post-card .post-visual .ico { width: 44px; height: 44px; opacity: .9; color: var(--ts-red); }
.post-card .post-body { padding: 1.4rem 1.5rem 1.6rem; display: flex; flex-direction: column; flex-grow: 1; }
.post-card h3 { font-size: 1.08rem; line-height: 1.35; }
.post-card h3 a { color: var(--ts-ink); }
.post-card h3 a:hover { color: var(--ts-red-dark); }
.post-card p { color: var(--ts-slate); font-size: .92rem; flex-grow: 1; }
.post-meta { font-size: .8rem; color: var(--ts-slate); display: flex; gap: .9rem; align-items: center; margin-bottom: .6rem; }
.post-cat { color: var(--ts-red-dark); font-weight: 700; text-transform: uppercase; letter-spacing: .06em; font-size: .72rem; }

/* Artículo */
.articulo { max-width: 760px; }
.articulo h2 { font-size: 1.55rem; margin-top: 2.6rem; margin-bottom: .9rem; }
.articulo h3 { font-size: 1.2rem; margin-top: 2rem; margin-bottom: .7rem; }
.articulo p, .articulo li { font-size: 1.05rem; line-height: 1.75; color: #3A424C; }
.articulo blockquote { border-left: 4px solid var(--ts-red); background: var(--ts-bg); padding: 1.3rem 1.6rem; border-radius: 0 var(--radius-sm) var(--radius-sm) 0; margin: 1.8rem 0; font-weight: 500; color: var(--ts-ink); }
.articulo .aviso-cta { background: linear-gradient(135deg, var(--ts-ink), #303026); color: var(--ts-on-dark); border-radius: var(--radius); padding: 1.8rem 2rem; margin: 2.6rem 0; }
.articulo .aviso-cta h2, .articulo .aviso-cta h3 { color: #fff; margin-top: 0; }
.articulo .aviso-cta p { color: var(--ts-on-dark-muted); font-size: .97rem; }

/* ---------- Formulario ---------- */
.form-ts .form-label { font-weight: 600; color: var(--ts-ink); }
.form-ts .form-control, .form-ts .form-select { border-radius: var(--radius-sm); border-color: #D5DBE3; padding: .7rem .9rem; min-height: 48px; font-size: 1rem; }
.form-ts .form-control:focus, .form-ts .form-select:focus { border-color: var(--ts-red); box-shadow: 0 0 0 3px rgba(235, 38, 41, .15); }
.form-ts .form-text { color: var(--ts-slate); }
.panel-contacto { background: var(--ts-ink); color: var(--ts-on-dark); border-radius: var(--radius); padding: 2.2rem; }
.panel-contacto h2, .panel-contacto h3 { color: #fff; }
.panel-contacto .lista-check .ico { color: #34D399; }
.panel-contacto li { color: var(--ts-on-dark-muted); }

/* ---------- Footer ---------- */
.site-footer { background: #1A1A15; color: var(--ts-on-dark-muted); padding: 4rem 0 1.5rem; font-size: .93rem; }
.footer-title { font-family: var(--font-heading); font-size: .82rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #fff; margin-bottom: 1.1rem; }
.footer-links { list-style: none; padding: 0; margin: 0; }
.footer-links li { margin-bottom: .3rem; }
.footer-links a { color: var(--ts-on-dark-muted); transition: color .15s; display: inline-block; padding: .25rem 0; }
.footer-links a:hover { color: #fff; }
.footer-tagline { color: #E6EBF0; font-weight: 600; font-family: var(--font-heading); }
.footer-muted { color: #7E8A96; font-size: .87rem; }
.footer-contact { list-style: none; padding: 0; margin: 0 0 1rem; }
.footer-contact li { display: flex; gap: .7rem; align-items: flex-start; margin-bottom: .7rem; }
.footer-contact .ico { width: 19px; height: 19px; color: var(--ts-red); margin-top: 3px; }
.footer-contact a { color: var(--ts-on-dark-muted); }
.footer-contact a:hover { color: #fff; }
.footer-bottom { border-top: 1px solid var(--ts-ink-3); padding-top: 1.4rem; font-size: .84rem; }

/* Chat flotante (Chatwoot) */
.chat-float { position: fixed; right: 20px; bottom: 20px; z-index: 1040; width: 58px; height: 58px; border-radius: 50%; background: var(--ts-red-cta); color: #fff; display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 24px rgba(197, 30, 36, .40); transition: transform .2s var(--ease-out), box-shadow .2s; }
.chat-float:hover { transform: scale(1.08); color: #fff; background: var(--ts-red-dark); box-shadow: 0 10px 30px rgba(197, 30, 36, .50); }
.chat-float:active { transform: scale(.96); }
/* El widget de Chatwoot se abre desde .chat-float, por encima de su propio z-index. */
.woot-widget-holder { z-index: 1041 !important; }

/* ---------- Animaciones de entrada ---------- */
/* El contenido se oculta SOLO si hay JavaScript disponible (la clase .js la agrega
   un script en el <head>). Sin JS —o en el lienzo de un editor visual— todo se ve
   normalmente en lugar de quedar en blanco. */
.js .reveal { opacity: 0; transform: translateY(26px); transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); transition-delay: var(--d, 0s); will-change: opacity, transform; }
.reveal.in { opacity: 1; transform: none; }
.js .reveal-grid > * { opacity: 0; transform: translateY(26px); transition: opacity var(--dur) var(--ease-out), transform var(--dur) var(--ease-out); }
.reveal-grid.in > * { opacity: 1; transform: none; }
.reveal-grid.in > *:nth-child(1) { transition-delay: .02s; }
.reveal-grid.in > *:nth-child(2) { transition-delay: .09s; }
.reveal-grid.in > *:nth-child(3) { transition-delay: .16s; }
.reveal-grid.in > *:nth-child(4) { transition-delay: .23s; }
.reveal-grid.in > *:nth-child(5) { transition-delay: .3s; }
.reveal-grid.in > *:nth-child(6) { transition-delay: .37s; }
.reveal-grid.in > *:nth-child(7) { transition-delay: .44s; }
.reveal-grid.in > *:nth-child(8) { transition-delay: .51s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .reveal, .reveal-grid > * { opacity: 1 !important; transform: none !important; transition: none !important; }
  .hero-chip, .status-dot { animation: none !important; }
  .btn, .card-ts, .plan, .post-card, .camino { transition: none !important; }
}

/* ---------- Responsive ---------- */
@media (max-width: 991.98px) {
  .navbar-collapse { background: #fff; border-radius: var(--radius); padding: 1rem; margin-top: .75rem; box-shadow: var(--shadow-md); }
  .btn-nav { width: 100%; text-align: center; margin-top: .5rem; }
  .hero-visual { margin-top: 3rem; }
  .chip-1 { top: -16px; right: 4px; }
  .chip-2 { bottom: -14px; left: 4px; }
}
@media (max-width: 575.98px) {
  .hero-chip { display: none; }
  .cta-inner { flex-direction: column; align-items: flex-start; }
}

/* ---------- Autoevaluación (semáforo express) ---------- */
.quiz-card { background: var(--ts-surface); border: 1px solid var(--ts-border); border-radius: var(--radius); padding: 2.2rem; box-shadow: var(--shadow-sm); max-width: 720px; margin: 0 auto; }
.quiz-progreso { height: 8px; background: var(--ts-bg); border-radius: 999px; overflow: hidden; margin-bottom: 1.6rem; }
.quiz-progreso .barra { height: 100%; width: 0; background: var(--ts-red); border-radius: 999px; transition: width .35s var(--ease-out); }
.quiz-area { font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ts-red-cta); margin-bottom: .5rem; }
.quiz-pregunta { font-family: var(--font-heading); font-weight: 700; font-size: 1.35rem; color: var(--ts-ink); margin-bottom: 1.4rem; }
.quiz-opciones { display: grid; gap: .7rem; }
.quiz-opciones button { text-align: left; border: 1px solid var(--ts-border); background: var(--ts-surface); border-radius: var(--radius-sm); padding: .9rem 1.2rem; font-weight: 600; color: var(--ts-ink); font-size: 1rem; transition: border-color .15s, background .15s, transform .15s var(--ease-out); }
.quiz-opciones button:hover { border-color: var(--ts-red); background: var(--ts-red-soft); transform: translateY(-1px); }
.quiz-contador { color: var(--ts-slate); font-size: .85rem; margin-top: 1.3rem; margin-bottom: 0; }
.semaforo-item { display: flex; gap: 1rem; align-items: flex-start; border: 1px solid var(--ts-border); border-radius: var(--radius-sm); padding: 1.1rem 1.3rem; background: var(--ts-surface); }
.semaforo-item + .semaforo-item { margin-top: .8rem; }
.semaforo-luz { flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%; margin-top: .25rem; }
.semaforo-item.verde .semaforo-luz { background: var(--ts-green); box-shadow: 0 0 0 5px var(--ts-green-soft); }
.semaforo-item.amarillo .semaforo-luz { background: var(--ts-amber); box-shadow: 0 0 0 5px var(--ts-amber-soft); }
.semaforo-item.rojo .semaforo-luz { background: var(--ts-red); box-shadow: 0 0 0 5px var(--ts-red-soft); }
.semaforo-item h3 { font-size: 1.05rem; margin-bottom: .2rem; }
.semaforo-item p { color: var(--ts-slate); font-size: .95rem; margin-bottom: 0; }
.articulo .aviso-cta .cta-alt { margin: .9rem 0 0; font-size: .9rem; }
.articulo .aviso-cta .cta-alt a { color: #fff; text-decoration: underline; text-underline-offset: 3px; }

/* ---------- Alianzas tecnológicas (chips de marcas) ---------- */
.chip-tec { display: inline-flex; align-items: center; gap: .45rem; border: 1px solid var(--ts-border); background: var(--ts-surface); border-radius: 999px; padding: .3rem .85rem; font-size: .85rem; font-weight: 600; color: #64748B; white-space: nowrap; }
.chip-tec img { height: 15px; width: auto; display: block; }
/* Chips cuyo logotipo ya dice el nombre: van sin texto al lado, y el logo se
   agranda un poco para compensar la línea de texto que no está. */
.chip-solo-logo { padding-left: .95rem; padding-right: .95rem; }
.chip-solo-logo img { height: 17px; }
.alianzas-strip { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; max-width: 860px; margin: 0 auto; }
.alianzas-tec { display: flex; flex-direction: column; gap: .9rem; }
.alianzas-tec .grupo { display: flex; flex-wrap: wrap; align-items: center; gap: .45rem; }
.alianzas-cat { flex-basis: 100%; font-size: .72rem; font-weight: 700; letter-spacing: .09em; text-transform: uppercase; color: var(--ts-slate); }

/* ---------- Monitor en vivo de ransomware.live (artículo del blog) ----------
   Pantalla oscura dentro del artículo: se lee como un tablero, no como una
   tarjeta más de contenido. Los tres estados (cargando · ok · error) se
   manejan con el atributo data-estado que pone js/ransomware-live.js. */
.rw-monitor { background: linear-gradient(160deg, #21211A, #2C2C23); border: 1px solid #3A3A30; border-radius: var(--radius); color: var(--ts-on-dark); padding: 1.7rem 1.8rem 1.5rem; margin: 2.6rem 0; box-shadow: var(--shadow-md); }
.rw-head { display: flex; gap: .85rem; align-items: flex-start; }
.rw-head h3 { color: #fff; font-size: 1.15rem; margin: 0 0 .25rem; }
.rw-vivo { flex: 0 0 auto; display: inline-flex; align-items: center; gap: .45rem; font-size: .7rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #FCA5A9; background: rgba(235, 38, 41, .14); border: 1px solid rgba(235, 38, 41, .35); border-radius: 999px; padding: .3rem .7rem; margin-left: auto; }
.rw-punto { width: 8px; height: 8px; border-radius: 50%; background: var(--ts-red); animation: rw-latido 2s var(--ease-out) infinite; }
@keyframes rw-latido { 0%, 100% { opacity: 1; transform: scale(1); } 50% { opacity: .35; transform: scale(.75); } }
.rw-monitor .rw-fuente { color: var(--ts-on-dark-muted); font-size: .85rem; margin: 0; }
.rw-monitor .rw-fuente a { color: var(--ts-blue-mid); text-decoration: underline; text-underline-offset: 3px; }
.rw-monitor .rw-fuente a:hover { color: #fff; }

.rw-cifras { display: grid; grid-template-columns: repeat(3, 1fr); gap: .8rem; margin: 1.4rem 0 1.2rem; }
.rw-cifra { background: rgba(255, 255, 255, .05); border: 1px solid #3A3A30; border-radius: var(--radius-sm); padding: .9rem 1rem; }
.rw-cifra b { display: block; font-family: var(--font-heading); font-weight: 800; font-size: 1.9rem; line-height: 1.1; color: #fff; }
.rw-cifra span { display: block; font-size: .8rem; line-height: 1.35; color: var(--ts-on-dark-muted); margin-top: .25rem; }

.rw-filtros { display: flex; gap: .45rem; margin-bottom: .9rem; }
.rw-filtros button { border: 1px solid #3A3A30; background: transparent; color: var(--ts-on-dark-muted); border-radius: 999px; padding: .3rem .9rem; font-size: .82rem; font-weight: 600; transition: border-color .15s, color .15s, background .15s; }
.rw-filtros button:hover { color: #fff; border-color: var(--ts-slate-light); }
.rw-filtros button.activo { background: var(--ts-red-cta); border-color: var(--ts-red-cta); color: #fff; }

.rw-lista { list-style: none; margin: 0; padding: 0; border-top: 1px solid #3A3A30; }
.rw-item { padding: .8rem 0; border-bottom: 1px solid #3A3A30; }
.articulo .rw-item { font-size: 1rem; }
.rw-empresa { display: block; font-weight: 600; color: #fff; line-height: 1.35; }
.rw-meta { display: flex; flex-wrap: wrap; gap: .35rem .7rem; font-size: .82rem; color: var(--ts-on-dark-muted); margin-top: .2rem; }
.rw-grupo { color: #FCA5A9; font-weight: 600; }
.rw-grupo::before { content: 'publicado por '; color: var(--ts-on-dark-muted); font-weight: 400; }
.rw-cuando { color: var(--ts-slate-light); }
.articulo .rw-vacio { color: var(--ts-on-dark-muted); font-size: .92rem; padding: 1rem 0; }

.articulo .rw-pie { font-size: .82rem; color: var(--ts-slate-light); margin: 1rem 0 0; }
.articulo .rw-pie a { color: var(--ts-blue-mid); text-decoration: underline; text-underline-offset: 3px; }
.rw-boton { display: inline-flex; align-items: center; gap: .5rem; margin-top: 1rem; }

/* Estados: mientras carga se muestra el esqueleto; si la fuente no responde,
   el bloque queda igual de útil porque deriva al sitio de ransomware.live. */
.rw-cargando, .rw-error { display: none; }
.rw-monitor[data-estado="cargando"] .rw-cifras,
.rw-monitor[data-estado="cargando"] .rw-filtros,
.rw-monitor[data-estado="cargando"] .rw-lista,
.rw-monitor[data-estado="cargando"] .rw-pie { display: none; }
.rw-monitor[data-estado="cargando"] .rw-cargando { display: block; }
.rw-monitor[data-estado="error"] .rw-cifras,
.rw-monitor[data-estado="error"] .rw-filtros,
.rw-monitor[data-estado="error"] .rw-lista,
.rw-monitor[data-estado="error"] .rw-pie { display: none; }
.rw-monitor[data-estado="error"] .rw-error { display: block; }
.articulo .rw-cargando, .articulo .rw-error { color: var(--ts-on-dark-muted); font-size: .95rem; margin: 1.3rem 0 0; }
.rw-esqueleto { height: 12px; border-radius: 999px; background: linear-gradient(90deg, #33332A, #43433A, #33332A); background-size: 200% 100%; animation: rw-brillo 1.3s linear infinite; margin-bottom: .7rem; }
.rw-esqueleto:nth-child(2) { width: 82%; }
.rw-esqueleto:nth-child(3) { width: 64%; }
@keyframes rw-brillo { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  .rw-punto, .rw-esqueleto { animation: none; }
}
@media (max-width: 575.98px) {
  .rw-monitor { padding: 1.4rem 1.2rem 1.2rem; }
  .rw-cifras { grid-template-columns: 1fr; }
  .rw-cifra { display: flex; align-items: baseline; gap: .6rem; }
  .rw-cifra b { font-size: 1.6rem; }
  .rw-vivo { margin-left: 0; }
  .rw-head { flex-wrap: wrap; }
}