/* ==========================================================================
   Trust Solution Consultores SAC — site stylesheet
   Implementation of "Trust Solution Web.dc.html" (Claude Design project).

   The design canvas file expressed everything as React-style inline styles on
   `<x-import>` component instances. Those have been translated here into real
   CSS: DS components become classes (.btn, .card, .icon-circle, .check, …) and
   the per-section inline styles become section classes.

   Contents
     1. Base & resets
     2. Layout primitives
     3. Typography
     4. Design-system components
     5. Header / navigation
     6. Footer
     7. Page sections
     8. Responsive
     9. Motion & focus preferences
   ========================================================================== */

/* ==========================================================================
   1. Base & resets
   ========================================================================== */

*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--text-body);
  background: var(--surface-page);
  line-height: var(--lh-relaxed);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

a {
  color: var(--link-color);
  text-decoration: none;
  transition: color var(--duration-fast) var(--ease-standard);
}

a:hover { color: var(--link-hover); }

p { text-wrap: pretty; margin: 0 0 1em; }
p:last-child { margin-bottom: 0; }

img { max-width: 100%; display: block; }

h1, h2, h3, h4 {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  color: var(--text-heading);
  text-wrap: balance;
  margin: 0;
}

ul { margin: 0; padding: 0; list-style: none; }
figure { margin: 0; }

/* Visually hidden, still announced by screen readers. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.skip-link {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -120%);
  z-index: 200;
  background: var(--surface-dark);
  color: #fff;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  padding: 12px 24px;
  border-radius: 0 0 var(--radius-md) var(--radius-md);
  transition: transform var(--duration-base) var(--ease-standard);
}

.skip-link:focus-visible {
  transform: translate(-50%, 0);
  color: #fff;
}

/* ==========================================================================
   2. Layout primitives
   ========================================================================== */

.container {
  width: 100%;
  max-width: 1180px;
  margin-inline: auto;
}

.container--narrow { max-width: 1000px; }
.container--prose  { max-width: 820px; }

/* Section rhythm. The design used a flat 88–96px vertical / 40px horizontal
   pad; these clamp down gracefully on smaller viewports. */
.section {
  padding: clamp(56px, 7vw, 88px) clamp(20px, 4vw, 40px);
}

.section--lg   { padding: clamp(60px, 8vw, 96px) clamp(20px, 4vw, 40px); }
.section--flush-top    { padding-top: 0; }
.section--flush-bottom { padding-bottom: 0; }

.section--muted { background: var(--surface-muted); }
.section--tint  { background: var(--gradient-tint); }
.section--white { background: #fff; }
.section--mint  { background: var(--surface-tint-soft); border-top: 1px solid var(--ts-aqua); }
.section--dark  { background: var(--gradient-dark); }
/* Distingue la banda de "puede crecer contigo" del resto de secciones claras,
   que son todas mint/teal — el ambar marca visualmente un cambio de etapa. */
.section--soft  { background: linear-gradient(160deg, rgba(var(--ts-aqua-rgb), 0.45) 0%, var(--ts-white) 62%); border-top: 1px solid var(--ts-aqua); }

.grid { display: grid; gap: 28px; }
.grid--2 { grid-template-columns: repeat(2, 1fr); }
.grid--3 { grid-template-columns: repeat(3, 1fr); }
.grid--stretch { align-items: stretch; }
.grid--tight { gap: 26px; }
.grid--wide { gap: 32px; }
/* Grid that is followed by a centred call to action. */
.grid--spaced { margin-bottom: 52px; }

.stack {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 22px;
}

/* `.stack` owns its spacing through `gap`; drop the inherited paragraph margin. */
.stack > p { margin: 0; }

.center-row { display: flex; justify-content: center; }
.center-row--spaced { margin-top: 44px; }

/* A centred, width-limited section title used where there is no eyebrow/rule. */
.section__title {
  max-width: 820px;
  text-align: center;
  margin: 0 auto 52px;
}

/* ==========================================================================
   3. Typography
   ========================================================================== */

.h-hero {
  font-size: clamp(34px, 4.4vw, 60px);
  line-height: 1.06;
  margin-bottom: 10px;
}

.h-page {
  font-size: clamp(32px, 3.8vw, 52px);
  line-height: 1.08;
}

.h-section {
  font-size: var(--fs-3xl);
  line-height: 1.14;
}

.h-card {
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
}

.h-card--sm { font-size: var(--fs-lg); }

.lead {
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
}

.eyebrow {
  font-family: var(--font-body);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  font-size: var(--fs-xs);
  color: var(--text-eyebrow);
}

.eyebrow--script {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-lg);
  letter-spacing: normal;
  text-transform: none;
  color: var(--text-eyebrow);
}

.tagline {
  font-style: italic;
  font-weight: var(--fw-semibold);
  color: var(--ts-teal);
  margin: 12px 0 20px;
}

/* The 120×3 brand rule that sits under most headings. */
.rule {
  width: 120px;
  height: 3px;
  background: linear-gradient(90deg, var(--ts-mint), var(--ts-teal), transparent);
  margin-bottom: 24px;
}

.rule--sm { width: 96px; margin-bottom: 0; }
.rule--on-dark {
  background: linear-gradient(90deg, var(--ts-mint), rgba(255, 255, 255, 0.15));
}

.on-dark { color: rgba(255, 255, 255, 0.85); }
.on-dark h1, .on-dark h2, .on-dark h3 { color: #fff; }

/* ==========================================================================
   4. Design-system components
   Ported from _ds_bundle.js (namespace TrustSolutionDesignSystem_75bad7).
   ========================================================================== */

/* --- Button --------------------------------------------------------------- */
.btn {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  border-radius: var(--radius-pill);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  text-align: center;
  padding: 13px 28px;
  font-size: 16px;
  border: none;
  background: var(--gradient-brand);
  color: #fff;
  transition:
    transform var(--duration-fast) var(--ease-standard),
    box-shadow var(--duration-fast) var(--ease-standard),
    filter var(--duration-fast) var(--ease-standard);
}

.btn:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
  filter: brightness(1.05);
  color: #fff;
}

.btn:disabled,
.btn[aria-disabled='true'] {
  cursor: not-allowed;
  opacity: 0.5;
  transform: none;
  box-shadow: none;
  filter: none;
}

.btn--sm { padding: 8px 18px; font-size: 14px; }
.btn--lg { padding: 17px 36px; font-size: 18px; }

.btn--secondary { background: var(--surface-dark); color: #fff; }

.btn--outline {
  background: transparent;
  color: var(--text-heading);
  border: 2px solid var(--color-brand-secondary);
}
.btn--outline:hover { color: var(--text-heading); }

.btn--ghost { background: transparent; color: var(--text-heading); border: none; }
.btn--ghost:hover { color: var(--text-heading); }

/* White pill CTA used on the dark home band. */
.btn--on-dark {
  background: #fff;
  color: var(--text-heading);
  font-size: 18px;
  padding: 17px 36px;
}
.btn--on-dark:hover { color: var(--text-heading); box-shadow: var(--shadow-lg); }
.btn--on-dark i { font-size: 22px; color: var(--ts-teal); }

/* --- Badge ---------------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 15px;
  padding: 10px 22px;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-sm);
  background: var(--gradient-brand);
  color: #fff;
}

.badge--dark { background: var(--surface-dark); color: #fff; }

.badge--outline {
  background: transparent;
  color: var(--text-heading);
  border: 1.5px solid var(--border-strong);
  box-shadow: none;
}

/* --- Card ----------------------------------------------------------------- */
.card {
  background: var(--surface-card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border-subtle);
  padding: var(--space-6);
}

.card--p34 { padding: 34px; }
.card--p36 { padding: 36px; }
.card--p40 { padding: 40px; }
.card--p44 { padding: 44px; }

/* Benefit cards use the larger corner radius rather than the Card default. */
.card--soft { border-radius: var(--radius-lg); }

.card__head {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}

.card__head--lg { gap: 18px; margin-bottom: 8px; }

.card h3 { margin: 0; }

/* Heading that sits directly beneath a full-size IconCircle. */
.card__title { margin: 22px 0 10px; }
.card__title--sm { margin: 18px 0 10px; }

/* --- IconCircle ----------------------------------------------------------- */
.icon-circle {
  --icon-size: 74px;
  width: var(--icon-size);
  height: var(--icon-size);
  border-radius: 50%;
  background: var(--gradient-brand);
  box-shadow: var(--shadow-icon);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.icon-circle i {
  color: #fff;
  font-size: calc(var(--icon-size) * 0.44);
  line-height: 1;
}

.icon-circle--sm { --icon-size: 48px; }
.icon-circle--lg { --icon-size: 96px; }
.icon-circle--dark { background: var(--surface-dark); }

/* --- ChecklistItem -------------------------------------------------------- */
.check-list { display: block; }

.check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-family: var(--font-body);
  font-size: var(--fs-base);
  color: var(--text-body);
  line-height: var(--lh-normal);
  margin-bottom: 10px;
}

.check > i {
  color: var(--ts-teal);
  font-size: 20px;
  line-height: 1;
  margin-top: 2px;
  flex-shrink: 0;
}

/* Flex items default to `min-width: auto`, which can keep this span from
   shrinking below its text's natural width and push it past narrow
   containers (e.g. `.sol-card` at 2-up mobile widths). `min-width: 0` lets
   it wrap and shrink like a normal block instead. */
.check > span { min-width: 0; }

.check--dark { color: #fff; }
.check--dark > i { color: var(--ts-aqua); }

/* --- SectionHeading ------------------------------------------------------- */
.section-heading {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  text-align: left;
  gap: 10px;
  margin-bottom: var(--space-6);
}

.section-heading--center {
  align-items: center;
  text-align: center;
}

/* Extra breathing room when the heading introduces a grid of cards. */
.section-heading--lead { margin-bottom: 44px; }

.section-heading h2 {
  font-size: var(--fs-3xl);
  line-height: var(--lh-tight);
  margin: 0;
}

.section-heading p {
  font-family: var(--font-body);
  font-size: var(--fs-lg);
  color: var(--text-body);
  margin: 0;
  max-width: 560px;
}

.section-heading::after {
  content: '';
  width: 64px;
  height: 4px;
  border-radius: 2px;
  background: var(--gradient-brand);
  margin-top: 4px;
}

/* --- Quote ---------------------------------------------------------------- */
.quote {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: var(--space-8);
  border-left: 5px solid var(--ts-mint);
  max-width: 640px;
  margin: 0;
}

.quote::before {
  content: '\201C';
  display: block;
  font-family: var(--font-display);
  font-size: 40px;
  color: var(--ts-aqua);
  line-height: 0.5;
  margin-bottom: 10px;
}

.quote p {
  font-family: var(--font-body);
  font-style: italic;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-lg);
  color: var(--text-heading);
  line-height: var(--lh-relaxed);
  margin: 0;
}

.quote footer {
  margin-top: 16px;
  font-family: var(--font-body);
  font-weight: var(--fw-bold);
  color: var(--ts-teal);
}

.quote footer span {
  display: block;
  font-weight: var(--fw-regular);
  color: var(--text-muted);
  font-size: 14px;
}

/* --- ISO pills ------------------------------------------------------------ */
.pill-row { display: flex; gap: 14px; flex-wrap: wrap; }

.pill {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 14px;
  color: var(--text-heading);
  background: var(--surface-tint-soft);
  border: 1.5px solid var(--ts-aqua);
  border-radius: var(--radius-pill);
  padding: 9px 20px;
}

/* ==========================================================================
   5. Header / navigation
   ========================================================================== */

/* El header vive pegado al hero de video, asi que toma el tinte menta de la
   marca en vez de blanco puro, y cambia la linea gris neutra --el unico gris
   frio de la composicion-- por el mismo degradado menta/teal del hero. */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: rgba(var(--ts-white-rgb), 0.96);
  backdrop-filter: saturate(1.4) blur(6px);
  box-shadow: var(--shadow-sm);
  border-bottom: 2px solid transparent;
  border-image: linear-gradient(90deg, var(--ts-mint) 0%, var(--ts-teal) 55%, var(--ts-navy) 100%) 1;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
  padding: 14px clamp(20px, 4vw, 40px);
}

.site-header__logo img {
  /* Lockup horizontal (654x144): a 48px de alto mide ~218px de ancho, que es
     lo que cabe junto al menu. El logo antiguo era casi cuadrado y por eso
     admitia 72px. */
  height: 48px;
  object-fit: contain;
  width: auto;
}

.site-nav {
  display: flex;
  align-items: center;
  gap: 26px;
}

.site-nav a {
  font-weight: var(--fw-bold);
  font-size: 15px;
  color: var(--text-heading);
  white-space: nowrap;
}

.site-nav a:hover { color: var(--ts-teal); }

.site-nav a[aria-current='page'] {
  color: var(--text-heading);
  position: relative;
}

.site-nav a[aria-current='page']::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -6px;
  height: 2px;
  border-radius: 2px;
  background: var(--gradient-brand);
}

/* --- Dropdown Navigation ------------------------------------------------ */
.nav-dropdown {
  position: relative;
  display: inline-flex;
  align-items: center;
}

.nav-dropdown__toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  font-weight: var(--fw-bold);
  font-size: 15px;
  color: var(--text-heading);
  white-space: nowrap;
}

.nav-dropdown__toggle:hover {
  color: var(--ts-teal);
}

.nav-dropdown__toggle i {
  font-size: 13px;
  transition: transform var(--duration-fast) var(--ease-standard);
}

.nav-dropdown:hover .nav-dropdown__toggle i,
.nav-dropdown:focus-within .nav-dropdown__toggle i,
.nav-dropdown.is-active .nav-dropdown__toggle i {
  transform: rotate(180deg);
}

.nav-dropdown__menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  background: #ffffff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: 8px 0;
  min-width: 290px;
  transition: opacity var(--duration-fast) var(--ease-standard),
              transform var(--duration-fast) var(--ease-standard),
              visibility var(--duration-fast) var(--ease-standard);
  z-index: 100;
}

.nav-dropdown:hover .nav-dropdown__menu,
.nav-dropdown:focus-within .nav-dropdown__menu,
.nav-dropdown.is-active .nav-dropdown__menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}

.nav-dropdown__menu a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 18px;
  font-size: 14px;
  font-weight: var(--fw-semibold);
  color: var(--text-heading);
  white-space: normal;
  line-height: 1.35;
  border-bottom: none !important;
  transition: background var(--duration-fast), color var(--duration-fast);
}

.nav-dropdown__menu a:hover,
.nav-dropdown__menu a:focus {
  background: var(--surface-tint-soft);
  color: var(--ts-teal);
}

.nav-dropdown__menu a i {
  color: var(--ts-mint);
  font-size: 16px;
  flex-shrink: 0;
}

.nav-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 46px;
  height: 46px;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-sm);
  background: #fff;
  color: var(--text-heading);
  font-size: 24px;
  cursor: pointer;
}

/* ==========================================================================
   6. Footer
   ========================================================================== */

.site-footer {
  /* Footer claro: el logotipo es marino sobre menta, asi que sobre un fondo
     marino su mitad marina desaparecia. Aqui se lee entero, en las mismas
     condiciones que en la cabecera. El velo aqua superior hace de aterrizaje
     desde la banda de cierre, que es oscura. */
  background:
    linear-gradient(180deg, rgba(var(--ts-aqua-rgb), 0.34) 0%, rgba(var(--ts-aqua-rgb), 0) 58%),
    var(--ts-white);
  color: var(--text-body);
  padding: 56px clamp(20px, 4vw, 40px) 40px;
}

.site-footer__grid {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1.3fr 0.8fr 1fr 1fr;
  gap: 36px;
}

/* El logo va suelto, sin placa ni fondo de ningun tipo. */
.site-footer img { height: 48px; width: auto; margin-bottom: 16px; }

.site-footer__name {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 18px;
  color: var(--text-heading);
}

.site-footer__blurb {
  font-size: 14px;
  /* El petroleo cae a 4.33:1 sobre el velo aqua; el marino atenuado da 5.44:1. */
  color: rgba(var(--ts-navy-rgb), 0.7);
  margin-top: 6px;
  max-width: 320px;
}

.site-footer__col {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.site-footer__col h2 {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-base);
  color: var(--text-heading);
  margin: 0 0 4px;
}

.site-footer__col a,
.site-footer__col span {
  font-size: 14px;
  color: var(--text-body);
}

.site-footer__col a:hover { color: var(--link-color); }

.site-footer__legal {
  max-width: 1180px;
  margin: 36px auto 0;
  padding-top: 20px;
  border-top: 1px solid var(--border-subtle);
  font-size: 13px;
  color: rgba(var(--ts-navy-rgb), 0.7);
}

/* ==========================================================================
   7. Page sections
   ========================================================================== */

/* --- Split hero (Inicio, Outsourcing) ------------------------------------- */
.hero-split {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  align-items: center;
  background: var(--gradient-tint);
}

.hero-split--even { grid-template-columns: 1fr 1fr; }

.hero-split--text-only { grid-template-columns: 1fr; }

.hero-split--text-only .hero-split__copy {
  max-width: 900px;
}

.hero-split__copy {
  padding: clamp(56px, 7vw, 96px) clamp(20px, 4vw, 40px) clamp(56px, 7vw, 96px) clamp(20px, 5vw, 64px);
  max-width: 660px;
}

.hero-split__copy .badge { margin-bottom: 22px; }
.hero-split__copy .eyebrow { display: block; margin-bottom: 14px; }
.hero-split__copy .lead { margin: 0 0 34px; }

/* `align-self: stretch` makes the media column fill the row that the copy
   column sizes, so the photo crops to the band instead of the band growing to
   the photo's intrinsic aspect ratio. The image is taken out of flow so its
   height resolves against this box rather than its own proportions. */
.hero-split__media {
  position: relative;
  align-self: stretch;
  min-height: 560px;
}

.hero-split__media img,
.hero-split__media video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  clip-path: polygon(14% 0, 100% 0, 100% 100%, 0 100%);
}

.text-lead--lg {
  font-size: clamp(18px, 2.2vw, 22px);
  line-height: 1.6;
  color: var(--text-heading);
  font-weight: var(--fw-semibold);
  max-width: 860px;
  margin: 0 auto;
  text-align: center;
}

/* The mint/teal triangle tucked into the bottom-left of the home hero image. */
.hero-split__wedge {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 180px;
  height: 180px;
  background: var(--gradient-brand);
  clip-path: polygon(0 100%, 0 22%, 100% 100%);
  opacity: 0.92;
}

/* --- Full-bleed video hero (portada) --------------------------------------
   Variante de `hero-split`: en lugar de ocupar solo la columna derecha, el
   video cubre el ancho completo de la seccion y el texto se monta encima.
   `hero-split` sigue en uso en Outsourcing y Gerencia externa. ------------- */
.hero-full {
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  overflow: hidden;
  min-height: clamp(520px, calc(100vh - 72px), 780px);
  padding: clamp(48px, 7vw, 96px) clamp(20px, 5vw, 64px);
  background: var(--surface-dark-deep);
}

.hero-full video {
  position: absolute;
  inset: 0;
  z-index: -2;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Oscurece el metraje para que la copia mantenga contraste sea cual sea el
   fotograma: mas denso a la izquierda, donde se apoya el texto, y ligero a la
   derecha para que la escena se lea. */
.hero-full__scrim {
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(100deg,
    rgba(var(--ts-navy-rgb), 0.9) 0%,
    rgba(var(--ts-navy-rgb), 0.87) 50%,
    rgba(var(--ts-navy-rgb), 0.5) 64%,
    rgba(var(--ts-navy-rgb), 0.28) 82%,
    rgba(var(--ts-navy-rgb), 0.22) 100%);
}

.hero-full__inner {
  position: relative;
  width: 100%;
  max-width: 720px;
}

.hero-full__inner .badge { margin-bottom: 22px; }

/* La cuna de marca, anclada a la esquina como en el hero dividido. */
.hero-full__wedge {
  position: absolute;
  left: 0;
  bottom: 0;
  width: 180px;
  height: 180px;
  background: var(--gradient-brand);
  clip-path: polygon(0 100%, 0 22%, 100% 100%);
  opacity: 0.92;
}

/* --- Centred hero (Demanda, Premium) -------------------------------------- */
.hero-center {
  background: var(--gradient-tint);
  padding: clamp(60px, 8vw, 96px) clamp(20px, 4vw, 40px) clamp(48px, 6vw, 76px);
}

.hero-center__inner {
  max-width: 900px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.hero-center__note {
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  margin: 0;
  background: #fff;
  border: 1px solid var(--ts-aqua);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 26px 32px;
}

/* --- Tier cards (home, "Modelo de 3 niveles") ----------------------------- */
.tier {
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 38px 32px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tier__label {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: 14px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--ts-teal);
}

.tier h3 { margin: 0; font-size: var(--fs-xl); }

.tier h3 span {
  display: block;
  font-size: 16px;
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
}

.tier p { flex-grow: 1; margin: 0; }

.tier--mint { background: var(--surface-tint-soft); border-color: var(--ts-aqua); }

.tier--dark {
  background: var(--surface-dark);
  border-color: transparent;
  box-shadow: var(--shadow-md);
}

.tier--dark .tier__label { color: var(--ts-aqua); }
.tier--dark h3 { color: #fff; }
.tier--dark h3 span { color: rgba(255, 255, 255, 0.6); }
.tier--dark p { color: rgba(255, 255, 255, 0.85); }

/* --- Dark CTA band (home) -------------------------------------------------- */
.cta-band__inner {
  max-width: 980px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.cta-band__icons {
  display: flex;
  gap: 28px;
  color: var(--ts-aqua);
  font-size: 34px;
}

.cta-band__inner h2 {
  font-size: var(--fs-3xl);
  line-height: 1.16;
  color: #fff;
  margin: 0;
}

.cta-band__inner p {
  font-size: var(--fs-lg);
  line-height: var(--lh-relaxed);
  color: rgba(255, 255, 255, 0.82);
  margin: 0;
  max-width: 720px;
}

/* --- Nosotros: portrait + floating credential card ------------------------ */
.about-hero {
  max-width: 1180px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 64px;
  align-items: center;
}

.about-hero__figure { position: relative; margin: 0; }

.about-hero__figure img {
  width: 100%;
  height: 520px;
  object-fit: cover;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-lg);
}

.about-hero__badge {
  position: absolute;
  right: -18px;
  bottom: -18px;
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 18px 22px;
}

.about-hero__badge strong {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  color: var(--text-heading);
  font-size: 18px;
}

.about-hero__badge span { font-size: 14px; color: var(--text-muted); }

/* --- Misión / Visión ------------------------------------------------------- */
.mission-grid {
  max-width: 1000px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 56px;
}

.mission-grid > div {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.mission-grid h2 { font-size: var(--fs-2xl); margin: 0; }

/* --- Pilar cards (Outsourcing) -------------------------------------------- */
.pillar__kicker {
  font-size: 13px;
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  color: var(--ts-teal);
}

.pillar h3 { margin: 2px 0 0; }

/* --- Gerencia Externa (Demanda) ------------------------------------------- */
.managed-grid {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 56px;
  align-items: start;
}

.managed-grid h2 {
  font-size: var(--fs-3xl);
  line-height: 1.12;
  margin: 24px 0 12px;
}

.managed-list {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.managed-list > div {
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-sm);
  padding: 26px 30px;
}

.managed-list h3 {
  font-size: var(--fs-lg);
  margin: 0 0 12px;
}

/* --- Premium feature cards ------------------------------------------------ */
.feature {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 32px;
  align-items: start;
}

.feature h2 {
  font-size: var(--fs-2xl);
  margin: 0 0 14px;
}

.feature .eyebrow { display: block; margin-bottom: 6px; }

/* Floating WhatsApp affordance, present on every page. */
.wa-float {
  position: fixed;
  right: clamp(16px, 3vw, 28px);
  bottom: clamp(16px, 3vw, 28px);
  z-index: 60;
  width: 58px;
  height: 58px;
  border-radius: 50%;
  background: var(--gradient-brand);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #fff;
  font-size: 30px;
  transition: transform var(--duration-fast) var(--ease-standard);
}

.wa-float:hover { transform: translateY(-3px) scale(1.04); color: #fff; }

/* --- Hero escudo (portada) ------------------------------------------------
   Hero dividido de la portada: panel oscuro a la izquierda que sostiene toda
   la copia y el metraje a la derecha, con el escudo de marca montado encima.
   Convive con `hero-split` (Outsourcing, Gerencia) y `hero-full`, que siguen
   en uso en sus paginas. --------------------------------------------------- */
.hero-shield {
  display: grid;
  grid-template-columns: 1.02fr 0.98fr;
  align-items: stretch;
  background: var(--surface-dark-deep);
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

.hero-shield__copy {
  padding: clamp(48px, 6vw, 84px) clamp(28px, 3.5vw, 56px)
           clamp(48px, 6vw, 84px) clamp(20px, 5vw, 64px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 700px;
  position: relative;
  z-index: 2;
}

.hero-shield__eyebrow {
  font-family: var(--font-body);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  font-size: var(--fs-xs);
  color: var(--ts-aqua);
  margin: 0 0 18px;
}

.hero-shield__copy h1 {
  font-size: clamp(32px, 3.6vw, 50px);
  line-height: 1.08;
  color: #fff;
  margin: 0 0 20px;
}

.hero-shield__copy .lead {
  color: rgba(255, 255, 255, 0.82);
  margin: 0 0 28px;
  max-width: 30em;
}

/* Los tres sellos de marca (Orden / Cumplimiento / Tranquilidad). */
.hero-shield__proof {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 26px;
  margin-bottom: 32px;
}

.proof-chip {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-family: var(--font-body);
  font-weight: var(--fw-extrabold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: var(--fs-xs);
  color: rgba(255, 255, 255, 0.9);
}

.proof-chip i {
  color: var(--ts-aqua);
  font-size: 19px;
  line-height: 1;
}

/* Variante para heroes sobre fondo claro (`.hero-split`, pagina Nosotros). */
.proof-chip--on-light { color: var(--text-heading); }
.proof-chip--on-light i { color: var(--ts-teal); }

.hero-shield__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
}

/* Perfilado en claro para que el CTA secundario se lea sobre el panel. */
.btn--outline-light {
  background: transparent;
  color: #fff;
  border: 2px solid rgba(255, 255, 255, 0.45);
}
.btn--outline-light:hover {
  color: #fff;
  border-color: var(--ts-aqua);
}

/* El metraje ocupa la columna derecha; `align-self: stretch` lo obliga a
   recortarse contra la altura que fija la copia en vez de crecer con su
   propia proporcion. */
.hero-shield__media {
  position: relative;
  align-self: stretch;
  min-height: 520px;
}

.hero-shield__media video,
.hero-shield__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* --- Carrusel de la portada --------------------------------------------
   Sustituye al video: las fotos reales del equipo se cruzan con un fundido.
   Solo la diapositiva `.is-active` es visible; site.js va rotando la clase.
   Sin JS queda fija la primera (ya marcada en el HTML). --------------- */
.hero-carousel {
  position: absolute;
  inset: 0;
  overflow: hidden;
}

.hero-carousel__slide {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: translateX(100%);
  opacity: 0;
  z-index: 1;
  pointer-events: none;
  will-change: transform, opacity;
}

.hero-carousel__slide.is-active {
  transform: translateX(0) scale(1);
  opacity: 1;
  z-index: 2;
  box-shadow: -15px 0 35px rgba(0, 0, 0, 0.4);
  transition: transform 0.95s cubic-bezier(0.25, 1, 0.5, 1),
              opacity 0.6s ease;
}

.hero-carousel__slide.is-leaving {
  transform: translateX(-22%) scale(0.92);
  opacity: 0;
  z-index: 1;
  box-shadow: none;
  transition: transform 0.95s cubic-bezier(0.25, 1, 0.5, 1),
              opacity 0.9s ease;
}

/* Inactivos fuera de la vista sin transicion para no animar retroceso */
.hero-carousel__slide:not(.is-active):not(.is-leaving) {
  transform: translateX(100%);
  opacity: 0;
  transition: none !important;
}

@media (prefers-reduced-motion: reduce) {
  .hero-carousel__slide,
  .hero-carousel__slide.is-active,
  .hero-carousel__slide.is-leaving,
  .hero-carousel__slide:not(.is-active):not(.is-leaving) {
    transition: none !important;
    transform: none !important;
    box-shadow: none !important;
  }
}

/* Difumina la union entre el panel plano y el metraje. */
.hero-shield__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg,
    var(--surface-dark-deep) 0%,
    rgba(var(--ts-navy-rgb), 0.55) 12%,
    rgba(var(--ts-navy-rgb), 0.12) 34%,
    rgba(var(--ts-navy-rgb), 0.1) 100%);
  pointer-events: none;
  z-index: 3;
}

/* --- Escudo de marca ------------------------------------------------------ */
.shield-badge {
  position: absolute;
  /* Ubicado sobre la pared vacia del video (izquierda del televisor), no
     sobre las personas: left/top en vez de right/top:50%. */
  left: 26%;
  top: 19%;
  transform: translate(-50%, -50%);
  width: clamp(120px, 12vw, 170px);
  aspect-ratio: 200 / 238;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  filter: drop-shadow(0 18px 34px rgba(var(--ts-navy-rgb), 0.46));
}

.shield-badge svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0.6;
}

.shield-badge p {
  position: relative;
  margin: 0;
  padding: 0 16%;
  text-align: center;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: clamp(12px, 1.1vw, 15px);
  line-height: 1.35;
  color: #fff;
  text-shadow: 0 1px 3px rgba(var(--ts-navy-rgb), 0.72), 0 2px 14px rgba(var(--ts-navy-rgb), 0.5);
}

/* --- Tarjetas de diagnostico ("Quien se ocupa hoy...") -------------------- */
.quote-card {
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 36px 30px;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  transition:
    transform var(--duration-base) var(--ease-standard),
    box-shadow var(--duration-base) var(--ease-standard);
}

.quote-card:hover {
  transform: translateY(-4px);
  box-shadow: var(--shadow-md);
}

.quote-card__icon {
  width: 62px;
  height: 62px;
  border-radius: 50%;
  background: var(--surface-tint);
  display: flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 20px;
}

.quote-card__icon i {
  font-size: 28px;
  color: var(--ts-teal);
  line-height: 1;
}

.quote-card h3 {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--text-heading);
  margin: 0 0 12px;
}

.quote-card__claim {
  font-weight: var(--fw-bold);
  color: var(--ts-teal);
  margin: 0 0 10px;
  font-size: var(--fs-base);
}

.quote-card p:last-child {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}

/* Nota centrada que cierra un bloque de tarjetas. */
.note-pill {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 14px;
  max-width: 780px;
  margin: 44px auto 0;
  text-align: left;
}

.note-pill i {
  font-size: 26px;
  color: var(--ts-teal);
  line-height: 1;
  flex-shrink: 0;
  margin-top: 2px;
}

.note-pill p {
  margin: 0;
  font-size: var(--fs-base);
  line-height: var(--lh-relaxed);
  color: var(--text-body);
}

.note-pill strong { color: var(--text-heading); }

/* --- Tarjetas de solucion numeradas -------------------------------------- */
.solution-card {
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.solution-card__body {
  padding: 32px 28px 26px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.solution-card__head {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  margin-bottom: 16px;
}

.solution-card__num {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: 15px;
  color: #fff;
  background: var(--gradient-brand);
  border-radius: var(--radius-sm);
  padding: 6px 11px;
  line-height: 1;
  flex-shrink: 0;
}

.solution-card__head h3 {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--text-heading);
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.01em;
}

.solution-card__body > p {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  margin: 0 0 24px;
}

/* Tira de iconos que resume el alcance de cada solucion. */
.mini-icons {
  display: grid;
  /* `minmax(0, 1fr)` en vez de `1fr`: con `auto` como minimo, una etiqueta
     larga fija el ancho de su columna y desalinea toda la tira. */
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 10px 6px;
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--border-subtle);
}

/* En las tarjetas de solucion (portada) 6 columnas dejan ~47px por etiqueta,
   insuficiente para palabras como "Vacaciones" o "Indicadores": se cortan a
   la mitad. 3 columnas x 2 filas les da el doble de ancho. */
.solution-card .mini-icons { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.mini-icon {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}

.mini-icon i {
  font-size: 21px;
  color: var(--ts-teal);
  line-height: 1;
}

.mini-icon span {
  font-size: 9px;
  overflow-wrap: anywhere;
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--text-muted);
  line-height: 1.25;
}

/* `.solution-card__verb` + `.solution-card__link` viven juntos dentro de
   `.solution-card__cta`: antes eran hermanos sueltos y solo el link de abajo
   era clickeable, aunque la franja de color de arriba parece un boton. Un
   solo `<a>` envolvente hace clickeable todo el bloque. La variante suelta
   de `.solution-card__link` (`.growth__next`) sigue siendo su propio `<a>`. */
.solution-card__cta {
  display: flex;
  flex-direction: column;
  color: inherit;
  text-decoration: none;
}

.solution-card__verb {
  background: var(--gradient-brand);
  color: #fff;
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  font-size: var(--fs-xs);
  text-align: center;
  padding: 13px 16px;
  transition: filter var(--duration-fast) var(--ease-standard);
}

.solution-card__link {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 16px;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  color: var(--text-heading);
  border-top: 1px solid var(--border-subtle);
  transition: background var(--duration-fast) var(--ease-standard);
}

.solution-card__link:hover,
.solution-card__cta:hover .solution-card__link {
  background: var(--surface-tint-soft);
  color: var(--ts-teal);
}

.solution-card__cta:hover .solution-card__verb {
  filter: brightness(1.08);
}

/* --- Columnas de ayuda ("En que podemos ayudarte") ------------------------ */
.grid--5 { grid-template-columns: repeat(5, 1fr); }

.help-item {
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.help-item > i {
  font-size: 42px;
  color: var(--ts-teal);
  line-height: 1;
  margin-bottom: 16px;
}

.help-item h3 {
  font-family: var(--font-display);
  font-size: var(--fs-sm);
  line-height: var(--lh-snug);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-heading);
  margin: 0 0 10px;
}

.help-item p {
  margin: 0;
  font-size: var(--fs-xs);
  line-height: var(--lh-relaxed);
}

/* --- Metodo E.S.C.U.D.O. + fundadora ------------------------------------- */
.method-grid {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: 28px;
  align-items: stretch;
}

.method {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  background: var(--gradient-dark);
  border-radius: var(--radius-lg);
  padding: 40px 36px;
  color: rgba(255, 255, 255, 0.85);
  display: flex;
  flex-direction: column;
}

/* Escudo de marca en marca de agua sobre el panel. */
.method__watermark {
  position: absolute;
  right: -28px;
  bottom: -14px;
  width: 400px;
  height: auto;   /* sin esto gana el atributo height del HTML y deforma */
  opacity: 0.07;
  z-index: -1;
  pointer-events: none;
}

.method__eyebrow {
  font-family: var(--font-body);
  font-weight: var(--fw-extrabold);
  letter-spacing: var(--ls-caps);
  text-transform: uppercase;
  font-size: var(--fs-xs);
  color: var(--ts-aqua);
  margin: 0 0 12px;
}

.method h2 {
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  color: #fff;
  margin: 0 0 14px;
}

.method__intro {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  margin: 0 0 30px;
  max-width: 44em;
}

.method__steps {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 12px 8px;
  margin-bottom: 30px;
}

.method-step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  text-align: center;
}

.method-step__letter {
  width: 46px;
  height: 46px;
  border-radius: 50%;
  border: 2px solid var(--ts-mint);
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-lg);
  color: var(--ts-aqua);
  line-height: 1;
}

.method-step span:last-child {
  font-size: 10px;
  font-weight: var(--fw-bold);
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.72);
  line-height: 1.3;
}

.method__closing {
  margin: auto 0 0;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-lg);
  color: #fff;
}

.method__closing em {
  font-style: normal;
  color: var(--ts-aqua);
}

.founder {
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
  display: grid;
  grid-template-rows: 280px auto;
}

.founder.founder--text-only {
  grid-template-columns: 1fr;
  grid-template-rows: auto;
}

.founder__figure {
  position: relative;
  background: linear-gradient(170deg, var(--ts-aqua) 0%, rgba(var(--ts-aqua-rgb), 0.35) 100%);
}

/* El retrato es un recorte sin fondo: se contiene entero y se apoya abajo,
   sobre el panel aqua. Con `cover` se le cortaria la silueta. */
.founder__figure img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  object-position: bottom center;
}

.founder__body { padding: 28px 26px 30px; }

.founder__body h3 {
  font-family: var(--font-display);
  font-size: var(--fs-xl);
  color: var(--text-heading);
  margin: 0 0 4px;
}

.founder__role {
  font-size: var(--fs-sm);
  color: var(--ts-teal);
  font-weight: var(--fw-bold);
  margin: 0 0 14px;
}

.founder__body p:not(.founder__role) {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  margin: 0 0 20px;
}

/* --- Servicios complementarios ------------------------------------------- */
.complement {
  display: grid;
  grid-template-columns: 0.9fr 1.1fr;
  gap: 40px;
  align-items: center;
}

.complement h2 {
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  margin: 0 0 14px;
}

.complement p {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  margin: 0 0 22px;
}

.complement__icons {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 14px 10px;
}

.complement__icons .mini-icon i { font-size: 26px; }
.complement__icons .mini-icon span { font-size: 10px; }

/* --- Banda de cierre ------------------------------------------------------ */
.closing {
  background: linear-gradient(115deg,
    var(--ts-navy) 0%,
    var(--ts-teal) 100%);
}

.closing__inner {
  max-width: 1180px;
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 36px;
  align-items: center;
}



.closing__copy h2 {
  font-family: var(--font-display);
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  text-transform: uppercase;
  color: #fff;
  margin: 0 0 10px;
}

.closing__copy p {
  margin: 0;
  color: var(--ts-white);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  max-width: 46em;
}

.closing__card {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 26px 24px;
  max-width: 330px;
}

.closing__card h3 {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  color: var(--text-heading);
  margin: 0 0 8px;
}

.closing__card p {
  font-size: var(--fs-xs);
  line-height: var(--lh-relaxed);
  margin: 0 0 18px;
}

/* Cuando el cierre ofrece dos acciones (p.ej. Nosotros: WhatsApp + enlace a
   soluciones), se apilan con espacio propio en vez de fluir en linea. */
.closing__card__actions {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}


/* --- Pagina Nosotros: panel de origen -------------------------------------
   "¿Por que nace Trust Solution?": tarjeta oscura + fotografia, y debajo el
   bloque de cercania (equipo / gerencia). Convive con `.hero-shield` y
   `.method` (portada), que siguen en uso alli. ------------------------------ */
.origin-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  align-items: stretch;
}

.origin-grid--single { grid-template-columns: 1fr; }

.origin-panel {
  background: var(--gradient-dark);
  border-radius: var(--radius-lg);
  padding: clamp(32px, 4vw, 44px) clamp(28px, 4vw, 40px);
  color: rgba(255, 255, 255, 0.85);
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.origin-panel .eyebrow { color: var(--ts-aqua); }

.origin-panel h2 {
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  color: #fff;
  margin: 10px 0 16px;
}

.origin-panel p {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  margin: 0 0 14px;
}

.origin-panel p:last-child { margin-bottom: 0; }

.origin-figure {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  min-height: 320px;
}

.origin-figure img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* --- Bloque de cercania (equipo / gerencia) -------------------------------- */
.proximity { margin-top: 52px; }

.proximity__heading {
  text-align: center;
  max-width: 780px;
  margin: 0 auto 36px;
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  color: var(--text-heading);
}

.proximity-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-bottom: 32px;
}

.proximity-card {
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 30px 28px;
}

.proximity-card__head {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}

.proximity-card h3 {
  font-family: var(--font-display);
  font-size: var(--fs-lg);
  line-height: var(--lh-snug);
  color: var(--text-heading);
  margin: 0;
}

.proximity-card p {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
}

.proximity__notes {
  max-width: 780px;
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.proximity__notes p {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-body);
}

/* --- Founder, variante ancha (pagina Nosotros) -----------------------------
   `.founder` (portada) apila foto/texto en una tarjeta lateral angosta;
   aqui la foto y el texto van lado a lado en una tarjeta a todo el ancho. --- */
.founder--wide {
  grid-template-columns: 300px 1fr;
  grid-template-rows: auto;
}

.founder--wide .founder__figure { min-height: 320px; }

.founder--wide .founder__body {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(28px, 3vw, 40px) clamp(28px, 3.5vw, 44px);
}

/* --- Metodo E.S.C.U.D.O., variante clara a todo el ancho -------------------
   `.method` (portada) es el panel oscuro compacto; esta version se usa en
   Nosotros sobre fondo claro, con descripcion bajo cada letra. ------------- */
.method-full { text-align: center; }

.method-full__intro {
  max-width: 720px;
  margin: 0 auto 40px;
}

.method-full__steps {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 28px 16px;
  margin-bottom: 40px;
}

.method-step--light .method-step__letter {
  background: #fff;
  border-color: var(--ts-teal);
  color: var(--ts-teal);
  box-shadow: var(--shadow-sm);
}

.method-step--light span:last-child { color: var(--text-heading); }

.method-step__desc {
  margin: 4px 0 0;
  font-size: 11px;
  line-height: 1.45;
  color: var(--text-muted);
  font-weight: var(--fw-regular);
  text-transform: none;
  letter-spacing: normal;
}

.method-full__closing {
  max-width: 640px;
  margin: 0 auto;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-lg);
  color: var(--text-heading);
}


/* --- Pagina Soluciones: recorrido de 3 tarjetas -----------------------------
   "¿Cual es la realidad de tu empresa?": tres tarjetas con insignia numerada
   flotando sobre el borde superior, unidas por un conector punteado. -------- */
.solution-track {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 44px 1fr 44px 1fr;
  /* stretch: las 3 tarjetas igualan su altura a la fila (la mas alta); el
     conector se excluye explicitamente via su propio align-self. */
  align-items: stretch;
  gap: 0 4px;
}

.sol-card {
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  position: relative;
  /* Iguala el radio de la insignia para que su centro caiga justo sobre el
     borde superior de la tarjeta (ver `.sol-card__badge`). Sin `overflow:
     hidden` (recortaba la mitad superior de la insignia, que a proposito
     sobresale del borde). */
  margin-top: 28px;
}

.sol-card__badge {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--surface-dark);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-lg);
  box-shadow: var(--shadow-md);
  z-index: 2;
}

.sol-card__head {
  padding: 40px 30px 0;
  text-align: center;
}

.sol-card__icon {
  font-size: 30px;
  color: var(--ts-teal);
  line-height: 1;
  margin-bottom: 14px;
  display: block;
}

.sol-card__title {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: var(--fs-base);
  line-height: var(--lh-snug);
  color: var(--text-heading);
  margin: 0 0 14px;
}

.sol-card__quote {
  font-style: italic;
  font-weight: var(--fw-semibold);
  color: var(--ts-teal);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  margin: 0 0 18px;
}

.sol-card__body {
  padding: 0 30px 28px;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.sol-card__body > p {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  margin: 0 0 20px;
}

.sol-card__subhead {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  color: var(--ts-teal);
  font-size: var(--fs-sm);
  margin: 0 0 12px;
}

.sol-card__body .check-list { margin-bottom: 6px; }

/* El conector punteado entre tarjetas: su centro se alinea al mismo eje que
   el centro de las insignias (`translateY(-50%)` sobre una caja de altura
   propia, en vez de sobre el borde de la tarjeta). ------------------------- */
/* Mismo margin-top que `.sol-card` (radio de la insignia): sin el, ambos
   parten de un origen distinto y el conector queda 28px por encima. */
.solution-connector { align-self: start; margin-top: 28px; }

.solution-connector__line {
  display: flex;
  align-items: center;
  gap: 4px;
  transform: translateY(-50%);
}

.solution-connector__line::before,
.solution-connector__line::after {
  content: '';
  flex: 1;
  height: 0;
  border-top: 2px dotted var(--ts-aqua);
}

.solution-connector__line i {
  color: var(--ts-teal);
  font-size: 15px;
  flex-shrink: 0;
}

/* --- Banda final ligera ("¿No sabes cual necesita tu empresa?") ------------ */
.decide-band {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 40px;
  align-items: center;
}

.decide-band__copy h2 {
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  margin: 0 0 10px;
}

.decide-band__copy p {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  max-width: 46em;
}

.decide-band__card {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 26px 28px;
  width: 100%;
  max-width: 320px;
}

.decide-band__card h3 {
  font-family: var(--font-display);
  font-size: var(--fs-base);
  line-height: var(--lh-snug);
  color: var(--text-heading);
  margin: 12px 0 20px;
}

.decide-band__card .btn {
  width: 100%;
}

/* --- Responsive de los componentes de portada ----------------------------- */
@media (max-width: 1080px) {
  .grid--5 { grid-template-columns: repeat(3, 1fr); }
  .method-grid { grid-template-columns: 1fr; }
  .complement { grid-template-columns: 1fr; gap: 28px; }
  .complement__icons { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .closing__inner { grid-template-columns: 1fr; }
  .closing__card { grid-column: 1 / -1; max-width: none; }
}

@media (max-width: 960px) {
  .hero-shield { grid-template-columns: 1fr; }
  .hero-shield__copy { max-width: none; order: 1; }
  .hero-shield__media { order: 2; min-height: 360px; }
  .hero-shield__media::after {
    background: linear-gradient(180deg,
      var(--surface-dark-deep) 0%,
      rgba(var(--ts-navy-rgb), 0.35) 22%,
      rgba(var(--ts-navy-rgb), 0.12) 100%);
  }
  .shield-badge { left: 50%; top: 50%; transform: translate(-50%, -50%); }
}

@media (max-width: 720px) {
  .grid--5 { grid-template-columns: repeat(2, 1fr); }
  .mini-icons { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .complement__icons { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .method { padding: 30px 24px; }
  .method__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .closing__inner { grid-template-columns: 1fr; gap: 24px; }
  .note-pill { flex-direction: column; align-items: center; text-align: center; }
}

/* ==========================================================================
   8. Responsive
   The design canvas was authored desktop-only; these breakpoints collapse the
   fixed grids and swap the header for a disclosure menu.
   ========================================================================== */

@media (max-width: 1080px) {
  .grid--3 { grid-template-columns: repeat(2, 1fr); }
  .about-hero,
  .managed-grid { grid-template-columns: 1fr; gap: 40px; }
  .about-hero__figure img { height: 420px; }
  .mission-grid { gap: 36px; }
}

@media (max-width: 960px) {
  .nav-toggle { display: inline-flex; }

  .site-nav {
    display: none;
    position: absolute;
    inset: 100% 0 auto 0;
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    background: #fff;
    border-bottom: 1px solid var(--border-subtle);
    box-shadow: var(--shadow-md);
    padding: 8px clamp(20px, 4vw, 40px) 20px;
  }

  .site-nav.is-open { display: flex; }

  .site-nav a,
  .nav-dropdown__toggle {
    padding: 14px 0;
    border-bottom: 1px solid var(--border-subtle);
    font-size: 16px;
  }

  .nav-dropdown {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }

  .nav-dropdown__toggle {
    width: 100%;
    justify-content: space-between;
  }

  .nav-dropdown__menu {
    position: static;
    transform: none !important;
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    box-shadow: none;
    border: none;
    background: var(--surface-tint);
    border-radius: var(--radius-sm);
    padding: 4px 12px;
    margin: 6px 0 10px 0;
    display: flex;
    flex-direction: column;
    min-width: 0;
  }

  .nav-dropdown__menu a {
    padding: 10px 8px;
    font-size: 14px;
    border-bottom: 1px solid rgba(var(--ts-navy-rgb), 0.08) !important;
  }

  .nav-dropdown__menu a:last-child {
    border-bottom: none !important;
  }

  .site-nav a[aria-current='page']::after { display: none; }
  .site-nav .btn { margin-top: 16px; align-self: flex-start; }

  .hero-split,
  .hero-split--even { grid-template-columns: 1fr; }

  .hero-split__copy {
    max-width: none;
    padding: clamp(48px, 8vw, 72px) clamp(20px, 4vw, 40px);
    order: 1;
  }

  .hero-full { min-height: 560px; }
  .hero-full__scrim {
    background: linear-gradient(180deg,
      rgba(var(--ts-navy-rgb), 0.86) 0%,
      rgba(var(--ts-navy-rgb), 0.8) 55%,
      rgba(var(--ts-navy-rgb), 0.7) 100%);
  }
  .hero-full__wedge { display: none; }

  .hero-split__media { order: 2; min-height: 340px; }
  .hero-split__media img,
  .hero-split__media video { clip-path: none; }
  .hero-split__wedge { display: none; }

  .feature { grid-template-columns: 1fr; gap: 20px; }
}

@media (max-width: 720px) {
  .grid--2,
  .grid--3,
  .mission-grid,
  .site-footer__grid { grid-template-columns: 1fr; }

  .site-footer__grid { gap: 32px; }
  .about-hero__badge { position: static; margin-top: 16px; }
  .about-hero__figure img { height: 320px; }
  .card--p40, .card--p44 { padding: 28px; }
  .card--p34, .card--p36 { padding: 26px; }
  .hero-center__note { padding: 20px 22px; }
  .btn--lg { padding: 15px 26px; font-size: 16px; }
  .cta-band__icons { font-size: 28px; gap: 20px; }
}
/* --- Responsive de los componentes de Nosotros ----------------------------- */
@media (max-width: 1080px) {
  .method-full__steps { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  .origin-grid { grid-template-columns: 1fr; }
  .origin-figure { min-height: 280px; order: -1; }
  .proximity-grid { grid-template-columns: 1fr; }
  .founder--wide { grid-template-columns: 1fr; }
  .founder--wide .founder__figure { min-height: 260px; }
}

@media (max-width: 720px) {
  .method-full__steps { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px 14px; }
  .proximity__heading { font-size: var(--fs-xl); }
}


/* --- Pagina Acompañamiento MYPES: etiqueta sobre foto del hero ------------- */
.photo-tag {
  position: absolute;
  top: 20px;
  right: 20px;
  background: rgba(255, 255, 255, 0.96);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-md);
  padding: 10px 16px 10px 10px;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: 172px;
  z-index: 2;
}

.photo-tag__icon { width: 32px; height: auto; flex-shrink: 0; }

.photo-tag span {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 11px;
  line-height: 1.3;
  color: var(--text-heading);
}

/* --- "Es algo muy comun en las MYPES": ilustracion + copia ----------------- */
.common-issue {
  display: grid;
  grid-template-columns: 0.85fr 1.15fr;
  gap: 44px;
  align-items: center;
}

.common-issue__art {
  position: relative;
  background: var(--surface-tint);
  border-radius: var(--radius-lg);
  min-height: 280px;
  display: flex;
  align-items: center;
  justify-content: center;
}

.common-issue__art > i {
  font-size: 104px;
  color: var(--ts-teal);
  line-height: 1;
}

.common-issue__accent {
  position: absolute;
  top: -16px;
  right: -16px;
  width: 52px;
  height: 52px;
  border-radius: 50%;
  background: var(--gradient-brand);
  box-shadow: var(--shadow-md);
  display: flex;
  align-items: center;
  justify-content: center;
}

.common-issue__accent i { font-size: 24px; color: #fff; }

.common-issue__tag {
  position: absolute;
  bottom: 22px;
  left: 50%;
  transform: translateX(-50%);
  background: #fff;
  border-radius: var(--radius-pill);
  box-shadow: var(--shadow-md);
  padding: 11px 22px;
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  letter-spacing: 0.01em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--text-heading);
  white-space: nowrap;
}

.common-issue__copy .eyebrow { display: block; margin-bottom: 12px; }

.common-issue__copy h2 {
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  margin: 0 0 16px;
}

.common-issue__copy p {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  margin: 0 0 14px;
}

.common-issue__copy p:last-child { margin-bottom: 0; }

/* --- Recorrido de 2 pasos ("¿Como podemos acompañarte?") -------------------
   Reutiliza `.solution-connector` (Soluciones) y `.mini-icons`/`.mini-icon`
   (portada) para no duplicar esos patrones. ---------------------------------- */
.step-track {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 44px 1fr;
  align-items: stretch;
  gap: 0 4px;
  max-width: 920px;
  margin: 0 auto;
}

.step-card {
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 40px 32px 30px;
  margin-top: 28px;
  position: relative;
  display: flex;
  flex-direction: column;
}

.step-card__badge {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -50%);
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--surface-dark);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-lg);
  box-shadow: var(--shadow-md);
}

.step-card__title {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: var(--fs-lg);
  color: var(--text-heading);
  text-align: center;
  margin: 10px 0 16px;
}

.step-card__body {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  margin: 0 0 24px;
  text-align: center;
}

.step-card .mini-icons { margin-top: auto; }

/* --- Grid de 4 columnas ("En que podemos ayudarte", "Beneficios") ---------- */
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* --- Banda "puede crecer contigo" ------------------------------------------- */
.growth {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 44px;
  align-items: center;
}

.growth__copy .eyebrow { display: block; margin-bottom: 12px; }

.growth__copy h2 {
  font-size: var(--fs-2xl);
  line-height: var(--lh-snug);
  margin: 0 0 14px;
}

.growth__copy p {
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  margin: 0;
}

.growth__next {
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 30px 28px;
  text-align: center;
}

.growth__next h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: var(--fs-base);
  color: var(--text-heading);
  margin: 0 0 20px;
}

.growth__flow {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 18px;
  margin-bottom: 22px;
}

.growth__flow i.ph-arrow-right {
  color: var(--ts-mint);
  font-size: 20px;
}

/* `.solution-card__link` (Soluciones) asume que esta pegado al borde inferior
   de una tarjeta con overflow:hidden; aqui es un enlace suelto dentro de una
   tarjeta ya espaciada, sin esa banda contenedora. */
.growth__next .solution-card__link { border-top: none; padding: 0; }

/* --- Responsive de los componentes de Soluciones --------------------------- */
@media (max-width: 960px) {
  .solution-track { grid-template-columns: 1fr; gap: 44px 0; }
  .solution-connector { display: none; }
  .decide-band { grid-template-columns: 1fr; gap: 32px; }
  .decide-band__card { max-width: none; }
}

@media (max-width: 720px) {
  .decide-band { text-align: center; justify-items: center; gap: 24px; }
  .decide-band__copy p { max-width: none; }
}

/* --- Pagina Area Externa RR.HH.: utilidades de texto ------------------------ */
.text-accent { color: var(--ts-teal); }

/* --- Fila de sellos del hero (icono + etiqueta de 2 lineas) ----------------- */
.hero-proof {
  display: flex;
  flex-wrap: wrap;
  gap: 28px;
  margin: 24px 0 30px;
}

.hero-proof-item {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  max-width: 150px;
}

.hero-proof-item i { font-size: 24px; color: var(--ts-teal); line-height: 1; }

.hero-proof-item span {
  font-size: 12px;
  font-weight: var(--fw-bold);
  line-height: 1.35;
  color: var(--text-heading);
}

/* --- Etiqueta grande sobre la foto del hero (icono + texto + tagline) ------ */
.photo-tag--lg {
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
  max-width: 224px;
  padding: 14px 18px;
}

.photo-tag__row { display: flex; align-items: center; gap: 10px; }

.photo-tag__tagline {
  margin: 0;
  padding-top: 10px;
  border-top: 1px solid var(--border-subtle);
  width: 100%;
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-size: 10px;
  color: var(--ts-teal);
}

/* --- Checklist horizontal ("¿Necesitas una gestion mas completa?") --------- */
.check-grid {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 22px;
}

.check-grid .check { margin-bottom: 0; }

/* --- Linea de objetivo al pie de las tarjetas numeradas --------------------
   Vive dentro de `.sol-card__body` (flex-column); `margin-top:auto` la fija
   al borde inferior aunque el checklist tenga distinto largo entre tarjetas. */
/* Selector calificado con `.sol-card__body >`: iguala la especificidad de
   `.sol-card__body > p` (Soluciones) para que estas reglas ganen en vez de
   perderse — la version anterior (.sol-card__objective a solas) era menos
   especifica y `.sol-card__body > p` le ganaba en margin/font-size/line-height. */
.sol-card__body > .sol-card__objective {
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px dashed var(--border-subtle);
  font-size: 12px;
  font-style: italic;
  line-height: 1.5;
  color: var(--text-body);
}

.sol-card__objective strong {
  font-style: normal;
  font-weight: var(--fw-bold);
  color: var(--ts-teal);
}

/* --- Banda "Orden documental + seguimiento + informacion" ------------------
   Reutiliza `.mini-icons`/`.mini-icon` (portada) con mas columnas. ---------- */
.doc-band {
  background: #fff;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: clamp(28px, 4vw, 36px);
}

.doc-band__title {
  text-align: center;
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-size: var(--fs-base);
  color: var(--text-heading);
  margin: 0 0 10px;
}

.doc-band__intro {
  text-align: center;
  max-width: 760px;
  margin: 0 auto 26px;
}

.doc-band .mini-icons {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 26px 16px;
  border-top: none;
  padding-top: 0;
}

/* --- Recorrido de 5 pasos ("¿Como empezamos?") ------------------------------
   Version compacta: el numero no se superpone al borde de una tarjeta (no hay
   tarjeta), asi que el conector solo necesita alinearse al centro del circulo
   (radio 20px) en vez del radio de `.sol-card__badge` (28px). --------------- */
.flow-track {
  position: relative;
  display: grid;
  grid-template-columns: 1fr 30px 1fr 30px 1fr 30px 1fr 30px 1fr;
  align-items: start;
  gap: 0 2px;
}

.flow-step { text-align: center; padding: 0 6px; }

.flow-step__num {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--surface-dark);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: var(--fs-sm);
  margin: 0 auto 12px;
}

.flow-step__icon {
  display: block;
  font-size: 22px;
  color: var(--ts-teal);
  margin-bottom: 8px;
  line-height: 1;
}

.flow-step h3 {
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  text-transform: uppercase;
  letter-spacing: 0.01em;
  font-size: 11px;
  color: var(--text-heading);
  margin: 0 0 8px;
}

.flow-step p {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-body);
  margin: 0;
}

/* El circulo del paso (40px) es mas chico que la insignia de `.sol-card`
   (56px); el conector reutilizado necesita su propio offset para centrarse. */
.flow-track .solution-connector { margin-top: 20px; }

/* --- Franja de metodo E.S.C.U.D.O. (version compacta, una linea) ----------- */
.escudo-strip {
  background: var(--gradient-dark);
  border-radius: var(--radius-lg);
  padding: 22px 32px;
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
}

.escudo-strip__lead {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.escudo-strip__lead svg { width: 30px; height: auto; flex-shrink: 0; }

.escudo-strip__lead span {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-sm);
  color: #fff;
  line-height: 1.3;
  max-width: 220px;
}

.escudo-strip__items {
  display: flex;
  flex-wrap: wrap;
  gap: 16px 22px;
  margin-left: auto;
}

.escudo-strip__item {
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: 12px;
  color: rgba(255, 255, 255, 0.92);
  white-space: nowrap;
}

.escudo-strip__item i { color: var(--ts-aqua); font-size: 16px; }

/* --- Responsive de los componentes de Acompañamiento MYPES ----------------- */
@media (max-width: 1080px) {
  .common-issue { grid-template-columns: 1fr; }
  .common-issue__art { min-height: 240px; }
  .growth { grid-template-columns: 1fr; }
}

@media (max-width: 960px) {
  .step-track { grid-template-columns: 1fr; gap: 44px 0; max-width: 480px; }
  .step-track .solution-connector { display: none; }
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 720px) {
  .photo-tag { max-width: 148px; padding: 8px 12px 8px 8px; }
  .common-issue__tag { font-size: 11px; padding: 9px 16px; white-space: normal; text-align: center; }
  .grid--4 { grid-template-columns: 1fr; }
}

/* --- Grid de 6 columnas ("Desafios", "Que cambia para tu empresa") --------- */
.grid--6 { grid-template-columns: repeat(6, minmax(0, 1fr)); }

/* --- Fila de desafios/puntos de dolor --------------------------------------
   Como `.check`, pero con icono libre (no siempre checkmark) y tono neutro:
   son observaciones sobre la situacion actual, no logros. ------------------- */
.pain-item {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.pain-item i {
  font-size: 20px;
  color: var(--text-muted);
  flex-shrink: 0;
  margin-top: 2px;
}

.pain-item span {
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-body);
}

/* --- Recorrido de 6 pasos ("Nuestro enfoque de trabajo") -------------------
   `.flow-track` (Area Externa RR.HH.) fija su plantilla para 5 pasos + 4
   conectores; este modificador la extiende a 6 pasos + 5 conectores sin
   tocar la version de 5 que ya esta en uso. --------------------------------- */
.flow-track--6 {
  grid-template-columns: 1fr 24px 1fr 24px 1fr 24px 1fr 24px 1fr 24px 1fr;
}

/* --- Responsive de los componentes de Area Externa RR.HH. ------------------ */
@media (max-width: 1080px) {
  .check-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .doc-band .mini-icons { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  .flow-track { grid-template-columns: 1fr; gap: 32px 0; max-width: 420px; margin: 0 auto; }
  .flow-track .solution-connector { display: none; }
  .escudo-strip__items { margin-left: 0; }
}

@media (max-width: 720px) {
  .check-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .doc-band .mini-icons { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 22px 12px; }
  .hero-proof { gap: 20px; }
  .escudo-strip { padding: 22px 24px; }
  .escudo-strip__lead span { max-width: none; }
}

/* --- Pagina Servicios Complementarios: nota destacada del hero ------------- */
.hero-note {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--surface-tint-soft);
  border: 1px solid var(--ts-aqua);
  border-radius: var(--radius-md);
  padding: 18px 20px;
  margin: 26px 0;
}

.hero-note svg { width: 26px; height: auto; flex-shrink: 0; margin-top: 1px; }

.hero-note p {
  margin: 0;
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-heading);
}

/* --- Fila de confianza (banda bajo el hero) --------------------------------- */
.trust-row {
  display: flex;
  justify-content: center;
  gap: clamp(28px, 5vw, 56px);
  flex-wrap: wrap;
}

.trust-item {
  display: flex;
  align-items: center;
  gap: 14px;
  max-width: 230px;
}

.trust-item span {
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  color: var(--text-heading);
}

/* --- Grid 3+2 ("¿En que podemos apoyarte?") --------------------------------
   6 pistas de columna: las primeras 3 tarjetas ocupan 2 cada una (3x2=6), las
   ultimas 2 ocupan 3 cada una (2x3=6) — la segunda fila queda mas ancha y
   centrada, como en la referencia. ------------------------------------------ */
.grid--3-2 {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
}

.grid--3-2 > :nth-child(1),
.grid--3-2 > :nth-child(2),
.grid--3-2 > :nth-child(3) { grid-column: span 2; }

.grid--3-2 > :nth-child(4),
.grid--3-2 > :nth-child(5) { grid-column: span 3; }

/* --- Linea de beneficio al pie de las tarjetas (icono + texto) -------------
   Envuelta en un div (no un <p> directo hijo de `.sol-card__body`) para no
   heredar la especificidad de `.sol-card__body > p`. ------------------------ */
.sol-card__benefit {
  margin-top: auto;
  padding-top: 16px;
  border-top: 1px solid var(--border-subtle);
  display: flex;
  align-items: flex-start;
  gap: 12px;
}

.sol-card__benefit .icon-circle { flex-shrink: 0; }

.sol-card__benefit p {
  margin: 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-body);
}

.sol-card__benefit p strong {
  color: var(--ts-teal);
  font-weight: var(--fw-bold);
}

/* --- CTA ligero en la banda de cierre (sin tarjeta blanca) ------------------
   Alternativa a `.closing__card` para cuando el CTA es solo boton + nota. --- */
.closing__cta {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

.closing__cta small {
  color: rgba(255, 255, 255, 0.78);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
}

/* --- Responsive de los componentes de Gerencia Externa RR.HH. -------------- */
@media (max-width: 1080px) {
  .grid--6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 960px) {
  .flow-track--6 { grid-template-columns: 1fr; gap: 32px 0; max-width: 420px; margin: 0 auto; }
}

@media (max-width: 720px) {
  .grid--6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* --- Pagina Contacto: tarjeta de cita flotante sobre la foto del hero ------ */
.quote-float {
  position: absolute;
  top: 28px;
  right: 24px;
  background: #fff;
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  padding: 26px 24px 22px;
  max-width: 220px;
  z-index: 2;
}

.quote-float__mark {
  display: block;
  font-family: var(--font-display);
  font-size: 46px;
  line-height: 0.5;
  color: var(--ts-mint);
  margin-bottom: 10px;
}

.quote-float p {
  margin: 0;
  font-style: italic;
  font-weight: var(--fw-semibold);
  font-size: var(--fs-sm);
  line-height: var(--lh-relaxed);
  color: var(--text-heading);
}

.quote-float .rule--sm { margin: 14px 0 0; }

/* --- Tarjetas "Evaluacion preliminar" / "Tambien puedes contactarnos" ------ */
.contact-cards {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: 28px;
  align-items: start;
}

.contact-cards .card h2 {
  font-size: var(--fs-xl);
  line-height: var(--lh-snug);
  color: var(--text-heading);
  margin: 20px 0 16px;
}

/* Sin icono precedente (p.ej. "Tambien puedes contactarnos"), el titulo abre
   la tarjeta directamente y no necesita el espacio superior. */
.contact-cards .card h2:first-child { margin-top: 0; }

.contact-cards .card > p { margin: 0 0 16px; font-size: var(--fs-sm); line-height: var(--lh-relaxed); }

/* Nota bajo el boton, aclarando que hoy enlaza a WhatsApp. */
.eval-note {
  display: flex;
  align-items: flex-start;
  gap: 8px;
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-muted);
}

.eval-note i { font-size: 14px; margin-top: 2px; flex-shrink: 0; }

/* --- Filas de contacto ("Tambien puedes contactarnos") --------------------- */
.contact-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 16px 0;
  border-bottom: 1px solid var(--border-subtle);
}

.contact-row:first-child { padding-top: 0; }
.contact-row:last-child { padding-bottom: 0; border-bottom: none; }

.contact-row .icon-circle { flex-shrink: 0; }

.contact-row strong {
  display: block;
  font-family: var(--font-display);
  font-weight: var(--fw-extrabold);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--text-muted);
  margin-bottom: 4px;
}

.contact-row a,
.contact-row span {
  font-family: var(--font-display);
  font-weight: var(--fw-bold);
  font-size: var(--fs-base);
  color: var(--text-heading);
}

.contact-row a:hover { color: var(--ts-teal); }

/* --- Recorrido de 3 pasos, variante con icono grande ------------------------
   `.flow-track` ya trae la plantilla de 5 columnas; este modificador la
   reduce a 3 pasos + 2 conectores. El icono va dentro de un `.icon-circle`
   (en vez de suelto como en `.flow-step__icon`), asi que necesita su propio
   centrado horizontal. -------------------------------------------------------- */
.flow-track--3 {
  grid-template-columns: 1fr 30px 1fr 30px 1fr;
  max-width: 900px;
  margin: 0 auto;
}

.flow-step .icon-circle { margin: 0 auto 14px; }

/* --- Responsive de los componentes de Servicios Complementarios ------------ */
@media (max-width: 1080px) {
  .grid--3-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid--3-2 > :nth-child(1),
  .grid--3-2 > :nth-child(2),
  .grid--3-2 > :nth-child(3),
  .grid--3-2 > :nth-child(4),
  .grid--3-2 > :nth-child(5) { grid-column: span 1; }
}

@media (max-width: 720px) {
  .grid--3-2 { grid-template-columns: 1fr; }
  .trust-row { gap: 24px; justify-content: flex-start; }
  .trust-item { max-width: none; }
}

/* --- Responsive de los componentes de Contacto ------------------------------ */
@media (max-width: 960px) {
  .quote-float { position: static; max-width: none; margin-top: 20px; }
}

@media (max-width: 1080px) {
  .contact-cards { grid-template-columns: 1fr; }
}

@media (max-width: 720px) {
  .flow-track--3 { grid-template-columns: 1fr; gap: 32px 0; max-width: 420px; margin: 0 auto; }
}
/* ==========================================================================
   9. Motion & focus preferences
   ========================================================================== */

:focus-visible {
  outline: 3px solid var(--ts-mint);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  .btn:hover,
  .wa-float:hover { transform: none; }
}

@media print {
  .site-header, .wa-float, .site-footer { display: none; }
}