/* ==========================================================================
   Gambit · Catálogo de Servicios
   Mundo visual: Gambit_Brand_Guidelines.md v1.0 — Barlow + DM Sans,
   Verde Primario #0A3C2D, Lima #B6F431, Warm White #F8F7F3.
   Proporción 60 neutro / 30 verde / 10 lima. El lima NUNCA es fondo de texto.

   Tokens con prefijo --cat-* a propósito: styles.css define --dark/--lime con
   otros valores y esta hoja no debe pisarlos si algún día conviven.
   ========================================================================== */

:root {
  --cat-verde: #0A3C2D;
  --cat-verde-2: #0F4938;
  --cat-verde-hover: #072A1F;
  --cat-negro: #0D1F18;
  --cat-lima: #B6F431;
  --cat-lima-hover: #9BD428;
  --cat-lima-suave: #F1FAD9;
  --cat-warm: #F8F7F3;
  --cat-frio: #F0F4F1;
  --cat-gris: #5F6B66;
  --cat-tinta: #1A1A1A;
  --cat-linea: rgba(10, 60, 45, 0.12);
  --cat-linea-fuerte: rgba(10, 60, 45, 0.22);

  --cat-h: 'Barlow', Arial, sans-serif;
  --cat-b: 'DM Sans', Arial, sans-serif;

  /* Curvas fuertes: las nativas de CSS no tienen punch suficiente. */
  --cat-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --cat-ease-io: cubic-bezier(0.77, 0, 0.175, 1);

  --cat-max: 1240px;
  --cat-r: 14px;
  --cat-r-lg: 22px;

  /* Palomita como máscara: el color lo pone el fondo del pseudo-elemento,
     así una sola definición sirve sobre verde y sobre claro. */
  --cat-check: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 15 15'%3E%3Cpath d='M2 7.5l4 4L13 3' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
}

/* --- reset acotado a la página ------------------------------------------ */
.cat *,
.cat *::before,
.cat *::after { box-sizing: border-box; }

.cat {
  margin: 0;
  background: var(--cat-warm);
  color: var(--cat-tinta);
  font-family: var(--cat-b);
  font-size: 17px;
  line-height: 1.72;
  -webkit-font-smoothing: antialiased;
  /* Ninguna animación fuera de pantalla puede crear scroll lateral. */
  overflow-x: hidden;
  width: 100%;
  max-width: 100%;
}

/* ⚠️ TODO ESTE RESET VA DENTRO DE :where().
   `.cat p { margin: 0 }` pesa 0,1,1 y le ganaba a `.cat-lead` (0,1,0): el
   `margin-top` del parrafo guia NUNCA se aplico y cada titulo quedo pegado
   a su texto en las tres paginas. Es el mismo defecto que dejo invisible al
   boton lima —un reset calificado por etiqueta aplastando a su componente—,
   asi que se corrige de raiz: `:where()` aporta especificidad CERO, el
   reset sigue siendo el suelo y cualquier clase lo pisa sin pelear. */
.cat :where(img) { max-width: 100%; display: block; }
.cat :where(h1, h2, h3, h4) {
  font-family: var(--cat-h);
  font-weight: 800;
  /* 1.04 dejaba los descendentes de una linea rozando la siguiente. */
  line-height: 1.14;
  letter-spacing: -0.021em;
  margin: 0;
  text-wrap: balance;
}
.cat :where(p) { margin: 0; }
.cat :where(a) { color: inherit; }

.cat-wrap { width: min(100% - 40px, var(--cat-max)); margin-inline: auto; }
@media (max-width: 560px) { .cat-wrap { width: calc(100% - 32px); } }

/* Ritmo de capítulo: cada sección respira como un acto, no como un bloque. */
.cat-sec { padding-block: clamp(52px, 6vw, 88px); position: relative; }
.cat-sec--tight { padding-block: clamp(40px, 4.5vw, 62px); }

/* Más aire arriba de un encabezado que abajo. */
.cat-lead { max-width: 62ch; margin-top: clamp(20px, 2.2vw, 30px); color: var(--cat-gris); font-size: 1.06rem; line-height: 1.75; }

/* ==========================================================================
   Navegación — pill flotante de vidrio
   ========================================================================== */
.cat-nav {
  position: fixed;
  inset-inline: 0;
  top: 16px;
  z-index: 60;
  display: flex;
  justify-content: center;
  pointer-events: none;
}
.cat-nav__pill {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 11px 11px 24px;
  border-radius: 999px;
  background: rgba(248, 247, 243, 0.86);
  backdrop-filter: blur(16px) saturate(150%);
  -webkit-backdrop-filter: blur(16px) saturate(150%);
  border: 1px solid var(--cat-linea);
  box-shadow: 0 12px 40px -18px rgba(10, 60, 45, 0.55);
  max-width: calc(100% - 32px);
}
/* El logo necesita su propio aire: pegado al primer enlace se leia como si
   "Inicio" fuera parte del lockup. Un filete separa sin meter ruido. */
.cat-nav__mark {
  display: flex;
  align-items: center;
  text-decoration: none;
  padding-right: 22px;
  margin-right: 4px;
  border-right: 1px solid var(--cat-linea);
}
.cat-nav__mark img { height: 32px; width: auto; }
.cat-nav__links { display: flex; gap: 6px; }
.cat-nav__links a {
  font-family: var(--cat-h);
  font-weight: 600;
  font-size: 0.95rem;
  letter-spacing: 0.01em;
  text-decoration: none;
  color: var(--cat-verde);
  padding: 12px 20px;
  border-radius: 999px;
  transition: background-color 180ms var(--cat-ease), color 180ms var(--cat-ease);
}
@media (hover: hover) and (pointer: fine) {
  .cat-nav__links a:hover { background: var(--cat-frio); }
}
@media (max-width: 860px) { .cat-nav__links { display: none; } }

/* ==========================================================================
   Botones
   ========================================================================== */
/* ⚠️ Este selector va SIN `.cat` delante a propósito.
   `.cat .cat-btn` pesa 0,2,0 y aplastaba a `.cat-btn--lima` (0,1,0): con
   <body class="cat"> el modificador NUNCA ganaba, así que el CTA lima salía
   verde sobre franja verde —invisible, leído como texto suelto— y el ghost
   perdía su borde contra `border:0`. El color ya no necesita `!important`
   porque el reset de `a` vive en :where() y pesa cero. */
.cat-btn {
  --btn-bg: var(--cat-verde);
  --btn-fg: #fff;
  --btn-glow: rgba(10, 60, 45, 0.28);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  font-family: var(--cat-h);
  font-weight: 700;
  font-size: 0.95rem;
  letter-spacing: 0.005em;
  text-decoration: none;
  padding: 15px 26px;
  border: 0;
  border-radius: 999px;
  background: var(--btn-bg);
  color: var(--btn-fg);
  cursor: pointer;
  /* Propiedades explícitas: nunca `all`. */
  transition: transform 200ms var(--cat-ease), box-shadow 200ms var(--cat-ease),
              background-color 180ms var(--cat-ease), border-color 180ms var(--cat-ease);
}
.cat-btn:active { transform: translateY(0) scale(0.98); }
/* El hover del landing: se levanta y proyecta su propio color. */
@media (hover: hover) and (pointer: fine) {
  .cat-btn:hover { transform: translateY(-2px); box-shadow: 0 8px 32px var(--btn-glow); }
  .cat-btn:hover svg { transform: translateX(4px); }
}
.cat-btn svg { transition: transform 200ms var(--cat-ease); flex-shrink: 0; }
.cat-btn:focus-visible { outline: 3px solid var(--cat-lima); outline-offset: 3px; }

/* Lima sobre verde: el único uso de lima como fondo, y siempre con tinta verde. */
.cat-btn--lima {
  --btn-bg: var(--cat-lima);
  --btn-fg: var(--cat-verde);
  --btn-glow: rgba(182, 244, 49, 0.38);
}
.cat-btn--ghost {
  --btn-bg: transparent;
  --btn-fg: var(--cat-verde);
  --btn-glow: rgba(10, 60, 45, 0.16);
  border: 1.5px solid var(--cat-linea-fuerte);
}
@media (hover: hover) and (pointer: fine) {
  .cat-btn--ghost:hover { border-color: var(--cat-verde); background: transparent; }
}
.cat-btn--sm { padding: 13px 24px; font-size: 0.92rem; }
.cat-btn--lg { padding: 18px 38px; font-size: 1.02rem; }

/* ==========================================================================
   HERO — Artistic Asymmetry
   Texto a la izquierda, pieza flotante invadiendo desde abajo-derecha.
   ========================================================================== */
.cat-hero {
  position: relative;
  padding-top: clamp(104px, 11vw, 140px);
  padding-bottom: clamp(52px, 6vw, 82px);
  overflow: hidden;
}
.cat-hero__grid {
  display: grid;
  grid-template-columns: minmax(0, 1.18fr) minmax(0, 0.82fr);
  gap: clamp(28px, 5vw, 72px);
  align-items: end;
}
@media (max-width: 940px) {
  .cat-hero__grid { grid-template-columns: 1fr; }
}

/* La regla de hierro: 2–3 líneas. Tamaño fluido y medida ancha para que
   las palabras fluyan en horizontal en vez de apilarse. */
.cat-hero h1 {
  font-size: clamp(2.6rem, 4.9vw, 4.9rem);
  max-width: 22ch;
}
.cat-hero h1 em {
  font-style: normal;
  color: var(--cat-verde);
  position: relative;
}
.cat-hero h1 em::after {
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0.07em;
  height: 0.19em;
  background: var(--cat-lima);
  z-index: -1;
}
.cat-hero__actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 34px; }

/* Pieza flotante: retícula de peones, dibujada en CSS. Sin stock externo. */
.cat-hero__aside {
  position: relative;
  min-height: 260px;
  border-radius: var(--cat-r-lg);
  background:
    radial-gradient(120% 90% at 80% 10%, rgba(182, 244, 49, 0.16), transparent 62%),
    linear-gradient(155deg, var(--cat-verde) 0%, var(--cat-negro) 100%);
  overflow: hidden;
  box-shadow: 0 40px 80px -50px rgba(10, 60, 45, 0.9);
}
.cat-hero__aside::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 34px 34px;
}
.cat-hero__aside-inner {
  position: relative;
  padding: 30px;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  gap: 12px;
  color: #fff;
}
.cat-hero__aside-inner strong {
  font-family: var(--cat-h);
  font-weight: 800;
  /* Baja de 2.1rem: a ese tamaño competia con el H1 y el hero tenia dos
     titulares peleandose la mirada. La pieza acompana, no encabeza. */
  font-size: clamp(1.18rem, 1.7vw, 1.42rem);
  line-height: 1.22;
}
.cat-hero__aside-inner span { color: rgba(255, 255, 255, 0.72); font-size: 0.95rem; }

/* ==========================================================================
   Bloques de contenido
   ========================================================================== */
.cat-eyebrow {
  font-family: var(--cat-h);
  font-weight: 700;
  font-size: 0.78rem;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--cat-verde);
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.cat-eyebrow::before {
  content: "";
  width: 22px; height: 3px;
  background: var(--cat-lima);
  border-radius: 2px;
}
.cat-h2 { font-size: clamp(2rem, 3.7vw, 3.2rem); max-width: 20ch; margin-top: 22px; }

/* Centrar de verdad. `text-align:center` sobre un bloque con `max-width`
   centra el TEXTO dentro de una caja que sigue pegada a la izquierda: se
   ve descuadrado. Hacen falta los margenes automaticos. */
.cat-centro { text-align: center; }
.cat-centro .cat-h2,
.cat-centro .cat-lead { margin-inline: auto; }
.cat-centro .cat-eyebrow { justify-content: center; }
.cat-centro .cat-hero__actions { justify-content: center; }

.cat-panel {
  background: #fff;
  border: 1px solid var(--cat-linea);
  border-radius: var(--cat-r-lg);
  padding: clamp(24px, 3.6vw, 44px);
}
.cat-panel--verde {
  background: var(--cat-verde);
  color: #fff;
  border-color: transparent;
}
.cat-panel--verde .cat-h2, .cat-panel--verde h3 { color: #fff; }
.cat-panel--verde .cat-eyebrow { color: var(--cat-lima); }
.cat-panel--verde p { color: rgba(255, 255, 255, 0.78); }

.cat-nota {
  background: var(--cat-lima-suave);
  border-left: 5px solid var(--cat-lima);
  border-radius: 0 12px 12px 0;
  padding: 18px 22px;
  font-size: 0.95rem;
  color: var(--cat-verde);
}

/* ==========================================================================
   Los cuatro caminos
   ========================================================================== */
.cat-caminos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 18px;
  margin-top: 46px;
}
.cat-camino {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 30px 26px;
  border-radius: var(--cat-r);
  border: 1px solid var(--cat-linea);
  background: #fff;
  overflow: hidden;
  transition: transform 260ms var(--cat-ease), box-shadow 260ms var(--cat-ease);
}
@media (hover: hover) and (pointer: fine) {
  .cat-camino:hover {
    transform: translateY(-5px);
    box-shadow: 0 26px 50px -34px rgba(10, 60, 45, 0.62);
  }
}
.cat-camino h3 { font-size: 1.55rem; }
.cat-camino p { font-size: 0.96rem; color: var(--cat-gris); line-height: 1.68; }
.cat-camino ul { margin: 4px 0 0; padding-left: 18px; font-size: 0.92rem; color: var(--cat-gris); line-height: 1.66; }
.cat-camino li { margin-bottom: 8px; }
.cat-camino--destacado {
  background: var(--cat-verde);
  border-color: transparent;
  color: #fff;
}
.cat-camino--destacado h3 { color: #fff; }
.cat-camino--destacado p, .cat-camino--destacado ul { color: rgba(255, 255, 255, 0.78); }
.cat-camino__flag {
  align-self: flex-start;
  font-family: var(--cat-h);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--cat-lima);
  color: var(--cat-verde);
  padding: 5px 11px;
  border-radius: 999px;
}

/* ==========================================================================
   Catálogo — acordeones horizontales (desktop) / verticales (móvil)
   ========================================================================== */
.cat-filtros { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 34px; }
.cat-filtro {
  font-family: var(--cat-h);
  font-weight: 600;
  font-size: 0.85rem;
  padding: 9px 16px;
  border-radius: 999px;
  border: 1.5px solid var(--cat-linea-fuerte);
  background: transparent;
  color: var(--cat-verde);
  cursor: pointer;
  transition: transform 160ms var(--cat-ease), background-color 180ms var(--cat-ease),
              color 180ms var(--cat-ease), border-color 180ms var(--cat-ease);
}
.cat-filtro:active { transform: scale(0.97); }
.cat-filtro[aria-pressed="true"] {
  background: var(--cat-verde);
  border-color: var(--cat-verde);
  color: #fff;
}

.cat-familias { margin-top: 34px; display: flex; flex-direction: column; gap: 14px; }
.cat-familia {
  border: 1px solid var(--cat-linea);
  border-radius: var(--cat-r-lg);
  background: #fff;
  overflow: hidden;
}
.cat-familia__btn {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  padding: 24px clamp(20px, 3vw, 32px);
  background: transparent;
  border: 0;
  cursor: pointer;
  text-align: left;
  font-family: var(--cat-h);
  transition: background-color 200ms var(--cat-ease);
}
@media (hover: hover) and (pointer: fine) {
  .cat-familia__btn:hover { background: var(--cat-frio); }
}
.cat-familia__btn h3 { font-size: clamp(1.2rem, 2vw, 1.62rem); }
.cat-familia__meta { display: block; font-family: var(--cat-b); font-weight: 400;
  font-size: 0.9rem; color: var(--cat-gris); margin-top: 6px; }
.cat-familia__chev {
  flex: none;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--cat-frio);
  display: grid;
  place-items: center;
  transition: transform 260ms var(--cat-ease), background-color 200ms var(--cat-ease);
}
.cat-familia__btn[aria-expanded="true"] .cat-familia__chev {
  transform: rotate(45deg);
  background: var(--cat-lima);
}
.cat-familia__panel {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows 320ms var(--cat-ease-io);
}
.cat-familia__panel[data-open="true"] { grid-template-rows: 1fr; }
.cat-familia__panel > div { overflow: hidden; }

/* Bento sin celdas muertas: `dense` rellena cualquier hueco que deje un span. */
.cat-servicios {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(268px, 1fr));
  grid-auto-flow: dense;
  gap: 14px;
  padding: 0 clamp(20px, 3vw, 32px) clamp(24px, 3vw, 32px);
}
.cat-svc {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 24px;
  border-radius: var(--cat-r);
  background: var(--cat-frio);
  border: 1px solid transparent;
  scroll-margin-top: 110px;
  transition: transform 220ms var(--cat-ease), border-color 220ms var(--cat-ease);
}
@media (hover: hover) and (pointer: fine) {
  .cat-svc:hover { transform: translateY(-3px); border-color: var(--cat-linea-fuerte); }
}
@media (min-width: 1000px) {
  .cat-servicios { grid-template-columns: repeat(var(--cols, auto-fit), minmax(0, 1fr)); }
}
.cat-svc--ancho { grid-column: span 2; }
@media (max-width: 620px) { .cat-svc--ancho { grid-column: span 1; } }
.cat-svc h4 { font-size: 1.18rem; }
.cat-svc__que { font-size: 0.97rem; line-height: 1.68; }
.cat-svc__ritmo {
  align-self: flex-start;
  font-family: var(--cat-h);
  font-weight: 700;
  font-size: 0.68rem;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--cat-verde);
  background: rgba(10, 60, 45, 0.09);
  padding: 4px 10px;
  border-radius: 999px;
}
.cat-svc__label {
  font-family: var(--cat-h);
  font-weight: 700;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--cat-gris);
  margin-top: 4px;
}
.cat-svc ul { margin: 0; padding-left: 17px; font-size: 0.9rem; color: var(--cat-gris); line-height: 1.66; }
.cat-svc li { margin-bottom: 7px; }
.cat-svc__res {
  font-size: 0.92rem;
  color: var(--cat-verde);
  border-top: 1px dashed var(--cat-linea-fuerte);
  padding-top: 12px;
  margin-top: 2px;
}
.cat-pend {
  font-family: var(--cat-b);
  font-size: 0.8rem;
  color: #8a6d1f;
  background: #FFF6DA;
  border: 1px dashed #E0BE55;
  border-radius: 7px;
  padding: 3px 8px;
  display: inline-block;
}

/* ==========================================================================
   Calculadoras — pestañas
   ========================================================================== */
.cat-tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 34px; }
.cat-tab {
  font-family: var(--cat-h);
  font-weight: 700;
  font-size: 0.92rem;
  padding: 13px 22px;
  border-radius: 999px;
  border: 1.5px solid rgba(255, 255, 255, 0.22);
  background: transparent;
  color: rgba(255, 255, 255, 0.82);
  cursor: pointer;
  transition: transform 160ms var(--cat-ease), background-color 200ms var(--cat-ease),
              color 200ms var(--cat-ease);
}
.cat-tab:active { transform: scale(0.97); }
.cat-tab[aria-selected="true"] { background: var(--cat-lima); color: var(--cat-verde); border-color: var(--cat-lima); }

.cat-toolpanel { margin-top: 26px; }
.cat-toolpanel[hidden] { display: none; }

.calc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; }
@media (max-width: 1000px) { .calc { grid-template-columns: 1fr; } }
.calc__col { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
@media (min-width: 1001px) {
  .calc__col--out { position: sticky; top: 92px; align-self: start; max-height: calc(100vh - 112px); overflow-y: auto; }
}
.calc .card {
  background: #fff;
  border: 1px solid var(--cat-linea);
  border-radius: var(--cat-r);
  padding: 22px;
}
.calc .card h2 {
  font-family: var(--cat-h);
  font-weight: 700;
  font-size: 0.98rem;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  color: var(--cat-verde);
  margin: 0 0 16px;
}
.calc .card h2 span { text-transform: none; letter-spacing: 0; color: var(--cat-gris); font-weight: 500; font-size: 0.82rem; }
.calc .f { margin-bottom: 14px; }
.calc .f.full { grid-column: 1 / -1; }
.calc label {
  display: block;
  font-family: var(--cat-b);
  font-weight: 600;
  font-size: 0.88rem;
  color: var(--cat-tinta);
  margin-bottom: 6px;
}
.calc label small {
  display: block;
  font-weight: 400;
  font-size: 0.78rem;
  color: var(--cat-gris);
  margin-top: 2px;
  line-height: 1.45;
}
.calc input, .calc select {
  width: 100%;
  font-family: var(--cat-b);
  font-size: 0.98rem;
  font-variant-numeric: tabular-nums;
  color: var(--cat-tinta);
  background: var(--cat-warm);
  border: 1.5px solid var(--cat-linea);
  border-radius: 9px;
  padding: 11px 13px;
  transition: border-color 180ms var(--cat-ease), background-color 180ms var(--cat-ease);
}
.calc input:focus, .calc select:focus {
  outline: none;
  border-color: var(--cat-verde);
  background: #fff;
}
.calc .hint { font-size: 0.83rem; color: var(--cat-gris); line-height: 1.55; margin: 8px 0 0; }
.calc .hide { display: none !important; }

.calc .row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 14px;
  padding: 11px 0;
  border-bottom: 1px solid var(--cat-linea);
}
.calc .row:last-of-type { border-bottom: 0; }
.calc .k { font-size: 0.88rem; color: var(--cat-gris); max-width: 60%; }
.calc .k b { display: block; color: var(--cat-tinta); font-weight: 600; }
.calc .k small { display: block; font-size: 0.78rem; margin-top: 2px; }
.calc .v {
  font-family: var(--cat-h);
  font-weight: 800;
  font-size: 1.12rem;
  font-variant-numeric: tabular-nums;
  color: var(--cat-verde);
  text-align: right;
  white-space: nowrap;
}
.calc .v small {
  display: block;
  font-family: var(--cat-b);
  font-weight: 400;
  font-size: 0.75rem;
  color: var(--cat-gris);
  white-space: normal;
  margin-top: 3px;
}
.calc .v.big { font-size: 1.5rem; }
.calc .v.bad { color: #C0392B; }
.calc .v.ok { color: var(--cat-verde); }
.calc .v.warn { color: #B7791F; }
.calc .hero, .calc .ladder {
  background: var(--cat-lima-suave);
  border-radius: 11px;
  padding: 6px 16px;
  margin-bottom: 10px;
}
.calc .arqbox p { font-size: 0.85rem; color: var(--cat-gris); margin-top: 8px; line-height: 1.5; }
.calc details { margin-top: 12px; }
.calc summary {
  font-family: var(--cat-h);
  font-weight: 700;
  font-size: 0.82rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--cat-verde);
  cursor: pointer;
}
.calc pre {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 0.75rem;
  line-height: 1.55;
  white-space: pre-wrap;
  background: var(--cat-frio);
  border-radius: 9px;
  padding: 14px;
  margin-top: 10px;
  color: var(--cat-tinta);
  overflow-x: auto;
}
.calc .gl p, .calc details div p { font-size: 0.85rem; line-height: 1.6; margin-bottom: 9px; color: var(--cat-gris); }
.calc .diag {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  font-size: 0.89rem;
  line-height: 1.55;
  padding: 10px 0;
  border-bottom: 1px solid var(--cat-linea);
}
.calc .diag:last-child { border-bottom: 0; }
.calc .tag {
  flex: none;
  font-family: var(--cat-h);
  font-weight: 700;
  font-size: 0.66rem;
  letter-spacing: 0.09em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 5px;
  margin-top: 1px;
}
.calc .tag.ok { background: rgba(10, 60, 45, 0.1); color: var(--cat-verde); }
.calc .tag.warn { background: #FDF0D5; color: #8a6d1f; }
.calc .tag.bad { background: #FBE3E0; color: #C0392B; }
.calc .next {
  background: var(--cat-frio);
  border-left: 4px solid var(--cat-lima);
  border-radius: 0 10px 10px 0;
  padding: 16px 18px;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--cat-tinta);
}

/* ==========================================================================
   Marquee · testimonios · cierre
   ========================================================================== */
.cat-marquee { overflow: hidden; padding-block: 26px; border-block: 1px solid var(--cat-linea); }
.cat-marquee__track {
  display: flex;
  gap: 46px;
  width: max-content;
  animation: cat-slide 42s linear infinite;
}
.cat-marquee__track span {
  font-family: var(--cat-h);
  font-weight: 700;
  font-size: clamp(1rem, 1.7vw, 1.35rem);
  letter-spacing: 0.01em;
  color: var(--cat-verde);
  opacity: 0.42;
  white-space: nowrap;
  display: flex;
  align-items: center;
  gap: 46px;
}
.cat-marquee__track span::after { content: "◆"; color: var(--cat-lima); opacity: 0.9; font-size: 0.6em; }
@keyframes cat-slide { to { transform: translateX(-50%); } }

.cat-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  gap: 18px;
  margin-top: 40px;
}
.cat-stat { padding: 26px; border-radius: var(--cat-r); background: rgba(255, 255, 255, 0.07); }
.cat-stat strong {
  display: block;
  font-family: var(--cat-h);
  font-weight: 800;
  font-size: clamp(2rem, 3.4vw, 2.9rem);
  color: var(--cat-lima);
  line-height: 1;
}
.cat-stat span { display: block; margin-top: 9px; font-size: 0.92rem; color: rgba(255, 255, 255, 0.74); }

.cat-testis { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-top: 40px; }
.cat-testi {
  background: #fff;
  border: 1px solid var(--cat-linea);
  border-radius: var(--cat-r);
  padding: 28px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.cat-testi p { font-size: 0.98rem; line-height: 1.75; }
.cat-testi__who { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.cat-testi__av {
  width: 42px; height: 42px;
  flex: none;
  border-radius: 50%;
  background: var(--cat-verde);
  color: var(--cat-lima);
  display: grid;
  place-items: center;
  font-family: var(--cat-h);
  font-weight: 800;
  font-size: 0.9rem;
}
.cat-testi__name { font-family: var(--cat-h); font-weight: 700; font-size: 0.98rem; }
.cat-testi__role { font-size: 0.83rem; color: var(--cat-gris); }
.cat-testi__stars { color: var(--cat-lima); font-size: 0.85rem; letter-spacing: 0.14em; }

.cat-compromiso { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-top: 40px; }
.cat-compromiso > div { padding: 28px; border-radius: var(--cat-r); }
.cat-compromiso__si { background: var(--cat-lima-suave); border: 1px solid rgba(182, 244, 49, 0.55); }
.cat-compromiso__no { background: #fff; border: 1px solid var(--cat-linea); }
.cat-compromiso h3 { font-size: 1.16rem; margin-bottom: 14px; }
.cat-compromiso ul { margin: 0; padding-left: 18px; font-size: 0.94rem; color: var(--cat-gris); }
.cat-compromiso li { margin-bottom: 7px; }

.cat-cierre { text-align: center; }
.cat-cierre h2 { font-size: clamp(2.3rem, 5.4vw, 4.4rem); max-width: 17ch; margin-inline: auto; }
.cat-cierre .cat-hero__actions { justify-content: center; }

.cat-foot {
  padding-block: 44px;
  border-top: 1px solid var(--cat-linea);
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  align-items: center;
  justify-content: space-between;
  font-size: 0.86rem;
  color: var(--cat-gris);
}
.cat-foot img { height: 30px; width: auto; }

/* ==========================================================================
   Motion — entradas. Nunca desde scale(0): nada aparece de la nada.
   ========================================================================== */
.cat-js .cat-rev { opacity: 0; transform: translateY(18px) scale(0.985); }
.cat-rev.is-in {
  opacity: 1;
  transform: none;
  transition: opacity 620ms var(--cat-ease), transform 620ms var(--cat-ease);
}

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

/* ==========================================================================
   Navegación del micro-sitio — tres pestañas persistentes
   ========================================================================== */
.cat-nav__links a[aria-current="page"] {
  background: var(--cat-verde);
  color: #fff;
}
@media (hover: hover) and (pointer: fine) {
  .cat-nav__links a[aria-current="page"]:hover { background: var(--cat-verde); }
}

/* En móvil la nav no se esconde: es un sitio de tres pestañas y esconderlas
   detrás de un menú costaría el recorrido completo. Se compactan. */
@media (max-width: 860px) {
  .cat-nav__links { display: flex; }
  .cat-nav__pill { padding: 8px; gap: 4px; width: calc(100% - 24px); }
  /* Sin el logo caben las tres pestañas a ancho completo, que es lo que
     de verdad hace falta en un sitio de tres pestañas. */
  .cat-nav__mark { display: none; }
  .cat-nav__links { width: 100%; justify-content: space-between; }
  .cat-nav__links a { flex: 1; text-align: center; padding: 12px 6px; font-size: 0.86rem; }
  .cat-nav__cta { display: none; }
}

/* Portada de página interior: más corta que el hero de la aterrizaje. */
.cat-pagehead {
  padding-top: clamp(100px, 10vw, 128px);
  padding-bottom: clamp(28px, 3vw, 44px);
}
.cat-pagehead h1 {
  font-size: clamp(2.3rem, 4.3vw, 4rem);
  max-width: 24ch;
  margin-top: 18px;
}

/* Franja verde a sangre para las secciones que cambian de registro. */
.cat-band {
  background: var(--cat-verde);
  color: #fff;
}
.cat-band .cat-h2, .cat-band h3 { color: #fff; }
.cat-band p { color: rgba(255, 255, 255, 0.78); }
.cat-band .cat-eyebrow { color: var(--cat-lima); }
.cat-band .cat-lead { color: rgba(255, 255, 255, 0.74); }

/* Método — pasos numerados con la pregunta que responde cada uno. */
.cat-pasos {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  margin-top: 44px;
}
.cat-paso {
  padding: 26px 22px;
  border-radius: var(--cat-r);
  border: 1px solid var(--cat-linea);
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 9px;
}
.cat-paso__n {
  font-family: var(--cat-h);
  font-weight: 800;
  font-size: 1.05rem;
  color: var(--cat-verde);
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--cat-lima);
  display: grid;
  place-items: center;
}
.cat-paso h3 { font-size: 1.14rem; }
.cat-paso p { font-size: 0.92rem; color: var(--cat-gris); }

/* Tarjetas de herramienta, encabezadas por la pregunta que responden. */
.cat-tools { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; margin-top: 40px; }
.cat-tool {
  padding: 30px 26px;
  border-radius: var(--cat-r);
  border: 1px solid var(--cat-linea);
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: transform 240ms var(--cat-ease), box-shadow 240ms var(--cat-ease);
}
@media (hover: hover) and (pointer: fine) {
  .cat-tool:hover { transform: translateY(-4px); box-shadow: 0 26px 50px -34px rgba(10, 60, 45, 0.55); }
}
.cat-tool h3 { font-size: 1.32rem; }
.cat-tool p { font-size: 0.95rem; color: var(--cat-gris); line-height: 1.7; }

/* Aviso de privacidad de las herramientas: reduce fricción antes de teclear. */
.cat-privacidad {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  font-size: 0.88rem;
  color: var(--cat-verde);
  background: var(--cat-lima-suave);
  border-radius: 999px;
  padding: 9px 18px;
  margin-top: 22px;
}

.cat-vacio {
  padding: 44px 24px;
  text-align: center;
  color: var(--cat-gris);
  font-size: 0.95rem;
}

/* ==========================================================================
   FRANJAS DE VERDE — el ritmo claro/oscuro
   El brandguide pide 60 neutro / 30 verde / 10 lima. Todo-claro desperdicia
   ese 30% y aplana la pieza. Las franjas oscuras marcan los cambios de acto
   y le dan al lima el fondo donde de verdad contrasta.
   ========================================================================== */

/* Nav siempre en verde: cruza franjas claras y oscuras, así que un solo
   tratamiento evita que se pierda sobre el fondo oscuro. */
.cat-nav__pill {
  background: rgba(10, 60, 45, 0.9);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 14px 40px -20px rgba(0, 0, 0, 0.7);
}
.cat-nav__links a { color: rgba(255, 255, 255, 0.82); }
@media (hover: hover) and (pointer: fine) {
  .cat-nav__links a:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
}
.cat-nav__links a[aria-current="page"] { background: var(--cat-lima); color: var(--cat-verde); }
@media (hover: hover) and (pointer: fine) {
  .cat-nav__links a[aria-current="page"]:hover { background: var(--cat-lima); color: var(--cat-verde); }
}
.cat .cat-nav__cta { --btn-bg: var(--cat-lima); --btn-fg: var(--cat-verde); }

/* --- HERO en franja oscura ---------------------------------------------- */
.cat-hero--dark,
.cat-pagehead--dark {
  background:
    radial-gradient(90% 70% at 78% 0%, rgba(182, 244, 49, 0.1), transparent 60%),
    linear-gradient(168deg, var(--cat-verde) 0%, var(--cat-negro) 100%);
  color: #fff;
}
.cat-hero--dark h1,
.cat-pagehead--dark h1 { color: #fff; }
.cat-hero--dark .cat-lead,
.cat-pagehead--dark .cat-lead { color: rgba(255, 255, 255, 0.76); }
.cat-hero--dark .cat-eyebrow,
.cat-pagehead--dark .cat-eyebrow { color: var(--cat-lima); }
/* Sobre verde el subrayado lima ya no cabe: el texto pasa a lima directo. */
.cat-hero--dark h1 em { color: var(--cat-lima); }
.cat-hero--dark h1 em::after { display: none; }
/* El primer CTA se vuelve lima: es el único que debe gritar sobre el verde. */
.cat-hero--dark .cat-hero__actions .cat-btn:first-child,
.cat-pagehead--dark .cat-hero__actions .cat-btn:first-child {
  --btn-bg: var(--cat-lima);
  --btn-fg: var(--cat-verde);
}
.cat-hero--dark .cat-btn--ghost,
.cat-pagehead--dark .cat-btn--ghost,
.cat-cierre--dark .cat-btn--ghost,
.cat-band .cat-btn--ghost {
  --btn-fg: #fff;
  --btn-glow: rgba(255, 255, 255, 0.14);
  border-color: rgba(255, 255, 255, 0.34);
}
@media (hover: hover) and (pointer: fine) {
  .cat-hero--dark .cat-btn--ghost:hover,
  .cat-pagehead--dark .cat-btn--ghost:hover,
  .cat-cierre--dark .cat-btn--ghost:hover,
  .cat-band .cat-btn--ghost:hover { border-color: var(--cat-lima); background: rgba(255, 255, 255, 0.08); }
}
/* Dentro de la franja oscura la pieza flotante se aclara para separarse. */
.cat-hero--dark .cat-hero__aside {
  background:
    radial-gradient(120% 90% at 80% 10%, rgba(182, 244, 49, 0.2), transparent 62%),
    linear-gradient(155deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.14);
  box-shadow: none;
}

/* Filtros sobre verde. */
.cat-pagehead--dark .cat-filtro { border-color: rgba(255, 255, 255, 0.28); color: rgba(255, 255, 255, 0.86); }
.cat-pagehead--dark .cat-filtro[aria-pressed="true"] {
  background: var(--cat-lima); border-color: var(--cat-lima); color: var(--cat-verde);
}
@media (hover: hover) and (pointer: fine) {
  .cat-pagehead--dark .cat-filtro:hover { background: rgba(255, 255, 255, 0.1); }
}
.cat-pagehead--dark .cat-privacidad {
  background: rgba(255, 255, 255, 0.1); color: #fff;
}
.cat-pagehead--dark .cat-privacidad svg path { stroke: var(--cat-lima); }

/* --- Cierre en franja oscura -------------------------------------------- */
.cat-cierre--dark {
  background: var(--cat-verde);
  color: #fff;
}
.cat-cierre--dark h2 { color: #fff; }
.cat-cierre--dark .cat-lead { color: rgba(255, 255, 255, 0.76); }
/* El CTA primario del cierre oscuro grita en lima, como en el hero. */
.cat-cierre--dark .cat-hero__actions .cat-btn:first-child {
  --btn-bg: var(--cat-lima);
  --btn-fg: var(--cat-verde);
  --btn-glow: rgba(182, 244, 49, 0.38);
}

/* Pie sobre verde, para cerrar la página en el mismo tono que la abre. */
.cat-foot--dark {
  background: var(--cat-negro);
  color: rgba(255, 255, 255, 0.6);
  border-top: 0;
  padding-inline: clamp(20px, 4vw, 40px);
  border-radius: 0;
}
.cat-foot--dark a { color: var(--cat-lima); }

/* La franja verde intermedia gana profundidad con la misma retícula del
   hero: sin ella el bloque se lee como un rectángulo plano. */
.cat-band { position: relative; overflow: hidden; }
.cat-band::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, 0.04) 1px, transparent 1px);
  background-size: 46px 46px;
  pointer-events: none;
}
.cat-band > * { position: relative; }

/* Nav en movil: tres pestañas tienen que caber en una linea cada una.
   Va al final para ganarle a las reglas de color de la franja verde. */
@media (max-width: 860px) {
  .cat .cat-nav__cta { display: none; }
  .cat-nav__links a { white-space: nowrap; font-size: 0.84rem; padding: 12px 4px; }
}
@media (max-width: 380px) {
  .cat-nav__links a { font-size: 0.78rem; letter-spacing: -0.01em; }
}

/* ==========================================================================
   GARANTÍA — el bloque que carga la persuasión.
   Va numerado porque una garantía que se lee como lista de viñetas no se
   lee: numerarla obliga a recorrerla.
   ========================================================================== */
.cat-garantia {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(258px, 1fr));
  gap: 16px;
  margin-top: 38px;
}
.cat-gar {
  position: relative;
  padding: 30px 26px 26px;
  border-radius: var(--cat-r);
  background: #fff;
  border: 1px solid var(--cat-linea);
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform 240ms var(--cat-ease), border-color 240ms var(--cat-ease);
}
@media (hover: hover) and (pointer: fine) {
  .cat-gar:hover { transform: translateY(-4px); border-color: rgba(182, 244, 49, 0.7); }
}
.cat-gar__n {
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--cat-lima);
  color: var(--cat-verde);
  display: grid;
  place-items: center;
  font-family: var(--cat-h);
  font-weight: 800;
  font-size: 0.95rem;
}
.cat-gar h3 { font-size: 1.14rem; line-height: 1.25; }
.cat-gar p { font-size: 0.94rem; line-height: 1.7; color: var(--cat-gris); }

/* Las cifras medidas sobre fondo claro necesitan su propio tratamiento:
   el .cat-stat original está pensado para franja oscura. */
.cat-stats--claro .cat-stat {
  background: #fff;
  border: 1px solid var(--cat-linea);
}
.cat-stats--claro .cat-stat strong { color: var(--cat-verde); }
.cat-stats--claro .cat-stat span { color: var(--cat-gris); }

/* Testimonios sobre franja oscura. */
.cat-band .cat-testi {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  color: #fff;
}
.cat-band .cat-testi p { color: rgba(255, 255, 255, 0.9); }
.cat-band .cat-testi__name { color: #fff; }
.cat-band .cat-testi__role { color: rgba(255, 255, 255, 0.62); }
.cat-band .cat-testi__av { background: var(--cat-lima); color: var(--cat-verde); }

/* Caminos sobre franja oscura. */
.cat-band .cat-camino {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
}
.cat-band .cat-camino h3 { color: #fff; }
.cat-band .cat-camino p,
.cat-band .cat-camino ul { color: rgba(255, 255, 255, 0.74); }
.cat-band .cat-camino--destacado {
  background: var(--cat-lima);
  border-color: var(--cat-lima);
}
.cat-band .cat-camino--destacado h3,
.cat-band .cat-camino--destacado p,
.cat-band .cat-camino--destacado ul { color: var(--cat-verde); }
.cat-band .cat-camino--destacado .cat-camino__flag {
  background: var(--cat-verde);
  color: var(--cat-lima);
}

/* ==========================================================================
   BLOQUES DE LA PORTADA
   Añadidos en la segunda revisión: la portada volvió a la estructura
   narrativa del landing principal —dolor, prueba, trabajo, beneficios,
   testimonios, caminos, diferenciales, garantía, cierre—, que es la que
   ya venía funcionando. Todo hereda los tokens --cat-*.
   ========================================================================== */

/* --- barra de prueba social del hero ------------------------------------ */
.cat-sp {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  padding: 10px 20px 10px 16px;
  margin-bottom: 30px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.cat-sp__avs { display: flex; }
.cat-sp__avs span {
  width: 32px; height: 32px;
  display: grid; place-items: center;
  margin-right: -9px;
  border-radius: 50%;
  background: var(--cat-lima);
  color: var(--cat-verde);
  border: 2px solid var(--cat-verde);
  font-family: var(--cat-h); font-weight: 700; font-size: 0.68rem;
}
.cat-sp__stars { color: var(--cat-lima); font-size: 0.8rem; letter-spacing: 0.09em; line-height: 1; }
.cat-sp__txt { font-size: 0.88rem; color: rgba(255, 255, 255, 0.82); margin-top: 3px; }
.cat-sp__txt strong { color: #fff; }
@media (max-width: 560px) {
  .cat-sp { padding: 9px 14px 9px 10px; gap: 10px; }
  .cat-sp__txt { font-size: 0.8rem; }
}

/* --- fila de fricción cero ---------------------------------------------- */
.cat-fric {
  list-style: none;
  display: flex; flex-wrap: wrap; gap: 10px 24px;
  margin: 28px 0 0; padding: 0;
  font-size: 0.88rem;
}
.cat-fric li { display: flex; align-items: center; gap: 8px; color: rgba(255, 255, 255, 0.74); }
/* La palomita se dibuja con una máscara: un SVG por viñeta es peso muerto. */
.cat-fric li::before {
  content: ''; flex: none;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--cat-lima);
  -webkit-mask: var(--cat-check) center/contain no-repeat;
  mask: var(--cat-check) center/contain no-repeat;
}

/* --- el dolor ------------------------------------------------------------ */
.cat-dolor {
  display: grid;
  grid-template-columns: 1.15fr 0.85fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}
@media (max-width: 940px) { .cat-dolor { grid-template-columns: 1fr; } }
.cat-dolor__list { list-style: none; margin: 32px 0 0; padding: 0; }
.cat-dolor__list li {
  position: relative;
  padding: 16px 0 16px 34px;
  border-bottom: 1px solid var(--cat-linea);
  color: var(--cat-tinta);
  line-height: 1.66;
}
.cat-dolor__list li:first-child { border-top: 1px solid var(--cat-linea); }
.cat-dolor__list li::before {
  content: '';
  position: absolute; left: 2px; top: 22px;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--cat-verde);
  -webkit-mask: var(--cat-check) center/contain no-repeat;
  mask: var(--cat-check) center/contain no-repeat;
}
.cat-panel--verde h3 { font-size: 1.5rem; margin-top: 16px; }
.cat-panel--verde .cat-hero__actions { margin-top: 26px; }

/* --- cifras: ahora llevan su nota de procedencia ------------------------ */
.cat-stat em {
  display: block; margin-top: 7px;
  font-style: normal; font-size: 0.78rem; line-height: 1.5;
  color: rgba(255, 255, 255, 0.5);
}
.cat-stats--claro .cat-stat em { color: var(--cat-gris); opacity: 0.8; }

/* --- carrusel de anuncios ------------------------------------------------
   PORTADO TAL CUAL de `styles.css` (#gambit-carousel), que es el que ya
   funcionaba en el landing. Se cambian sólo los dos colores de la flecha
   por los del brandguide (#003D37/#a6fb00 → verde/lima). Todo lo demás
   —marco de teléfono con bisel, cuatro por fila, snap mandatory, flechas
   a los costados dentro del contenedor— es idéntico.

   Lo que yo había inventado fallaba por el relleno: con
   `padding-inline: (100vw - 1240) / 2` los puntos de snap caían fuera del
   paso del botón y el carrusel se quedaba clavado. El del landing usa
   `clamp(24px, 6vw, 80px)`, chico y constante, y por eso nunca falló.
   ------------------------------------------------------------------------ */
.cat-carrusel { position: relative; width: 100%; max-width: 100%; margin-top: 40px; }

.cat-carrusel__track {
  --gap: 28px;
  display: flex;
  gap: var(--gap);
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  padding: 6px clamp(24px, 6vw, 80px) 14px;
  margin: 0;
  scrollbar-width: none;
}
.cat-carrusel__track::-webkit-scrollbar { height: 0; }

.cat-fono {
  flex: 0 0 auto;
  width: clamp(230px, calc((100% - (var(--gap) * 3)) / 4), 310px);
  background: #111;
  border-radius: 34px;
  padding: 10px;
  border: 6px solid #2b2b2b;
  box-shadow: 0 18px 45px rgba(0, 0, 0, 0.18);
  scroll-snap-align: start;
}
.cat-fono__pantalla {
  position: relative;
  width: 100%;
  aspect-ratio: 9 / 16;
  border-radius: 26px;
  overflow: hidden;
  background: #000;
}
.cat-fono__pantalla video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 26px;
  display: block;
}

@media (max-width: 1024px) {
  .cat-fono {
    width: clamp(230px, calc((100% - (var(--gap) * 1)) / 2), 320px);
    scroll-snap-align: center;
  }
}
@media (max-width: 640px) {
  .cat-carrusel__track { --gap: 16px; padding: 6px 52px 14px; }
  .cat-fono { width: min(78vw, 320px); scroll-snap-align: center; }
}

.cat-carrusel__nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  width: 46px;
  height: 46px;
  border: none;
  border-radius: 999px;
  background: var(--cat-lima);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.22);
  transition: transform 0.12s ease, background 0.12s ease, opacity 0.12s ease;
  user-select: none;
}
.cat-carrusel__nav svg { width: 28px; height: 28px; display: block; }
.cat-carrusel__nav svg path {
  fill: none;
  stroke: var(--cat-verde);
  stroke-width: 8;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.cat-carrusel__nav:hover,
.cat-carrusel__nav:active {
  background: var(--cat-verde);
  transform: translateY(-50%) scale(1.04);
}
.cat-carrusel__nav:hover svg path,
.cat-carrusel__nav:active svg path { stroke: var(--cat-lima); }
.cat-carrusel__nav:disabled {
  opacity: 0.35;
  cursor: not-allowed;
  transform: translateY(-50%);
}
.cat-carrusel__nav--prev { left: 6px; }
.cat-carrusel__nav--next { right: 6px; }

/* --- propuestas de valor ------------------------------------------------- */
.cat-vp {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(26px, 4vw, 54px);
  align-items: center;
  padding-block: clamp(30px, 4vw, 46px);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.cat-vp:first-of-type { border-top: 0; }
.cat-vp--flip .cat-vp__txt { order: 2; }
@media (max-width: 940px) {
  .cat-vp { grid-template-columns: 1fr; }
  .cat-vp--flip .cat-vp__txt { order: 0; }
}
.cat-vp__n {
  display: inline-block;
  font-family: var(--cat-h); font-weight: 800; font-size: 0.82rem;
  letter-spacing: 0.12em;
  color: var(--cat-lima);
  margin-bottom: 12px;
}
.cat-vp__txt h3 { font-size: clamp(1.5rem, 2.5vw, 2.1rem); color: #fff; }
.cat-vp__txt > p { margin-top: 18px; color: rgba(255, 255, 255, 0.76); line-height: 1.75; }
.cat-vp__txt ul { list-style: none; margin: 22px 0 26px; padding: 0; }
.cat-vp__txt li {
  position: relative;
  padding: 8px 0 8px 28px;
  font-size: 0.95rem; line-height: 1.62;
  color: rgba(255, 255, 255, 0.8);
}
.cat-vp__txt li::before {
  content: '';
  position: absolute; left: 0; top: 15px;
  width: 14px; height: 14px; border-radius: 50%;
  background: var(--cat-lima);
  -webkit-mask: var(--cat-check) center/contain no-repeat;
  mask: var(--cat-check) center/contain no-repeat;
}
.cat-vp__viz {
  padding: clamp(26px, 3vw, 38px);
  border-radius: var(--cat-r-lg);
  background:
    radial-gradient(120% 90% at 80% 8%, rgba(182, 244, 49, 0.2), transparent 62%),
    linear-gradient(155deg, rgba(255, 255, 255, 0.09), rgba(255, 255, 255, 0.02));
  border: 1px solid rgba(255, 255, 255, 0.14);
}
.cat-vp__viz-tag {
  display: block;
  font-family: var(--cat-h); font-weight: 800; font-size: 1.16rem; color: #fff;
}
.cat-vp__viz-sub {
  display: block; margin-top: 6px;
  font-size: 0.85rem; color: var(--cat-lima); letter-spacing: 0.02em;
}
.cat-vp__kpis { display: grid; gap: 14px; margin-top: 26px; }
.cat-vp__kpis > div {
  display: flex; align-items: baseline; gap: 14px;
  padding-top: 14px;
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.cat-vp__kpis strong {
  font-family: var(--cat-h); font-weight: 800; font-size: 1.7rem;
  color: var(--cat-lima); line-height: 1; min-width: 76px;
}
.cat-vp__kpis span { font-size: 0.88rem; color: rgba(255, 255, 255, 0.74); }

/* --- diferenciales ------------------------------------------------------- */
.cat-difs {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 16px;
  margin-top: 40px;
}
.cat-dif {
  padding: 28px;
  border-radius: var(--cat-r);
  background: #fff;
  border: 1px solid var(--cat-linea);
  border-top: 3px solid var(--cat-lima);
  transition: transform 220ms var(--cat-ease), box-shadow 220ms var(--cat-ease);
}
@media (hover: hover) and (pointer: fine) {
  .cat-dif:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(10, 60, 45, 0.09); }
}
.cat-dif h3 { font-size: 1.12rem; color: var(--cat-verde); line-height: 1.24; }
.cat-dif p { margin-top: 12px; font-size: 0.94rem; color: var(--cat-gris); line-height: 1.7; }

/* --- la promesa y la nota de cada camino -------------------------------- */
.cat-camino__promesa { font-weight: 600; color: var(--cat-verde) !important; font-size: 1.02rem !important; }
.cat-band .cat-camino__promesa { color: var(--cat-lima) !important; }
.cat-band .cat-camino--destacado .cat-camino__promesa { color: var(--cat-verde) !important; }
.cat-camino__nota {
  margin-top: 16px !important; padding-top: 14px;
  border-top: 1px dashed var(--cat-linea-fuerte);
  font-size: 0.86rem !important;
}
.cat-band .cat-camino__nota { border-top-color: rgba(255, 255, 255, 0.18); }
.cat-band .cat-camino--destacado .cat-camino__nota { border-top-color: rgba(10, 60, 45, 0.24); }

/* --- el beneficio que encabeza cada servicio ---------------------------- */
.cat-svc__ben {
  margin-top: 10px;
  font-family: var(--cat-h);
  font-weight: 700;
  font-size: 1.02rem;
  line-height: 1.36;
  color: var(--cat-verde);
}
.cat-svc__que { margin-top: 10px; }

/* --- franja lima suave: el tercer tono, para no encadenar dos claros ---- */
.cat-sec--lima { background: var(--cat-lima-suave); }
.cat-sec--lima .cat-gar { background: #fff; }

/* Seis cifras en seis columnas quedan tan estrechas que cada etiqueta se
   parte en tres lineas. Tres columnas dan dos filas exactas y cero celdas
   muertas, que es la misma regla que ya sigue el bento de servicios. */
@media (min-width: 900px) {
  .cat-stats { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 560px) and (max-width: 899px) {
  .cat-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 559px) {
  .cat-stats { grid-template-columns: 1fr; }
}

/* La barra de navegación es fija: sin esto, un salto a #trabajo o a
   #garantia deja el titular escondido detrás de la píldora. */
.cat [id] { scroll-margin-top: 108px; }

/* Un punto de la garantía todavía sin definir. Se ve distinto a propósito:
   nadie debe poder mandarle esta página a un prospecto sin notarlo. */
.cat-gar--pend {
  border: 1.5px dashed #C48A12 !important;
  background: #FFF8E8 !important;
}
.cat-gar--pend .cat-gar__n { background: #C48A12; color: #fff; }
.cat-gar--pend p { color: #7A5A10; }
.cat-gar__aviso {
  display: inline-block;
  margin-top: 14px;
  padding: 5px 11px;
  border-radius: 999px;
  background: #C48A12;
  color: #fff;
  font-family: var(--cat-h);
  font-weight: 700;
  font-size: 0.72rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}