/* ============================================================
   TEIMA Lab — Identidad visual revisada
   Editorial · Premium · Multisectorial · Tecnología tranquila
   ============================================================ */

/* ── Variables ──────────────────────────────────────────── */
:root {
  /* ── Fondos — sistema ivory editorial ── */
  --bg-main:        #F7F2EA;
  --bg-secondary:   #EFE9DF;
  --bg-card:        #FBFAF7;
  --bg-dark:        #111827;

  /* ── Texto ── */
  --text-main:      #111827;
  --text-secondary: #4B5563;
  --text-muted:     #9CA3AF;

  /* ── Marca — violet profundo + gold sobrio ── */
  --purple:         #4B2E83;
  --purple-dark:    #3A2266;
  --purple-light:   rgba(75,46,131,.08);
  --gold:           #B9952E;
  --gold-soft:      #E8D8A8;
  --gold-pale:      rgba(185,149,46,.10);
  --olive:          #6B7A3E;
  --olive-pale:     rgba(107,122,62,.10);

  /* ── Tokens de marca v2 (aliases premium) ── */
  --ink:            #111827;
  --deep:           #172033;

  /* ── Tokens TEIMA brand system ── */
  --teima-ink:        #111827;
  --teima-deep:       #172033;
  --teima-violet:     #4B2E83;
  --teima-gold:       #B9952E;
  --teima-gold-soft:  #E8D8A8;
  --petrol:         #0F4C5C;
  --violet:         #4B2E83;
  --violet-soft:    #F3EEF9;
  --ivory:          #F7F2EA;
  --paper:          #FBFAF7;
  --line:           #D8D2C4;
  --muted:          #6B7280;

  /* ── Bordes y sombras ── */
  --border:         #DDD0BF;
  --border-strong:  #C4B49E;
  --shadow-xs:      0 1px 3px rgba(17,24,39,.05);
  --shadow-sm:      0 2px 10px rgba(17,24,39,.07);
  --shadow-md:      0 6px 24px rgba(17,24,39,.09);
  --shadow-lg:      0 12px 40px rgba(17,24,39,.12);

  /* ── Forma ── */
  --radius-sm:      6px;
  --radius-md:      12px;
  --radius-lg:      18px;
  --radius-xl:      28px;

  /* ── Sistema ── */
  --font-base:      "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
  --max-width:      1400px;
  --t:              .22s ease;

  /* ── Layout ── */
  --header-height:  72px;
}

/* ── Reset ──────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: var(--header-height); font-size: 16px; }
body {
  font-family: var(--font-base);
  background: var(--bg-main);
  color: var(--text-main);
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; }
a  { color: inherit; text-decoration: none; }

/* ── Layout ─────────────────────────────────────────────── */
.container {
  width: 100%;
  max-width: var(--max-width);
  margin-inline: auto;
  padding-inline: clamp(20px, 4vw, 56px);
}

/* ── Utilidades tipográficas ────────────────────────────── */
.tag {
  display: inline-flex;
  align-items: center;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: #8a6200;
  background: rgba(201,162,39,.13);
  border: 1px solid rgba(201,162,39,.32);
  border-radius: 5px;
  padding: 4px 12px;
  margin-bottom: 20px;
}

.tag--light {
  color: var(--gold-soft);
  background: rgba(233,216,166,.1);
  border-color: rgba(233,216,166,.25);
}

.section-title {
  font-size: clamp(1.65rem, 3vw, 2.25rem);
  font-weight: 700;
  color: var(--text-main);
  line-height: 1.22;
  letter-spacing: -.025em;
  margin-bottom: 16px;
  /* Evitar cortes de palabras feos */
  overflow-wrap: break-word;
  word-break: normal;
  hyphens: auto;
  -webkit-hyphens: auto;
}

.section-lead {
  font-size: 1.02rem;
  color: var(--text-secondary);
  max-width: 600px;
  margin-bottom: 52px;
  line-height: 1.75;
  overflow-wrap: break-word;
  word-break: normal;
}

/* Separador decorativo dorado */
.gold-rule {
  display: block;
  width: 48px;
  height: 2px;
  background: linear-gradient(90deg, var(--gold), transparent);
  border: none;
  margin: 16px 0 28px;
}

/* ── Botones ─────────────────────────────────────────────── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-base);
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: .01em;
  border-radius: var(--radius-sm);
  padding: 11px 22px;
  cursor: pointer;
  border: 1.5px solid transparent;
  transition: background var(--t), color var(--t), border-color var(--t),
              box-shadow var(--t), transform var(--t);
  white-space: nowrap;
}
.btn:active { transform: scale(.97); }
.btn:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 3px;
}

/* Primario — violeta profundo */
.btn-primary {
  background: var(--purple);
  color: #fff;
  border-color: var(--purple);
}
.btn-primary:hover {
  background: var(--purple-dark);
  border-color: var(--purple-dark);
  box-shadow: 0 4px 18px rgba(61,37,102,.28);
}

/* Secundario — contorno dorado */
.btn-secondary {
  background: transparent;
  color: var(--text-main);
  border-color: var(--border-strong);
}
.btn-secondary:hover {
  background: var(--bg-secondary);
  border-color: var(--gold);
  color: var(--purple-dark);
}

/* Acento — dorado */
.btn-accent {
  background: var(--gold);
  color: var(--text-main);
  border-color: var(--gold);
}
.btn-accent:hover {
  background: #b8911f;
  border-color: #b8911f;
  box-shadow: 0 4px 18px rgba(201,162,39,.3);
}

/* Tamaño grande */
.btn-lg { padding: 14px 28px; font-size: .95rem; border-radius: var(--radius-md); }

/* ── Header ─────────────────────────────────────────────── */
.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(247,242,234,.96);
  backdrop-filter: blur(18px) saturate(1.4);
  -webkit-backdrop-filter: blur(18px) saturate(1.4);
  border-bottom: 1px solid var(--border);
  transition: box-shadow var(--t);
}
.site-header.scrolled {
  box-shadow: 0 2px 20px rgba(17,24,39,.08);
}

.nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: var(--header-height, 72px);
  gap: 28px;
}


.nav-links {
  display: flex;
  list-style: none;
  gap: 30px;
}
.nav-links a {
  font-size: .86rem;
  font-weight: 500;
  color: var(--text-secondary);
  transition: color var(--t);
  letter-spacing: .01em;
}
.nav-links a:hover { color: var(--purple); }

.nav-cta { flex-shrink: 0; }

/* ── Selector de idioma ──────────────────────────────── */
.lang-switcher {
  display: flex;
  gap: 1px;
  background: var(--border, #DDD0BF);
  border-radius: 8px;
  padding: 2px;
  flex-shrink: 0;
}
.lang-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px 9px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  color: var(--text-secondary, #4B5563);
  border-radius: 6px;
  line-height: 1;
  transition: background 120ms, color 120ms, box-shadow 120ms;
}
.lang-btn[aria-pressed="true"] {
  background: var(--bg-card, #FBFAF7);
  color: var(--text-main, #111827);
  box-shadow: 0 1px 3px rgba(17,24,39,.10);
}
.lang-btn:hover:not([aria-pressed="true"]) {
  color: var(--text-main, #111827);
}
@media (max-width: 720px) {
  .lang-switcher { display: none; }
  .nav-mobile-lang { display: flex !important; }
}

/* Hamburguer */
.nav-toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 6px;
  flex-direction: column;
  gap: 5px;
}
.nav-toggle span {
  display: block;
  width: 22px;
  height: 1.5px;
  background: var(--text-main);
  border-radius: 2px;
  transition: transform var(--t), opacity var(--t);
}

/* Botón de tema */
.theme-toggle {
  background: transparent;
  border: 1px solid var(--border);
  border-radius: 50%;
  width: 34px;
  height: 34px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .85rem;
  flex-shrink: 0;
  transition: border-color var(--t), background var(--t);
}
.theme-toggle:hover {
  border-color: var(--gold);
  background: var(--gold-pale);
}

/* ── Hero — editorial, no SaaS ───────────────────────────── */
.hero {
  position: relative;
  padding: clamp(4rem, 8vw, 6.5rem) 0 clamp(3.5rem, 7vw, 5.5rem);
  min-height: clamp(520px, 72vh, 720px);
  display: flex;
  align-items: center;
  background: var(--bg-main);
  overflow: hidden;
}


/* Decoración de fondo: gradiente asimétrico desde esquina superior izquierda */
.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 65% 60% at -5% -15%,
      rgba(91,58,142,.09) 0%, transparent 65%),
    radial-gradient(ellipse 45% 45% at 95% 105%,
      rgba(201,162,39,.07) 0%, transparent 68%);
  pointer-events: none;
}

/* Ornamento lineal: ancla izquierda alineada con el texto */
.hero::after {
  content: "";
  position: absolute;
  top: 0;
  left: clamp(20px, 4vw, 56px);
  width: 1px;
  height: 72px;
  background: linear-gradient(to bottom, var(--gold), transparent);
}

.hero-eyebrow {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .15em;
  color: var(--gold);
  opacity: .9;
  margin-bottom: 20px;
  padding: 0;
  background: none;
  border: none;
  border-radius: 0;
}

.hero-title {
  font-size: clamp(2.6rem, 6vw, 4.4rem);
  font-weight: 900;
  color: var(--text-main);
  line-height: 1.04;
  letter-spacing: -.05em;
  max-width: 680px;
  margin: 0 0 20px;
}
.hero-title span {
  display: block;
  color: #172033;
}

.hero-claim {
  font-size: clamp(1rem, 1.6vw, 1.15rem);
  font-style: italic;
  font-weight: 500;
  color: var(--purple);
  letter-spacing: -.01em;
  margin: 0 0 28px;
  line-height: 1.5;
}
.hero-claim strong {
  font-style: normal;
  font-weight: 800;
  color: var(--purple);
}

.hero-subtitle {
  font-size: clamp(.98rem, 1.8vw, 1.12rem);
  color: var(--text-secondary);
  max-width: 520px;
  margin: 0 0 44px;
  line-height: 1.72;
}

.hero-actions {
  display: flex;
  gap: 14px;
  justify-content: flex-start;
  flex-wrap: wrap;
}

.hero-microcopy {
  margin-top: 24px;
  font-size: .75rem;
  color: var(--text-muted);
  letter-spacing: .03em;
  text-align: left;
}

/* ══════════════════════════════════════════════════════════
   SISTEMA DE TARJETAS PREMIUM — TEIMA Lab
   Problema · Solución · Recursos
   ══════════════════════════════════════════════════════════ */

/* ── Sección problema ────────────────────────────────────── */
.section-problema {
  padding: clamp(80px, 10vw, 112px) 0;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.problema-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px;
  margin-top: 16px;
}

.problema-card {
  background: linear-gradient(155deg, #FAF7F0 0%, #F2EAD9 100%);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 36px 30px 32px;
  position: relative;
  overflow: hidden;
  transition: box-shadow var(--t), border-left-color var(--t), transform var(--t);
}
.problema-card:hover {
  box-shadow: 0 6px 28px rgba(28,18,56,.08);
  border-left-color: var(--gold);
  transform: translateY(-2px);
}

/* Número grande como fondo tipográfico */
.pc-num {
  position: absolute;
  top: 14px;
  right: 20px;
  font-size: 3.2rem;
  font-weight: 800;
  color: var(--border-strong);
  line-height: 1;
  letter-spacing: -.05em;
  user-select: none;
  pointer-events: none;
  opacity: .32;
}

/* Icono SVG lineal */
.pc-icon {
  display: block;
  width: 26px;
  height: 26px;
  color: var(--olive);
  margin-bottom: 20px;
}

.problema-card h3 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 12px;
  letter-spacing: -.02em;
  line-height: 1.3;
  padding-right: 30px; /* evita solapar con .pc-num */
}

.problema-card p {
  font-size: .9rem;
  color: var(--text-secondary);
  line-height: 1.72;
  margin: 0;
}

@media (max-width: 760px) {
  .problema-grid { grid-template-columns: 1fr; gap: 16px; }
  .pc-num { font-size: 2.4rem; }
}

/* ── Sección solución ────────────────────────────────────── */
.section-solucion {
  padding: clamp(80px, 10vw, 112px) 0;
  background: var(--bg-secondary);
}

.incluye-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 16px;
}

.incluye-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-top: 2.5px solid var(--purple);
  border-radius: var(--radius-md);
  padding: 28px 26px;
  text-align: left;
  position: relative;
  transition: box-shadow var(--t), transform var(--t);
}
/* Alternancia de acento: pares en dorado */
.incluye-card:nth-child(even) { border-top-color: var(--gold); }
.incluye-card:hover {
  box-shadow: 0 6px 24px rgba(91,58,142,.10);
  transform: translateY(-3px);
}

/* Cabecera de tarjeta: icono + número */
.ic-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: 16px;
}

.ic-icon {
  display: block;
  width: 24px;
  height: 24px;
  color: var(--purple);
  flex-shrink: 0;
}
/* Pares en dorado coherente con borde */
.incluye-card:nth-child(even) .ic-icon { color: var(--gold); }

.ic-num {
  font-size: .68rem;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: .1em;
  line-height: 1;
  user-select: none;
  margin-top: 2px;
}

.incluye-card h4 {
  font-size: .97rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 8px;
  letter-spacing: -.015em;
  line-height: 1.3;
}

.incluye-card p {
  font-size: .87rem;
  color: var(--text-secondary);
  line-height: 1.65;
  margin: 0;
}

@media (max-width: 820px) {
  .incluye-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 500px) {
  .incluye-grid { grid-template-columns: 1fr; gap: 12px; }
}

/* ── Sección producto ────────────────────────────────────── */
.section-producto {
  padding: 88px 0;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.producto-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: start;
}

.producto-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--gold);
  background: var(--gold-pale);
  border: 1px solid rgba(201,162,39,.28);
  border-radius: 99px;
  padding: 4px 14px;
  margin-bottom: 18px;
}

.producto-title {
  font-size: clamp(1.65rem, 3vw, 2.1rem);
  font-weight: 800;
  color: var(--text-main);
  margin-bottom: 10px;
  line-height: 1.18;
  letter-spacing: -.025em;
}

.producto-subtitle {
  font-size: .95rem;
  color: var(--text-secondary);
  margin-bottom: 28px;
  line-height: 1.65;
}

.producto-incluye-list {
  list-style: none;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 20px;
  margin-bottom: 36px;
  padding: 22px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
}
.producto-incluye-list li {
  font-size: .86rem;
  color: var(--text-main);
  display: flex;
  align-items: flex-start;
  gap: 9px;
}
.producto-incluye-list li::before {
  content: "—";
  color: var(--gold);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}

.precio-block {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 28px;
  flex-wrap: wrap;
}

.precio-launch {
  font-size: 2rem;
  font-weight: 800;
  color: var(--purple-dark);
  letter-spacing: -.04em;
}

.precio-normal {
  font-size: 1rem;
  color: var(--text-muted);
  text-decoration: line-through;
}

.precio-badge {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gold);
  background: var(--gold-pale);
  border: 1px solid rgba(201,162,39,.3);
  border-radius: 99px;
  padding: 3px 11px;
}

.producto-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.producto-nota {
  font-size: .78rem;
  color: var(--text-muted);
  font-style: italic;
  letter-spacing: .01em;
}

/* Tarjeta visual del producto — editorial, fondo violeta profundo */
.producto-card-visual {
  background: linear-gradient(150deg, var(--purple-dark) 0%, var(--purple) 100%);
  border-radius: var(--radius-xl);
  padding: 44px 38px;
  color: #fff;
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}
/* Ornamento de fondo: círculo difuminado dorado */
.producto-card-visual::before {
  content: "";
  position: absolute;
  bottom: -60px; right: -60px;
  width: 240px; height: 240px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,162,39,.18) 0%, transparent 70%);
}
/* Línea superior dorada decorativa */
.producto-card-visual::after {
  content: "";
  position: absolute;
  top: 0; left: 38px; right: 38px;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.pcv-eyebrow {
  font-size: .68rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--gold-soft);
  margin-bottom: 14px;
  opacity: .8;
}

.pcv-title {
  font-size: 1.35rem;
  font-weight: 800;
  margin-bottom: 10px;
  line-height: 1.22;
  letter-spacing: -.02em;
}

.pcv-desc {
  font-size: .88rem;
  opacity: .7;
  margin-bottom: 30px;
  line-height: 1.55;
}

.pcv-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 34px;
}

.pcv-pill {
  font-size: .72rem;
  font-weight: 500;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: 99px;
  padding: 3px 11px;
  color: #fff;
  letter-spacing: .02em;
}

.pcv-price-row {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 26px;
}

.pcv-price-main {
  font-size: 2.3rem;
  font-weight: 800;
  color: var(--gold-soft);
  letter-spacing: -.04em;
}

.pcv-price-old {
  font-size: .9rem;
  opacity: .45;
  text-decoration: line-through;
}

.pcv-price-label {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-main);
  background: var(--gold-soft);
  border-radius: 99px;
  padding: 2px 10px;
}

/* ── Sección Método 5C — editorial, fondo oscuro cálido ─── */
.section-metodo {
  padding: 88px 0;
  background: var(--text-main);
  position: relative;
  overflow: hidden;
}

/* Fondo decorativo sutil */
.section-metodo::before {
  content: "";
  position: absolute;
  top: -80px; left: 50%;
  transform: translateX(-50%);
  width: 600px; height: 600px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(91,58,142,.18) 0%, transparent 65%);
  pointer-events: none;
}

.section-metodo .section-title { color: #F6F2EA; }
.section-metodo .section-lead  { color: rgba(246,242,234,.55); }

.metodo-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(185px, 1fr));
  gap: 18px;
  margin-top: 8px;
}

.metodo-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-md);
  padding: 30px 24px;
  transition: background var(--t), transform var(--t), border-color var(--t);
  position: relative;
}
.metodo-card:hover {
  background: rgba(91,58,142,.18);
  border-color: rgba(201,162,39,.3);
  transform: translateY(-4px);
}

/* Número dorado elegante */
.metodo-number {
  font-size: 2.4rem;
  font-weight: 800;
  font-style: italic;
  color: var(--gold);
  opacity: .5;
  line-height: 1;
  margin-bottom: 14px;
  letter-spacing: -.04em;
}
.metodo-card:hover .metodo-number { opacity: .9; }

.metodo-card h3 {
  font-size: 1.05rem;
  font-weight: 700;
  color: #F6F2EA;
  margin-bottom: 8px;
  letter-spacing: -.01em;
}

.metodo-card p {
  font-size: .84rem;
  color: rgba(246,242,234,.5);
  line-height: 1.6;
}

/* ── Para quién es ───────────────────────────────────────── */
/* .section-quienes reemplazada por .section-audience */

/* .section-proximos eliminada — reemplazada por .section-next-verticals */

.proximo-card {
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 30px 26px;
  position: relative;
  background: var(--bg-main);
  transition: border-color var(--t), background var(--t);
}
.proximo-card:hover {
  border-color: var(--gold);
  background: var(--bg-secondary);
}

.proximo-soon {
  position: absolute;
  top: 18px; right: 18px;
  font-size: .67rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--text-muted);
  background: var(--border);
  border-radius: 99px;
  padding: 3px 10px;
}

.proximo-card h3 {
  font-size: .97rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 10px;
  padding-right: 72px;
  letter-spacing: -.01em;
  line-height: 1.35;
}

.proximo-card p {
  font-size: .85rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* ── FAQ ─────────────────────────────────────────────────── */
.section-faq {
  padding: 88px 0;
  background: var(--bg-main);
}

.faq-list {
  max-width: 700px;
  margin: 8px auto 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.faq-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: border-color var(--t);
}
.faq-item.open { border-color: rgba(91,58,142,.3); }

.faq-question {
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  text-align: left;
  background: none;
  border: none;
  padding: 20px 24px;
  font-family: var(--font-base);
  font-size: .93rem;
  font-weight: 600;
  color: var(--text-main);
  cursor: pointer;
  transition: background var(--t);
  letter-spacing: -.01em;
}
.faq-question:hover { background: var(--bg-secondary); }

.faq-chevron {
  flex-shrink: 0;
  width: 18px; height: 18px;
  color: var(--purple);
  transition: transform var(--t);
}

.faq-answer {
  max-height: 0;
  overflow: hidden;
  transition: max-height .32s ease, padding .32s ease;
  padding: 0 24px;
}
.faq-answer p {
  font-size: .88rem;
  color: var(--text-secondary);
  padding-bottom: 22px;
  line-height: 1.7;
}

.faq-item.open .faq-chevron  { transform: rotate(180deg); }
.faq-item.open .faq-answer   { max-height: 400px; }

/* ── Footer ──────────────────────────────────────────────── */
.site-footer {
  background: var(--bg-dark);
  color: rgba(246,242,234,.45);
  padding: 48px 0;
  text-align: center;
  border-top: 1px solid rgba(255,255,255,.06);
}

.footer-logo {
  /* Solo espacio — el nuevo tl-brand gestiona sus propios colores */
  margin-bottom: 10px;
  display: inline-flex;  /* override del block por defecto de <a> */
}
/* Neutralizar herencia de color/italic del footer sobre el logo */
.footer-logo span {
  font-style: normal;
}

.footer-note {
  font-size: .8rem;
  max-width: 500px;
  margin-inline: auto;
  line-height: 1.65;
}

/* Contenedor del footer — centra el bloque pero permite alinear columnas */
.site-footer .container {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.footer-links {
  display: flex;
  justify-content: center;
  gap: 26px;
  list-style: none;
  margin-top: 26px;
}
.footer-links a {
  font-size: .8rem;
  color: rgba(246,242,234,.3);
  transition: color var(--t);
}
.footer-links a:hover { color: var(--gold-soft); }

.footer-social-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

/* Línea dorada decorativa en footer */
.footer-divider {
  width: 40px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
  margin: 24px auto 0;
  opacity: .4;
}

/* ── Toast ───────────────────────────────────────────────── */
.toast {
  position: fixed;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%) translateY(80px);
  background: var(--purple-dark);
  color: #F6F2EA;
  border: 1px solid rgba(201,162,39,.25);
  border-radius: var(--radius-md);
  padding: 16px 28px;
  font-size: .88rem;
  font-weight: 500;
  box-shadow: 0 8px 32px rgba(0,0,0,.22);
  z-index: 9999;
  max-width: 440px;
  text-align: center;
  transition: transform .35s cubic-bezier(.34,1.56,.64,1), opacity .3s ease;
  opacity: 0;
  pointer-events: none;
}
.toast.show {
  transform: translateX(-50%) translateY(0);
  opacity: 1;
  pointer-events: auto;
}

/* ── Modo oscuro — cálido ─────────────────────────────────── */
body.dark-mode {
  --bg-main:        #1C1410;
  --bg-secondary:   #251C14;
  --bg-card:        #2D2218;
  --text-main:      #F0E8DA;
  --text-secondary: #A89880;
  --text-muted:     #6E5E50;
  --border:         #3E3026;
  --border-strong:  #574234;
  --shadow-xs:      0 1px 3px rgba(0,0,0,.25);
  --shadow-sm:      0 2px 10px rgba(0,0,0,.3);
  --shadow-md:      0 6px 24px rgba(0,0,0,.36);
}

body.dark-mode .site-header {
  background: rgba(28,20,16,.93);
  border-bottom-color: var(--border);
}

body.dark-mode .hero {
  background: var(--bg-main);
}
body.dark-mode .hero::before {
  background:
    radial-gradient(ellipse 70% 55% at 50% -10%,
      rgba(91,58,142,.14) 0%, transparent 70%),
    radial-gradient(ellipse 40% 40% at 80% 110%,
      rgba(201,162,39,.07) 0%, transparent 70%);
}

body.dark-mode .section-metodo {
  background: #130F0B;
}

/* .section-sectores eliminada — reemplazada por .section-next-verticals */

/* ════════════════════════════════════════════════════════════════════
   PRÓXIMAS VERTICALES — section-next-verticals
════════════════════════════════════════════════════════════════════ */

.section-next-verticals {
  padding: clamp(88px, 10vw, 132px) 0;
  background:
    radial-gradient(circle at 100% 0%, rgba(91, 58, 145, 0.07), transparent 34%),
    linear-gradient(180deg, #f3eee5 0%, #f8fafc 100%);
}

.section-next-verticals__inner {
  width: min(100% - 48px, 1320px);
  margin-inline: auto;
}

.next-verticals-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.75fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: end;
  margin-bottom: clamp(34px, 5vw, 60px);
}

.next-verticals-heading__title {
  margin: 0;
  max-width: 760px;
  font-size: clamp(2.4rem, 4.8vw, 4.8rem);
  line-height: 0.96;
  letter-spacing: -0.07em;
  color: #172033;
}

.next-verticals-heading__lead {
  margin: 0;
  color: #64748b;
  font-size: 1.05rem;
  line-height: 1.7;
}

.next-verticals-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}

.next-vertical-card {
  display: flex;
  flex-direction: column;
  padding: 28px;
  border-radius: 28px;
  background:
    linear-gradient(180deg, rgba(255,255,255,0.94), rgba(255,255,255,0.86));
  border: 1px solid rgba(216, 225, 232, 0.95);
  box-shadow:
    0 22px 64px rgba(23, 32, 51, 0.07),
    0 1px 0 rgba(255,255,255,0.9) inset;
}

.next-vertical-card__status {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 18px;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(199, 163, 58, 0.12);
  border: 1px solid rgba(199, 163, 58, 0.32);
  color: #9b7a16;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.next-vertical-card h3 {
  margin: 0 0 10px;
  color: #172033;
  font-size: 1.55rem;
  line-height: 1;
  letter-spacing: -0.04em;
}

.next-vertical-card__subtitle {
  margin: 0;
  color: #172033;
  font-size: 1rem;
  line-height: 1.45;
  font-weight: 800;
}

.next-vertical-card__text {
  margin: 18px 0 0;
  color: #64748b;
  font-size: 0.96rem;
  line-height: 1.7;
}

.next-vertical-card__features {
  display: grid;
  gap: 8px;
  margin-top: 22px;
  margin-bottom: 28px;
}

.next-vertical-card__features span {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 34px;
  padding: 8px 11px;
  border-radius: 12px;
  background: rgba(91, 58, 145, 0.055);
  border: 1px solid rgba(91, 58, 145, 0.13);
  color: #3d2b5f;
  font-size: 0.86rem;
}

.next-vertical-card__features span::before {
  content: "→";
  color: #5b3a91;
  font-weight: 900;
}

.next-vertical-card__link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: fit-content;
  min-height: 42px;
  margin-top: auto;
  padding: 0 17px;
  border-radius: 999px;
  border: 1px solid rgba(91, 58, 145, 0.28);
  color: #5b3a91;
  background: #ffffff;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 900;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.next-vertical-card__link:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(91, 58, 145, 0.14);
}

@media (max-width: 1020px) {
  .next-verticals-heading {
    grid-template-columns: 1fr;
  }
  .next-verticals-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 640px) {
  .section-next-verticals__inner {
    width: min(100% - 32px, 1320px);
  }
  .next-vertical-card {
    padding: 24px;
    border-radius: 24px;
  }
  .next-vertical-card__link {
    width: 100%;
  }
}

.sector-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 28px 24px;
  position: relative;
  transition: box-shadow var(--t), border-color var(--t), transform var(--t);
}
.sector-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
  transform: translateY(-2px);
}

/* Primera tarjeta (Educación): activa, con distinción visual */
.sector-card--active {
  border-color: rgba(91,58,142,.35);
  background: var(--bg-card);
}
.sector-card--active::after {
  content: "En desarrollo";
  position: absolute;
  top: 16px; right: 16px;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--purple);
  background: var(--purple-light);
  border: 1px solid rgba(91,58,142,.2);
  border-radius: 99px;
  padding: 2px 9px;
}

/* Próximas tarjetas */
.sector-card--soon::after {
  content: "Próximamente";
  position: absolute;
  top: 16px; right: 16px;
  font-size: .62rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 2px 9px;
}

/* Letra inicial decorativa del sector */
.sector-initial {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px; height: 36px;
  border-radius: var(--radius-sm);
  font-size: .78rem;
  font-weight: 800;
  letter-spacing: .05em;
  text-transform: uppercase;
  margin-bottom: 16px;
  background: var(--gold-pale);
  color: var(--gold);
  border: 1px solid rgba(201,162,39,.2);
}
.sector-card--active .sector-initial {
  background: var(--purple-light);
  color: var(--purple);
  border-color: rgba(91,58,142,.2);
}

.sector-card h3 {
  font-size: .95rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 8px;
  padding-right: 70px;
  letter-spacing: -.01em;
}

.sector-card p {
  font-size: .83rem;
  color: var(--text-secondary);
  line-height: 1.58;
}

/* (sección .section-comparativa eliminada en auditoría — legacy, bajo nivel)

/* ── Intro de producto (texto previo a la ficha) ─────────── */
.producto-intro {
  font-size: .9rem;
  color: var(--text-secondary);
  margin-bottom: 24px;
  line-height: 1.65;
  border-left: 2px solid var(--gold);
  padding-left: 16px;
}

/* ── Responsive ──────────────────────────────────────────── */
@media (max-width: 900px) {
  .producto-wrapper { grid-template-columns: 1fr; }
  .producto-card-visual { display: none; }
}

/* Offset para anclas con header sticky */
[id] { scroll-margin-top: var(--header-height); }

@media (max-width: 720px) {
  .nav-links, .nav-cta { display: none; }
  .nav-toggle {
    display: flex;
    margin-left: auto;
  }
  .theme-toggle { display: flex; }

  /* Menú móvil desplegado */
  .nav.mobile-open .nav-links {
    display: flex;
    flex-direction: column;
    position: absolute;
    top: 64px; left: 0; right: 0;
    background: var(--bg-card);
    padding: 20px 28px;
    border-bottom: 1px solid var(--border);
    gap: 18px;
    z-index: 99;
  }
  .nav.mobile-open .nav-cta {
    display: flex;
    position: absolute;
    top: calc(64px + 5 * 46px);
    left: 0; right: 0;
    padding: 0 28px 20px;
    background: var(--bg-card);
    border-bottom: 1px solid var(--border);
    z-index: 99;
  }

  .producto-incluye-list { grid-template-columns: 1fr; }
  .hero {
    padding: clamp(2.5rem, 6vw, 4rem) 0 clamp(2rem, 5vw, 3rem);
    min-height: unset;
    align-items: flex-start;
  }
  .section-title { font-size: 1.55rem; }
}


@media (max-width: 480px) {
  .metodo-grid    { grid-template-columns: 1fr 1fr; }

  .hero-actions   { flex-direction: column; align-items: center; }
  .sectores-grid  { grid-template-columns: 1fr; }
}

/* ============================================================
   PÁGINA DE PRODUCTO — estilos específicos
   producto-feedback-pro-docente.html
   ============================================================ */

/* ── Breadcrumb ──────────────────────────────────────────── */
.breadcrumb {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .75rem;
  color: var(--text-muted);
  margin-bottom: 20px;
  flex-wrap: wrap;
}
.breadcrumb a {
  color: var(--text-muted);
  transition: color var(--t);
}
.breadcrumb a:hover { color: var(--purple); }
.breadcrumb-sep { opacity: .4; }

/* ── Hero de producto ────────────────────────────────────── */
.pph-section {
  padding: 72px 0 80px;
  background: var(--bg-main);
  position: relative;
  overflow: hidden;
}
.pph-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 15% 100%,
      rgba(201,162,39,.06) 0%, transparent 65%),
    radial-gradient(ellipse 50% 45% at 85% 0%,
      rgba(91,58,142,.07) 0%, transparent 65%);
  pointer-events: none;
}

.pph-grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: 64px;
  align-items: start;
}

.pph-collection {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--purple);
  background: var(--purple-light);
  border: 1px solid rgba(91,58,142,.2);
  border-radius: 99px;
  padding: 4px 13px;
  margin-bottom: 16px;
}

.pph-title {
  font-size: clamp(2rem, 4vw, 2.8rem);
  font-weight: 800;
  color: var(--text-main);
  line-height: 1.12;
  letter-spacing: -.035em;
  margin-bottom: 14px;
}

.pph-subtitle {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--purple);
  margin-bottom: 14px;
  letter-spacing: -.01em;
}

.pph-text {
  font-size: .95rem;
  color: var(--text-secondary);
  line-height: 1.72;
  margin-bottom: 30px;
  max-width: 520px;
}

.pph-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .75rem;
  font-weight: 600;
  color: var(--text-muted);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 4px 13px;
  margin-bottom: 20px;
}
.pph-status::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--gold);
  flex-shrink: 0;
}

.pph-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}

.pph-nota {
  font-size: .75rem;
  color: var(--text-muted);
  font-style: italic;
}

/* Visual card del hero de producto */
.pph-visual {
  background: linear-gradient(150deg, var(--purple-dark) 0%, var(--purple) 100%);
  border-radius: var(--radius-xl);
  padding: 40px 34px;
  color: #fff;
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}
.pph-visual::before {
  content: "";
  position: absolute;
  top: -50px; right: -50px;
  width: 200px; height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,162,39,.15) 0%, transparent 70%);
  pointer-events: none;
}
.pph-visual::after {
  content: "";
  position: absolute;
  bottom: 0; left: 34px; right: 34px;
  height: 1px;
  background: linear-gradient(90deg, transparent, rgba(201,162,39,.4), transparent);
}

.pph-visual-eyebrow {
  font-size: .65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--gold-soft);
  opacity: .75;
  margin-bottom: 12px;
}

.pph-visual-title {
  font-size: 1.25rem;
  font-weight: 800;
  line-height: 1.22;
  margin-bottom: 8px;
  letter-spacing: -.02em;
}

.pph-visual-promise {
  font-size: .85rem;
  opacity: .65;
  line-height: 1.55;
  margin-bottom: 24px;
}

.pph-visual-files {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin-bottom: 28px;
}
.pph-visual-files li {
  font-size: .78rem;
  color: rgba(255,255,255,.7);
  display: flex;
  align-items: center;
  gap: 9px;
}
.pph-visual-files li::before {
  content: "›";
  color: var(--gold-soft);
  font-weight: 700;
  font-size: .9rem;
}

.pph-visual-price {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 20px;
}
.pph-visual-price .main  { font-size: 2rem; font-weight: 800; color: var(--gold-soft); letter-spacing: -.04em; }
.pph-visual-price .old   { font-size: .9rem; opacity: .4; text-decoration: line-through; }
.pph-visual-price .badge { font-size: .68rem; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; background: var(--gold-soft); color: var(--text-main); border-radius: 99px; padding: 2px 9px; }

/* ── Sección problema (producto) ─────────────────────────── */
.section-problema-producto {
  padding: 88px 0;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
}

.problema-producto-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 18px;
  margin-top: 8px;
}

.problema-producto-card {
  background: var(--bg-main);
  border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong);
  border-radius: var(--radius-md);
  padding: 22px 20px;
  transition: border-color var(--t), box-shadow var(--t);
}
.problema-producto-card:hover {
  border-left-color: var(--gold);
  box-shadow: var(--shadow-sm);
}
.problema-producto-card p {
  font-size: .88rem;
  color: var(--text-secondary);
  line-height: 1.58;
}

/* ── Logros (qué conseguirás) ────────────────────────────── */
.section-logros {
  padding: 88px 0;
  background: var(--bg-secondary);
}

.logros-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: 18px;
  margin-top: 8px;
}

.logro-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 26px 22px;
  transition: box-shadow var(--t), transform var(--t), border-color var(--t);
}
.logro-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-3px);
  border-color: rgba(91,58,142,.25);
}

.logro-num {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}

.logro-card h4 {
  font-size: .93rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 6px;
  letter-spacing: -.01em;
}

.logro-card p {
  font-size: .82rem;
  color: var(--text-secondary);
  line-height: 1.55;
}

/* ── Archivos incluidos ──────────────────────────────────── */
.section-archivos {
  padding: 88px 0;
  background: var(--bg-main);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.archivos-block {
  background: var(--bg-dark);
  border-radius: var(--radius-xl);
  overflow: hidden;
  box-shadow: var(--shadow-lg);
  max-width: 700px;
  margin: 0 auto;
}

.archivos-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 18px 28px;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.archivos-dots {
  display: flex;
  gap: 6px;
}
.archivos-dots span {
  width: 11px; height: 11px;
  border-radius: 50%;
}
.archivos-dots span:nth-child(1) { background: rgba(255,255,255,.15); }
.archivos-dots span:nth-child(2) { background: rgba(255,255,255,.12); }
.archivos-dots span:nth-child(3) { background: rgba(255,255,255,.09); }

.archivos-path {
  font-size: .75rem;
  font-family: "Courier New", Courier, monospace;
  color: rgba(246,242,234,.35);
  letter-spacing: .02em;
}

.archivos-tree {
  padding: 24px 28px 28px;
}

.archivos-folder-root {
  font-size: .82rem;
  font-family: "Courier New", Courier, monospace;
  color: var(--gold-soft);
  font-weight: 700;
  margin-bottom: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.archivos-list {
  list-style: none;
  padding-left: 20px;
  border-left: 1px solid rgba(255,255,255,.07);
  margin-left: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.archivo-item {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .8rem;
  font-family: "Courier New", Courier, monospace;
  color: rgba(246,242,234,.65);
  padding: 4px 6px;
  border-radius: var(--radius-sm);
  transition: background var(--t), color var(--t);
}
.archivo-item:hover {
  background: rgba(255,255,255,.04);
  color: rgba(246,242,234,.9);
}

.archivo-type {
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .05em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 3px;
  flex-shrink: 0;
}
.archivo-type--pdf  { background: rgba(201,162,39,.18); color: var(--gold-soft); }
.archivo-type--txt  { background: rgba(122,132,80,.2);  color: #B8C47A; }
.archivo-type--docx { background: rgba(91,58,142,.25);  color: #C4ADEA; }
.archivo-type--dir  { background: rgba(255,255,255,.08); color: rgba(246,242,234,.5); }

.archivo-subfolder {
  margin-top: 6px;
  padding-left: 16px;
  border-left: 1px solid rgba(255,255,255,.05);
  margin-left: 8px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.archivo-subfolder-label {
  font-size: .78rem;
  font-family: "Courier New", Courier, monospace;
  color: rgba(201,162,39,.6);
  padding: 3px 6px;
  display: flex;
  align-items: center;
  gap: 8px;
}

.archivos-footer {
  padding: 16px 28px;
  border-top: 1px solid rgba(255,255,255,.05);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
}
.archivos-footer span {
  font-size: .72rem;
  font-family: "Courier New", Courier, monospace;
  color: rgba(246,242,234,.28);
}
.archivos-footer strong {
  font-size: .72rem;
  font-family: "Courier New", Courier, monospace;
  color: var(--gold-soft);
  opacity: .6;
}

/* ── No sustituye al docente ─────────────────────────────── */
.section-docente {
  padding: 88px 0;
  background: var(--bg-secondary);
}

.docente-disclaimer {
  max-width: 680px;
  font-size: .98rem;
  color: var(--text-secondary);
  line-height: 1.72;
  margin-bottom: 40px;
  padding: 24px 28px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-md);
}

.docente-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 16px;
}

.docente-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 22px 20px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  transition: border-color var(--t), box-shadow var(--t);
}
.docente-card:hover {
  border-color: rgba(91,58,142,.25);
  box-shadow: var(--shadow-sm);
}

.docente-icon {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: var(--purple-light);
  border: 1px solid rgba(91,58,142,.18);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: .75rem;
  color: var(--purple);
  font-weight: 700;
}

.docente-card p {
  font-size: .86rem;
  font-weight: 600;
  color: var(--text-main);
  line-height: 1.4;
  letter-spacing: -.01em;
}

/* ── Casos de uso ────────────────────────────────────────── */
.section-usos {
  padding: 88px 0;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.usos-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: 16px;
  margin-top: 8px;
}

.uso-card {
  background: var(--bg-main);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 20px 18px;
  transition: border-color var(--t), box-shadow var(--t), background var(--t);
}
.uso-card:hover {
  border-color: var(--border-strong);
  box-shadow: var(--shadow-sm);
  background: var(--bg-secondary);
}

.uso-card h4 {
  font-size: .88rem;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: -.01em;
  line-height: 1.35;
}

/* ── Etapas educativas ───────────────────────────────────── */
.section-etapas {
  padding: 88px 0;
  background: var(--bg-main);
}

.etapas-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
  margin-top: 8px;
}

.etapa-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  transition: box-shadow var(--t), transform var(--t);
}
.etapa-card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
}

.etapa-header {
  background: var(--purple-dark);
  padding: 16px 20px;
  display: flex;
  align-items: center;
  gap: 12px;
}

.etapa-label {
  font-size: .68rem;
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--gold-soft);
  opacity: .8;
}

.etapa-name {
  font-size: .95rem;
  font-weight: 800;
  color: #F6F2EA;
  letter-spacing: -.01em;
}

.etapa-body {
  padding: 18px 20px;
}

.etapa-items {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 7px;
}
.etapa-items li {
  font-size: .82rem;
  color: var(--text-secondary);
  display: flex;
  align-items: flex-start;
  gap: 8px;
}
.etapa-items li::before {
  content: "—";
  color: var(--gold);
  font-weight: 700;
  flex-shrink: 0;
  margin-top: 1px;
}

/* ── Vista previa del contenido ──────────────────────────── */
.section-preview {
  padding: 88px 0;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
}

.preview-block {
  max-width: 720px;
  margin: 0 auto;
}

.preview-label {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 14px;
  display: block;
}

.preview-prompt {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-left: 3px solid var(--purple);
  border-radius: var(--radius-md);
  padding: 28px 30px;
  font-size: .92rem;
  color: var(--text-main);
  line-height: 1.72;
  font-style: italic;
  margin-bottom: 16px;
  position: relative;
}
.preview-prompt::before {
  content: "\201C";
  position: absolute;
  top: 10px; left: 14px;
  font-size: 2.5rem;
  color: var(--purple);
  opacity: .15;
  font-style: normal;
  line-height: 1;
}

.preview-note {
  font-size: .82rem;
  color: var(--text-muted);
  font-style: italic;
  text-align: center;
  padding: 14px 20px;
  background: var(--bg-main);
  border: 1px dashed var(--border);
  border-radius: var(--radius-md);
}

/* ── Uso responsable ─────────────────────────────────────── */
.section-privacidad {
  padding: 88px 0;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.privacidad-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 16px;
  margin-top: 8px;
}

.privacidad-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 20px 18px;
  background: var(--bg-main);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  transition: border-color var(--t);
}
.privacidad-item:hover { border-color: var(--border-strong); }

.privacidad-icon {
  width: 30px; height: 30px;
  border-radius: 50%;
  background: var(--gold-pale);
  border: 1px solid rgba(201,162,39,.2);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  font-size: .72rem;
  color: var(--gold);
  font-weight: 800;
}

.privacidad-item p {
  font-size: .86rem;
  color: var(--text-secondary);
  line-height: 1.55;
}
.privacidad-item p strong {
  color: var(--text-main);
  display: block;
  font-size: .88rem;
  margin-bottom: 3px;
}

/* ── CTA final ───────────────────────────────────────────── */
.section-cta-final {
  padding: 100px 0;
  background: var(--text-main);
  text-align: center;
  position: relative;
  overflow: hidden;
}
.section-cta-final::before {
  content: "";
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 600px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(91,58,142,.25) 0%, transparent 70%);
  pointer-events: none;
}

.cta-final-eyebrow {
  font-size: .7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--gold);
  margin-bottom: 20px;
  display: block;
}

.cta-final-title {
  font-size: clamp(1.7rem, 3.5vw, 2.5rem);
  font-weight: 800;
  color: #F6F2EA;
  letter-spacing: -.03em;
  line-height: 1.18;
  max-width: 560px;
  margin: 0 auto 16px;
}

.cta-final-text {
  font-size: .97rem;
  color: rgba(246,242,234,.55);
  max-width: 480px;
  margin: 0 auto 36px;
  line-height: 1.7;
}

.cta-final-nota {
  margin-top: 16px;
  font-size: .75rem;
  color: rgba(246,242,234,.3);
  letter-spacing: .02em;
}

/* ── Responsive página producto ──────────────────────────── */
@media (max-width: 900px) {
  .pph-grid { grid-template-columns: 1fr; }
  .pph-visual { display: none; }
}

@media (max-width: 600px) {
  .etapas-grid { grid-template-columns: 1fr; }
  .usos-grid   { grid-template-columns: 1fr 1fr; }
  .pph-actions { flex-direction: column; align-items: flex-start; }
  .archivos-block { border-radius: var(--radius-md); }
}

/* ============================================================
   SECCIÓN MARCO NORMATIVO LOMLOE + GALICIA
   ============================================================ */

/* Badge LOMLOE en el hero de producto */
.lomloe-badge {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .67rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--purple);
  background: var(--purple-light);
  border: 1px solid rgba(91,58,142,.22);
  border-radius: 99px;
  padding: 4px 13px;
  margin-bottom: 10px;
}
.lomloe-badge::before {
  content: "§";
  font-size: .78rem;
  color: var(--purple);
  opacity: .65;
}

/* Sección principal marco normativo */
.section-lomloe {
  padding: 88px 0;
  background: var(--bg-main);
  border-top: 1px solid var(--border);
}

/* Doble columna estatal / autonómico */
.lomloe-marcos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 24px;
  margin-bottom: 52px;
}

.lomloe-marco-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 28px 26px;
  position: relative;
  overflow: hidden;
  transition: box-shadow var(--t), border-color var(--t);
}
.lomloe-marco-card:hover {
  box-shadow: var(--shadow-md);
  border-color: var(--border-strong);
}

.lomloe-marco-card--estatal {
  border-top: 3px solid var(--purple);
}
.lomloe-marco-card--galicia {
  border-top: 3px solid var(--gold);
}

.lomloe-marco-eyebrow {
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 10px;
  display: block;
}
.lomloe-marco-card--estatal .lomloe-marco-eyebrow { color: var(--purple); }
.lomloe-marco-card--galicia  .lomloe-marco-eyebrow { color: var(--gold); }

.lomloe-marco-card h4 {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 12px;
  letter-spacing: -.015em;
  line-height: 1.3;
}

.lomloe-marco-norma {
  font-size: .78rem;
  font-style: italic;
  color: var(--text-muted);
  margin-bottom: 18px;
  display: block;
  border-left: 2px solid var(--border);
  padding-left: 10px;
}

.lomloe-marco-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.lomloe-marco-list li {
  font-size: .84rem;
  color: var(--text-secondary);
  line-height: 1.5;
  display: flex;
  align-items: flex-start;
  gap: 9px;
}
.lomloe-marco-list li::before {
  content: "—";
  flex-shrink: 0;
  font-weight: 700;
  margin-top: 1px;
}
.lomloe-marco-card--estatal .lomloe-marco-list li::before { color: var(--purple); opacity: .5; }
.lomloe-marco-card--galicia  .lomloe-marco-list li::before { color: var(--gold); opacity: .7; }

/* Tabla de competencias clave */
.lomloe-cc-title {
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-secondary);
  margin-bottom: 16px;
  display: block;
}

.lomloe-cc-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 10px;
  margin-bottom: 32px;
}

.lomloe-cc-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  display: flex;
  align-items: flex-start;
  gap: 10px;
  transition: border-color var(--t), background var(--t);
}
.lomloe-cc-item:hover {
  border-color: rgba(91,58,142,.25);
  background: var(--bg-secondary);
}

.lomloe-cc-code {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--purple);
  background: var(--purple-light);
  border: 1px solid rgba(91,58,142,.18);
  border-radius: 4px;
  padding: 2px 6px;
  flex-shrink: 0;
  margin-top: 1px;
}

.lomloe-cc-item p {
  font-size: .8rem;
  color: var(--text-secondary);
  line-height: 1.42;
}

/* Aviso de alineación curricular */
.lomloe-aviso {
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-md);
  padding: 20px 24px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
  max-width: 780px;
}

.lomloe-aviso-icon {
  font-size: 1rem;
  flex-shrink: 0;
  margin-top: 2px;
  opacity: .75;
}

.lomloe-aviso p {
  font-size: .86rem;
  color: var(--text-secondary);
  line-height: 1.6;
}
.lomloe-aviso p strong {
  color: var(--text-main);
  display: block;
  margin-bottom: 4px;
}

/* Borrador provisional — marcador de advertencia */
.lomloe-borrador-note {
  display: inline-block;
  font-size: .72rem;
  font-family: "Courier New", Courier, monospace;
  color: #8B5E12;
  background: rgba(201,162,39,.1);
  border: 1px dashed rgba(201,162,39,.4);
  border-radius: var(--radius-sm);
  padding: 6px 12px;
  margin-top: 14px;
  line-height: 1.5;
}

/* ── Responsive LOMLOE ─────────────────────────────────────── */
@media (max-width: 720px) {
  .lomloe-marcos { grid-template-columns: 1fr; }
}
@media (max-width: 480px) {
  .lomloe-cc-grid { grid-template-columns: 1fr 1fr; }
}


/* ============================================================
   SISTEMA DE IMÁGENES — TEIMA Lab
   image-band · sector-image-card
   Las imágenes son fondos ambientales que no compiten con el texto.
   ============================================================ */

/* ── Hero con imagen de fondo ambiental ─────────────────── */

/* El wrapper absoluto saca la imagen del flujo normal */
.hero__bg {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  background:
    radial-gradient(ellipse 55% 60% at 0% 0%, rgba(91,58,142,.08) 0%, transparent 60%),
    radial-gradient(ellipse 45% 50% at 100% 100%, rgba(185,149,46,.07) 0%, transparent 58%);
}

.hero__bg img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  opacity: .07; /* Más sutil: no compite con el título */
  display: block;
}

/* El contenido queda por encima */
.hero__content {
  position: relative;
  z-index: 1;
}


/* (sección .image-band eliminada en auditoría — relleno decorativo sin valor editorial) */


/* ── Tarjetas de sector con imagen (sector-image-card) ──── */
/*
  Estructura HTML:
  <article class="sector-image-card sector-image-card--active">
    <div class="sector-image-card__media-wrap">
      <img class="sector-image-card__media" src="..." alt="" loading="lazy" decoding="async">
      <div class="sector-image-card__overlay"></div>
    </div>
    <div class="sector-image-card__content">
      <h3>Sector</h3>
      <p>Descripción breve</p>
    </div>
    <!-- badge posicionado por CSS ::after -->
  </article>
*/

.sector-image-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  position: relative;
  transition: box-shadow .4s ease, border-color .4s ease, transform .4s ease;
}

.sector-image-card:hover {
  box-shadow: var(--shadow-lg);
  border-color: var(--border-strong);
  transform: translateY(-4px);
}

/* Media wrapper controla la altura de la imagen */
.sector-image-card__media-wrap {
  position: relative;
  height: 160px;
  overflow: hidden;
}

.sector-image-card__media {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  display: block;
  transition: transform .8s ease;
  will-change: transform;
}

/* Zoom suave en hover */
.sector-image-card:hover .sector-image-card__media {
  transform: scale(1.06);
}

/* Overlay sutil sobre la imagen de la tarjeta */
.sector-image-card__overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(61, 37, 102, 0.08) 0%,
    rgba(36, 28, 21, 0.32) 100%
  );
  transition: opacity .4s ease;
}

.sector-image-card:hover .sector-image-card__overlay {
  opacity: .6;
}

/* Contenido de texto debajo de la imagen */
.sector-image-card__content {
  padding: 22px 22px 26px;
}

.sector-image-card__content h3 {
  font-size: .97rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 7px;
  padding-right: 64px;         /* espacio para el badge */
  letter-spacing: -.01em;
  line-height: 1.3;
}

.sector-image-card__content p {
  font-size: .83rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* Sector activo: borde violeta */
.sector-image-card--active {
  border-color: rgba(91, 58, 142, .35);
}

.sector-image-card--active::after {
  content: "En desarrollo";
  position: absolute;
  top: 14px; right: 14px;
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--purple);
  background: rgba(246, 242, 234, .9);
  border: 1px solid rgba(91, 58, 142, .25);
  border-radius: 99px;
  padding: 3px 10px;
  backdrop-filter: blur(4px);
  z-index: 2;
}

/* Sector próximamente */
.sector-image-card--soon::after {
  content: "Próximamente";
  position: absolute;
  top: 14px; right: 14px;
  font-size: .6rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted);
  background: rgba(246, 242, 234, .88);
  border: 1px solid rgba(196, 180, 158, .5);
  border-radius: 99px;
  padding: 3px 10px;
  backdrop-filter: blur(4px);
  z-index: 2;
}


/* ── Sección CTA con imagen de fondo (versión portada) ─── */
/* Clase distinta de .section-cta-final para no sobreescribir
   los estilos del producto-feedback-pro-docente.html        */
.section-cta-image {
  position: relative;
  overflow: hidden;
}

.section-cta-image__media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  z-index: 0;
  transition: transform 7s ease;
  will-change: transform;
}

.section-cta-image:hover .section-cta-image__media {
  transform: scale(1.03);
}

.section-cta-image__overlay {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(
    160deg,
    rgba(61, 37, 102, 0.88) 0%,
    rgba(36, 28, 21, 0.80) 100%
  );
}

.section-cta-image__content {
  position: relative;
  z-index: 2;
  padding: 96px 0;
  text-align: center;
}

.section-cta-image__content .section-title {
  color: #F6F2EA;
}

.section-cta-image__content .section-lead {
  color: rgba(246, 242, 234, .68);
  margin-inline: auto;
}

.section-cta-image__actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-top: 12px;
}


/* (sección .brand-meaning eliminada en auditoría — interrumpía el flujo de ventas) */


/* ══════════════════════════════════════════════════════════
   TIPOS DE RECURSOS TEIMA LAB — .section-recursos
   ══════════════════════════════════════════════════════════ */

.section-recursos {
  background: var(--bg-secondary);
  padding: clamp(80px, 10vw, 112px) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.recursos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 16px;
}

.recurso-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 28px 26px;
  position: relative;
  transition: box-shadow var(--t), transform var(--t), border-color var(--t);
}
/* Línea de acento en la base, aparece en hover */
.recurso-card::after {
  content: "";
  position: absolute;
  bottom: 0; left: 20px; right: 20px;
  height: 2px;
  background: linear-gradient(90deg, var(--purple), transparent);
  border-radius: 2px;
  opacity: 0;
  transition: opacity var(--t);
}
.recurso-card:hover {
  box-shadow: 0 4px 20px rgba(91,58,142,.10);
  transform: translateY(-2px);
  border-color: var(--border-strong);
}
.recurso-card:hover::after { opacity: 1; }

/* Tarjeta destacada: Kit */
.recurso-card--featured {
  border-top: 2.5px solid var(--gold);
  background: linear-gradient(160deg, var(--bg-card) 0%, #F3ECE0 100%);
}
.recurso-card--featured::after {
  background: linear-gradient(90deg, var(--gold), transparent);
}

/* Cabecera de tarjeta: icono + badge */
.rc-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  margin-bottom: 14px;
}

.rc-icon {
  display: block;
  width: 24px;
  height: 24px;
  color: var(--purple);
  flex-shrink: 0;
}
.recurso-card--featured .rc-icon { color: var(--gold); }

/* Badge de tipo: elegante, compacto */
.recurso-type {
  display: inline-flex;
  align-items: center;
  font-size: .63rem;
  font-weight: 700;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: var(--purple);
  background: var(--purple-light);
  border: 1px solid rgba(91,58,142,.14);
  border-radius: 4px;
  padding: 3px 9px;
  white-space: nowrap;
  flex-shrink: 0;
}
.recurso-card--featured .recurso-type {
  color: #8a6200;
  background: rgba(201,162,39,.12);
  border-color: rgba(201,162,39,.3);
}

.recurso-card h4 {
  font-size: .97rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 8px;
  letter-spacing: -.015em;
  line-height: 1.3;
}

.recurso-card p {
  font-size: .87rem;
  color: var(--text-secondary);
  line-height: 1.65;
  margin: 0;
}

@media (max-width: 900px) {
  .recursos-grid { grid-template-columns: repeat(2, 1fr); gap: 16px; }
}
@media (max-width: 500px) {
  .recursos-grid { grid-template-columns: 1fr; gap: 12px; }
}


/* ══════════════════════════════════════════════════════════
   FORMULARIO DE INTERÉS / BETA — .section-interes
   Captación de interés pre-lanzamiento. Sin backend todavía.
   ══════════════════════════════════════════════════════════ */

.section-interes {
  background: var(--bg-card);
  padding: clamp(4rem, 7vw, 6rem) 0;
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* Columna centrada, más estrecha que el contenedor general */
.interes-wrapper {
  max-width: 660px;
  margin-inline: auto;
}

.interes-title {
  font-size: clamp(1.5rem, 2.8vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.22;
  color: var(--text-main);
  margin-bottom: 12px;
}

.interes-subtitle {
  font-size: .98rem;
  color: var(--text-secondary);
  line-height: 1.7;
  margin-bottom: 32px;
  max-width: none;
}

/* ── Formulario ─────────────────────────────────────────── */
.interes-form {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* Dos columnas en escritorio */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* Un campo */
.form-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Etiqueta */
.form-label {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-muted);
  cursor: pointer;
}

/* Inputs, selects, textarea */
.form-input,
.form-select,
.form-textarea {
  width: 100%;
  padding: 13px 16px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-main);
  color: var(--text-main);
  font-family: var(--font-base);
  font-size: .95rem;
  line-height: 1.5;
  transition: border-color var(--t), box-shadow var(--t), background var(--t);
  appearance: none;
  -webkit-appearance: none;
}

.form-input::placeholder,
.form-textarea::placeholder {
  color: var(--text-muted);
  opacity: 1;
}

.form-input:hover,
.form-select:hover,
.form-textarea:hover {
  border-color: var(--border-strong);
}

.form-input:focus,
.form-select:focus,
.form-textarea:focus {
  outline: none;
  border-color: var(--purple);
  box-shadow: 0 0 0 3px var(--purple-light);
  background: var(--bg-card);
}

/* Select: icono chevron inline */
.form-select-wrap {
  position: relative;
}

.form-select-wrap::after {
  content: "";
  pointer-events: none;
  position: absolute;
  right: 14px;
  top: 50%;
  translate: 0 -50%;
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid var(--text-muted);
}

.form-select-wrap .form-select {
  padding-right: 36px;
  cursor: pointer;
}

/* Textarea */
.form-textarea {
  min-height: 96px;
  resize: vertical;
}

/* Estado de error */
.form-field--error .form-input,
.form-field--error .form-select,
.form-field--error .form-textarea {
  border-color: #B94040;
  box-shadow: 0 0 0 3px rgba(185,64,64,.1);
}

.form-field__error-msg {
  display: none;
  font-size: .76rem;
  color: #B94040;
  margin-top: 2px;
}

.form-field--error .form-field__error-msg {
  display: block;
}

/* ── Checkbox de consentimiento ─────────────────────────── */
.form-checkbox-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  background: var(--gold-pale);
  border: 1px solid rgba(201,162,39,.2);
  border-radius: var(--radius-sm);
}

.form-checkbox-row input[type="checkbox"] {
  flex-shrink: 0;
  width: 17px;
  height: 17px;
  margin-top: 2px;
  accent-color: var(--purple);
  cursor: pointer;
  border-radius: 3px;
}

.form-checkbox-row label {
  font-size: .87rem;
  color: var(--text-secondary);
  line-height: 1.58;
  cursor: pointer;
}

.form-checkbox-row input[type="checkbox"]:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
}

/* Consent requerido sin marcar */
.form-checkbox-row--error {
  border-color: rgba(185,64,64,.4);
  background: rgba(185,64,64,.05);
}

/* ── Confirmación inline ────────────────────────────────── */
.form-confirm {
  display: none;
  background: rgba(122,132,80,.1);
  border-left: 3px solid var(--olive);
  border-radius: var(--radius-sm);
  padding: 16px 20px;
  color: #3d4420;
  font-size: .93rem;
  line-height: 1.6;
  font-weight: 500;
}

.form-confirm.visible {
  display: block;
}

/* ── Nota de privacidad ─────────────────────────────────── */
.form-privacy-note {
  margin-top: 10px;
  padding-top: 14px;
  border-top: 1px solid var(--border);
  font-size: .75rem;
  color: var(--text-muted);
  line-height: 1.6;
}

/* ── Botón "Borrar datos de prueba" ─────────────────────── */
.btn-clear-demo {
  display: none; /* mostrado por JS cuando hay datos */
  margin-top: 8px;
  font-size: .72rem;
  font-family: var(--font-base);
  color: var(--text-muted);
  background: none;
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 5px 14px;
  cursor: pointer;
  transition: color var(--t), border-color var(--t);
}

.btn-clear-demo:hover {
  color: var(--text-main);
  border-color: var(--border-strong);
}

/* ── Variante compacta (página de producto) ─────────────── */
.section-interes--compact {
  padding: clamp(3rem, 6vw, 4.5rem) 0;
}

.section-interes--compact .interes-title {
  font-size: clamp(1.25rem, 2.5vw, 1.65rem);
}

/* ── Responsive formularios ─────────────────────────────── */
@media (max-width: 640px) {
  .form-row { grid-template-columns: 1fr; }
  .section-interes { padding: clamp(3rem, 8vw, 4rem) 0; }
}

@media (max-width: 480px) {
  .interes-form { gap: 14px; }
  .form-input,
  .form-select,
  .form-textarea { font-size: .92rem; padding: 12px 14px; }
}


/* ── Reducción de movimiento ────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .sector-image-card__media,
  .section-cta-final__media,
  .hero__bg-image {
    transition: none;
    transform: none !important;
  }

  .sector-image-card:hover {
    transform: none;
  }

  /* Indicadores direccionales */
  .btn-primary::after,
  .btn-ghost::after,
  .ready-kit-card__cta::after,
  .next-vertical-card__link::after,
  .pricing-plan__cta::after {
    transition: none;
  }

  .btn-primary:hover::after,
  .btn-ghost:hover::after,
  .ready-kit-card__cta:hover::after,
  .next-vertical-card__link:hover::after,
  .pricing-plan__cta:hover::after {
    transform: none;
  }

  .hero__scroll-cue::after {
    animation: none;
    opacity: 0.6;
  }
}


/* ── Responsive imágenes ────────────────────────────────── */
@media (max-width: 600px) {
  .sector-image-card__media-wrap { height: 130px; }
  .section-cta-final__content { padding: 72px 0; }
}

@media (max-width: 480px) {
  .sector-image-card__media-wrap { height: 110px; }
  .section-cta-final__actions { flex-direction: column; align-items: center; }
}


/* ══════════════════════════════════════════════════════════
   IDENTIDAD VISUAL — Sistema de marca TEIMA Lab v3
   ══════════════════════════════════════════════════════════

   Logo principal:
   <a class="tl-brand" href="index.html" aria-label="TEIMA Lab">
     <span class="tl-brand__mark" aria-hidden="true">
       <span class="tl-brand__axis"></span>
       <span class="tl-brand__node tl-brand__node--top"></span>
       <span class="tl-brand__node tl-brand__node--bottom"></span>
     </span>
     <span class="tl-brand__text">
       <span class="tl-brand__word">
         <span>T</span><span>E</span><span class="tl-brand__i">I</span><span>M</span><span>A</span>
       </span>
       <span class="tl-brand__lab">Lab</span>
     </span>
   </a>
   ══════════════════════════════════════════════════════════ */





/* ════════════════════════════════════════════════════════════════════
   HERO — DOS COLUMNAS: texto + panel mockup
════════════════════════════════════════════════════════════════════ */

/* Grid asimétrico 2 columnas: texto izquierda / human panel derecha */
.hero__content {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(360px, 0.85fr);
  gap: clamp(40px, 5vw, 88px);
  align-items: center;
  min-height: 520px;
  padding-block: clamp(80px, 10vw, 120px);
  position: relative;
  z-index: 1;
}

/* Columna izquierda: texto — el título es el foco absoluto */
.hero__text {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Sin eyebrow: el título arranca con más aire desde arriba */
.hero__text .hero-title {
  margin-bottom: 24px;
  /* Sobreescribimos el margin:0 auto del bloque base para texto left-aligned */
  margin-left: 0;
  margin-right: 0;
}

.hero__text .hero-subtitle {
  margin-bottom: 36px; /* Más espacio antes de los botones */
}

.hero__text .hero-actions {
  margin-bottom: 0; /* Sin microcopy debajo: no hace falta margen extra */
}

/* Columna derecha: panel decorativo */
.hero__panel {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  justify-self: end;
  width: 100%;
  position: relative;
}

/* ── Kit preview panel — objeto premium, no lista de contenidos ── */
.kit-preview {
  background: #FFFDF7;
  border: 1px solid rgba(201, 162, 39, 0.22);
  border-top: 2px solid rgba(201, 162, 39, 0.42);
  border-radius: 14px;
  padding: 28px 30px 24px;
  width: 100%;
  max-width: 420px;
  box-shadow:
    0 4px 16px rgba(28, 18, 56, 0.07),
    0 12px 36px rgba(28, 18, 56, 0.10),
    0 0 0 1px rgba(201, 162, 39, 0.08) inset;
  position: relative;
  opacity: .96;
  transition: opacity .2s ease, transform .2s ease;
}

.kit-preview:hover {
  opacity: 1;
  transform: translateY(-3px) rotate(-0.5deg);
}

/* Sombra decorativa detrás del panel */
.hero__panel::before {
  content: '';
  position: absolute;
  inset: 8px -6px -12px 8px;
  background: rgba(201, 162, 39, 0.08);
  border-radius: 16px;
  z-index: -1;
  pointer-events: none;
}

.kit-preview::before {
  content: '';
  position: absolute;
  top: 0; left: 16px; right: 16px;
  height: 2px;
  background: linear-gradient(90deg, transparent, #C9A227 30%, #C9A227 70%, transparent);
  border-radius: 0 0 2px 2px;
}

.kit-preview__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 12px;
}

.kit-preview__label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--purple);
  opacity: .65;
}

.kit-preview__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--olive);
  opacity: .55;
}

.kit-preview__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: -.02em;
  margin-bottom: 14px;
  line-height: 1.3;
}

.kit-preview__divider {
  height: 1px;
  background: linear-gradient(90deg, rgba(201, 162, 39, 0.28) 0%, transparent 100%);
  margin-bottom: 13px;
}

.kit-preview__list {
  list-style: none;
  margin: 0 0 16px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kit-preview__list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .88rem;
  color: var(--text-main);
  line-height: 1.3;
  opacity: .85;
}

.kit-preview__list li svg {
  flex-shrink: 0;
  color: var(--olive);
  opacity: .75;
}

/* Sello inferior: identidad discreta */
.kit-preview__seal {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--gold, #C9A227);
  opacity: .55;
  text-align: center;
  padding-top: 10px;
  border-top: 1px solid rgba(201, 162, 39, 0.18);
}

/* ── Botón ghost ────────────────────────────────────────────────── */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 20px;
  border-radius: 6px;
  font-weight: 600;
  font-size: .92rem;
  font-family: inherit;
  letter-spacing: -.01em;
  cursor: pointer;
  text-decoration: none;
  transition: background .18s ease, color .18s ease, border-color .18s ease;
  background: transparent;
  color: var(--purple);
  border: 1.5px solid rgba(91, 58, 142, 0.35);
}

.btn-ghost:hover,
.btn-ghost:focus-visible {
  background: rgba(91, 58, 142, 0.06);
  border-color: var(--purple);
  color: var(--purple-dark, #3D2566);
}

.btn-ghost.btn-lg {
  padding: 13px 26px;
  font-size: 1rem;
}

/* Hero: override de acciones con gap adecuado */
.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

/* Responsive hero */
@media (max-width: 800px) {
  .hero__content {
    grid-template-columns: 1fr;
    gap: 0;
    min-height: auto;
    padding-block: clamp(72px, 10vw, 96px);
  }

  /* En tablet, el mockup va debajo del texto */
  .hero__panel {
    justify-self: start;
    margin-top: 36px;
    opacity: .75;
    width: 100%;
  }

  .kit-preview {
    max-width: 340px;
  }
}

@media (max-width: 560px) {
  /* En móvil: ocultar el mockup — el título ya es suficiente */
  .hero__panel {
    display: none;
  }

  /* Volver al centrado en móvil */
  .hero {
    text-align: center;
  }
  .hero-title,
  .hero-subtitle,
  .hero-microcopy {
    text-align: center;
    margin-left: auto;
    margin-right: auto;
  }
  .hero-actions {
    justify-content: center;
  }
  .hero-eyebrow {
    display: inline-block;
  }
}


/* (sección .section-sistema eliminada en auditoría — superada por .tl-sol) */


/* ════════════════════════════════════════════════════════════════════
   CATÁLOGO DE RECURSOS — layout asimétrico
════════════════════════════════════════════════════════════════════ */

/* Header asimétrico de la sección */
.recursos-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: clamp(36px, 5vw, 52px);
  flex-wrap: wrap;
}

.recursos-header .tag {
  margin-bottom: 8px;
}

.recursos-header .section-title {
  margin-bottom: 0;
}

.recursos-header__note {
  font-size: .88rem;
  color: var(--text-secondary, #666);
  max-width: 280px;
  line-height: 1.5;
  margin: 0;
  flex-shrink: 0;
  text-align: right;
}

/* Grid asimétrico: gran tarjeta izquierda + lista derecha */
.catalogo-recursos {
  display: grid;
  grid-template-columns: 1fr 1.15fr;
  gap: clamp(20px, 3vw, 36px);
  align-items: start;
}

/* ── Tarjeta principal: Kit ─────────────────────────────────────── */
.catalogo-principal {
  background: linear-gradient(155deg, #F8F4FD 0%, #EDE5FA 100%);
  border: 1.5px solid rgba(91, 58, 142, 0.20);
  border-radius: 14px;
  padding: clamp(28px, 4vw, 40px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  position: relative;
  overflow: hidden;
  height: 100%;
  box-sizing: border-box;
}

/* Decoración de fondo: número grande difuminado */
.catalogo-principal::after {
  content: 'KIT';
  position: absolute;
  bottom: -10px;
  right: -4px;
  font-size: 6rem;
  font-weight: 800;
  letter-spacing: -.06em;
  color: rgba(91, 58, 142, 0.06);
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.catalogo-principal__icon {
  color: var(--purple);
  opacity: .8;
  margin-bottom: 2px;
}

.catalogo-principal .recurso-type--kit {
  align-self: flex-start;
}

.catalogo-principal__title {
  font-size: 1.28rem;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -.03em;
  line-height: 1.2;
  margin: 0;
}

.catalogo-principal__desc {
  font-size: .9rem;
  color: var(--text-secondary, #555);
  line-height: 1.6;
  margin: 0;
}

.catalogo-principal__attrs {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}

.catalogo-principal__attrs span {
  font-size: .7rem;
  font-weight: 600;
  letter-spacing: .05em;
  padding: 4px 10px;
  border-radius: 4px;
  background: rgba(91, 58, 142, 0.10);
  color: var(--purple);
  border: 1px solid rgba(91, 58, 142, 0.18);
}

/* ── Panel de recursos secundarios ─────────────────────────────── */
.catalogo-secundarios {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 1px solid rgba(28, 18, 56, 0.09);
  border-radius: 12px;
  overflow: hidden;
  background: rgba(246, 242, 234, 0.60);
}

/* ── Ítem de recurso secundario ─────────────────────────────────── */
.catalogo-item {
  display: flex;
  align-items: flex-start;
  gap: 0;
  padding: clamp(14px, 2vw, 18px) clamp(16px, 2.5vw, 22px);
  border-bottom: 1px solid rgba(28, 18, 56, 0.06);
  transition: background .15s ease;
}

.catalogo-item:last-child {
  border-bottom: none;
}

.catalogo-item:hover {
  background: rgba(246, 242, 234, 0.95);
}

/* Columna icono */
.ci-left {
  flex-shrink: 0;
  width: 36px;
  padding-top: 2px;
}

.ci-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: rgba(107, 113, 69, 0.10);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--olive);
}

/* Columna texto */
.ci-body {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 3px;
}

.ci-body .recurso-type {
  margin-bottom: 3px;
}

.ci-body h4 {
  font-size: .9rem;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: -.02em;
  margin: 0;
  line-height: 1.3;
}

.ci-body p {
  font-size: .8rem;
  color: var(--text-secondary, #666);
  line-height: 1.45;
  margin: 0;
}

/* Badge "Kit completo" — variante dorada */
.recurso-type--kit {
  background: rgba(201, 162, 39, 0.12);
  color: #8a6200;
  border-color: rgba(201, 162, 39, 0.25);
}

/* Responsive catálogo */
@media (max-width: 860px) {
  .catalogo-recursos {
    grid-template-columns: 1fr;
  }

  .catalogo-principal {
    height: auto;
  }

  .catalogo-principal::after {
    font-size: 5rem;
    opacity: .04;
  }
}

@media (max-width: 560px) {
  .recursos-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
  }

  .recursos-header__note {
    text-align: left;
    max-width: 100%;
  }
}


/* ════════════════════════════════════════════════════════════════════
   KIT FOLDER — mockup visual página de producto
════════════════════════════════════════════════════════════════════ */

.pph-visual {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: clamp(20px, 3vw, 32px);
}

.kit-folder {
  background: linear-gradient(160deg, #FAF7F0 0%, #F0EBE0 100%);
  border: 1.5px solid rgba(201, 162, 39, 0.28);
  border-radius: 16px;
  padding: 24px 22px 20px;
  width: 100%;
  max-width: 340px;
  box-shadow:
    0 2px 6px rgba(28, 18, 56, 0.06),
    0 10px 32px rgba(28, 18, 56, 0.12);
  display: flex;
  flex-direction: column;
  gap: 16px;
  position: relative;
  overflow: hidden;
}

/* Línea dorada superior — detalle de precisión */
.kit-folder::before {
  content: '';
  position: absolute;
  top: 0; left: 12px; right: 12px;
  height: 2.5px;
  background: linear-gradient(90deg, transparent, #C9A227 25%, #C9A227 75%, transparent);
  border-radius: 0 0 2px 2px;
}

/* Header de la carpeta */
.kit-folder__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.kit-folder__label {
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--purple);
  opacity: .65;
}

.kit-folder__ver {
  font-size: .63rem;
  font-weight: 600;
  letter-spacing: .08em;
  color: var(--gold, #C9A227);
  background: rgba(201, 162, 39, 0.10);
  padding: 2px 7px;
  border-radius: 3px;
  border: 1px solid rgba(201, 162, 39, 0.20);
}

/* Nombre del kit */
.kit-folder__name {
  font-size: 1.02rem;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -.03em;
  line-height: 1.25;
}

/* ── Documentos apilados ────────────────────────────────────────── */
.kit-docs {
  position: relative;
  height: 112px;
  margin-block: 4px;
}

/* Documento base: posicionado absolutamente, con efecto apilado */
.kit-doc {
  position: absolute;
  width: calc(100% - 16px);
  left: 50%;
  transform: translateX(-50%);
  border-radius: 8px;
  background: #FFFFFF;
  border: 1px solid rgba(28, 18, 56, 0.10);
}

/* Documento trasero 2: más girado, más atrás */
.kit-doc--back2 {
  height: 76px;
  top: 12px;
  transform: translateX(-50%) rotate(-3deg);
  background: rgba(255,255,255,0.65);
  border-color: rgba(201, 162, 39, 0.14);
  z-index: 1;
}

/* Documento trasero 1: levemente girado */
.kit-doc--back1 {
  height: 82px;
  top: 6px;
  transform: translateX(-50%) rotate(-1.2deg);
  background: rgba(255,255,255,0.82);
  border-color: rgba(201, 162, 39, 0.20);
  z-index: 2;
}

/* Documento frontal: el principal, con contenido */
.kit-doc--front {
  height: 90px;
  top: 0;
  padding: 10px 12px 8px;
  z-index: 3;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.kit-doc__header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .68rem;
  font-weight: 600;
  color: var(--text-main);
  letter-spacing: -.01em;
}

.kit-doc__ext {
  font-size: .6rem;
  font-weight: 700;
  letter-spacing: .06em;
  background: rgba(91, 58, 142, 0.10);
  color: var(--purple);
  padding: 1px 5px;
  border-radius: 3px;
}

.kit-doc__lines {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.kit-doc__lines span {
  height: 3px;
  border-radius: 2px;
  background: rgba(28, 18, 56, 0.08);
  width: 100%;
  display: block;
}

/* ── Tags del kit ───────────────────────────────────────────────── */
.kit-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
}

.kit-tag {
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .04em;
  padding: 3px 8px;
  border-radius: 4px;
  border: 1px solid transparent;
}

/* Variantes de colores por tipo */
.kit-tag--method {
  background: rgba(91, 58, 142, 0.10);
  color: var(--purple);
  border-color: rgba(91, 58, 142, 0.18);
}

.kit-tag--skill {
  background: rgba(107, 113, 69, 0.10);
  color: var(--olive);
  border-color: rgba(107, 113, 69, 0.20);
}

.kit-tag--doc {
  background: rgba(201, 162, 39, 0.10);
  color: #8a6200;
  border-color: rgba(201, 162, 39, 0.22);
}

.kit-tag--example {
  background: rgba(61, 37, 102, 0.08);
  color: #3D2566;
  border-color: rgba(61, 37, 102, 0.14);
}

.kit-tag--check {
  background: rgba(28, 18, 56, 0.06);
  color: var(--text-main);
  border-color: rgba(28, 18, 56, 0.12);
}

/* Footer del kit */
.kit-folder__footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .7rem;
  color: var(--text-muted, #888);
  letter-spacing: .02em;
  padding-top: 2px;
  flex-wrap: wrap;
  gap: 8px;
}

/* Precio dentro del footer del kit-folder */
.kit-folder__footer .pph-visual-price {
  display: flex;
  align-items: baseline;
  gap: 6px;
}

.kit-folder__footer .pph-visual-price .main {
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -.02em;
}

.kit-folder__footer .pph-visual-price .old {
  font-size: .75rem;
  font-weight: 400;
  color: var(--text-muted, #aaa);
  text-decoration: line-through;
}

/* Responsive kit-folder */
@media (max-width: 800px) {
  .pph-visual {
    padding: 0;
    margin-top: 28px;
  }

  .kit-folder {
    max-width: 100%;
  }
}


/* ════════════════════════════════════════════════════════════════════
   TIPOGRAFÍA HERO — refinamientos
════════════════════════════════════════════════════════════════════ */

/* .hero-title em ya no existe — reemplazado por .hero-claim */

/* Microcopy bajo los CTAs */
.hero-microcopy {
  font-size: .8rem;
  color: var(--text-secondary, #666);
  line-height: 1.4;
  /* margin-top heredado del bloque base (.hero-microcopy { margin-top: 24px }) */
}

.hero-microcopy strong {
  color: var(--text-main);
  font-weight: 600;
}

/* Hero eyebrow — ya definido arriba, no sobreescribir */

/* Hero panel — estados de ítems */
.kpl--done svg  { stroke: var(--gold); }
.kpl--done span { color: var(--text-secondary); }
.kpl--active svg { stroke: var(--purple-light, rgba(91,58,142,.6)); animation: pulse-icon 1.8s ease-in-out infinite; }
.kpl--active span { color: var(--text-main); font-style: italic; }

@keyframes pulse-icon {
  0%, 100% { opacity: .5; }
  50% { opacity: 1; }
}

/* Panel tags */
.kit-preview__tags {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  flex-wrap: wrap;
}
.kit-preview__tag {
  font-size: .67rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: rgba(201,162,39,.12);
  color: var(--gold);
  border: 1px solid rgba(201,162,39,.28);
  border-radius: 4px;
  padding: 3px 9px;
}

/* Panel eyebrow */
.kit-preview__eyebrow {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(246,242,234,.28);
  margin-bottom: 10px;
}


/* ════════════════════════════════════════════════════════════════════
   SERVICE CHIPS — chips de servicios en tarjetas de kits
════════════════════════════════════════════════════════════════════ */

.kit-dest-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  margin-bottom: 18px;
}

.kit-dest-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--text-main);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 5px 11px;
  line-height: 1.2;
  transition: background var(--t), border-color var(--t), color var(--t);
}

.kit-dest-chip::before {
  content: "→";
  color: var(--gold);
  font-weight: 700;
  font-size: .72rem;
  flex-shrink: 0;
}

/* Chips más vivos en card primaria */
.kit-dest-card--primary .kit-dest-chip {
  background: rgba(91,58,142,.07);
  border-color: rgba(91,58,142,.18);
  color: var(--purple-dark, #3D2566);
}
.kit-dest-card--primary .kit-dest-chip::before {
  color: var(--purple);
}

.kit-dest-chip:hover {
  background: var(--bg-main);
  border-color: var(--gold);
  color: var(--text-main);
}

/* Bloque "Ideal para" */
.kit-dest-ideal {
  font-size: .82rem;
  color: var(--text-secondary);
  background: var(--bg-secondary);
  border-left: 3px solid var(--gold);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 10px 14px;
  margin-bottom: 16px;
  line-height: 1.55;
}

.kit-dest-ideal strong {
  color: var(--text-main);
  font-weight: 700;
}

.kit-dest-card--primary .kit-dest-ideal {
  border-left-color: var(--purple);
  background: var(--purple-light);
}


/* ════════════════════════════════════════════════════════════════════
   SECCIÓN PRECIOS — continúa abajo
════════════════════════════════════════════════════════════════════ */

/* ── Eyebrow / etiqueta de sección — usada en múltiples bloques ─── */
.section-eyebrow {
  display: inline-block;
  font-size: .67rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 20px;
  opacity: .9;
}

/* Método cards — gradiente premium */
.metodo-card {
  background: linear-gradient(145deg, rgba(255,255,255,.05) 0%, rgba(91,58,142,.08) 100%);
}


/* ════════════════════════════════════════════════════════════════════
   SECCIÓN PRECIOS — "Tres formas de empezar con TEIMA Lab"
   Layout: fondo claro premium · grid 3 columnas · plan central elevado
════════════════════════════════════════════════════════════════════ */

.section-pricing {
  background: var(--bg-main);
  position: relative;
  overflow: hidden;
}

/* Línea superior de separación del fondo oscuro anterior */
.section-pricing::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--border) 25%, var(--border) 75%, transparent);
  pointer-events: none;
}

/* Luz ambiental tenue */
.section-pricing::after {
  content: "";
  position: absolute;
  top: -120px; right: -80px;
  width: 560px; height: 560px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(91,58,142,.05) 0%, transparent 65%);
  pointer-events: none;
}

/* ── Inner ──────────────────────────────────────────────────────── */
.section-pricing__inner {
  max-width: var(--max-width);
  margin-inline: auto;
  padding: clamp(80px, 10vw, 120px) clamp(20px, 4vw, 56px);
  position: relative;
  z-index: 1;
}

/* ── Encabezado ─────────────────────────────────────────────────── */
.pricing-heading {
  text-align: center;
  max-width: 580px;
  margin-inline: auto;
  margin-bottom: 64px;
}

/* reutiliza .section-eyebrow — sobreescribir color para fondo claro */
.section-pricing .section-eyebrow {
  color: var(--purple);
  opacity: 1;
}

.pricing-heading__title {
  font-size: clamp(1.55rem, 2.6vw, 2.1rem);
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -.03em;
  line-height: 1.18;
  margin: 0 0 16px;
}

.pricing-heading__lead {
  font-size: .92rem;
  color: var(--text-secondary);
  line-height: 1.72;
  margin: 0;
}

/* ── Grid de planes ─────────────────────────────────────────────── */
.pricing-premium-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  align-items: start;
  margin-bottom: 40px;
}

/* ── Tarjeta base ───────────────────────────────────────────────── */
.pricing-plan {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 36px 32px 32px;
  display: flex;
  flex-direction: column;
  position: relative;
  box-shadow:
    0 1px 3px rgba(23,32,51,.04),
    0 6px 20px rgba(23,32,51,.06);
  transition: box-shadow var(--t), transform var(--t);
}

.pricing-plan:hover {
  box-shadow:
    0 2px 6px rgba(23,32,51,.06),
    0 14px 36px rgba(23,32,51,.10);
  transform: translateY(-2px);
}

/* ── Plan central destacado ─────────────────────────────────────── */
.pricing-plan--featured {
  border-color: rgba(91,58,142,.35);
  background: linear-gradient(160deg, #FFFCFF 0%, rgba(91,58,142,.03) 100%);
  box-shadow:
    0 2px 8px rgba(23,32,51,.06),
    0 16px 44px rgba(91,58,142,.14),
    0 32px 72px rgba(23,32,51,.08),
    0 0 0 1px rgba(91,58,142,.12);
  /* Elevación visual — ligeramente más grande */
  margin-top: -16px;
  margin-bottom: -16px;
  padding: 48px 36px 40px;
  z-index: 2;
}

.pricing-plan--featured:hover {
  box-shadow:
    0 4px 12px rgba(23,32,51,.08),
    0 24px 56px rgba(91,58,142,.20),
    0 40px 80px rgba(23,32,51,.10),
    0 0 0 2px rgba(91,58,142,.22);
  transform: translateY(-4px);
}

/* ── Badge "Recomendado" ────────────────────────────────────────── */
.pricing-plan__badge {
  position: absolute;
  top: -14px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: #fff;
  background: var(--purple);
  border-radius: 100px;
  padding: 5px 16px;
  white-space: nowrap;
  box-shadow: 0 4px 14px rgba(91,58,142,.35);
}

.pricing-plan__badge::before {
  content: "★";
  font-size: .62rem;
}

/* ── Plan personalizado — acento dorado sutil ───────────────────── */
.pricing-plan--custom {
  border-color: rgba(201,162,39,.22);
}

/* ── Contenido de tarjeta ───────────────────────────────────────── */
.pricing-plan__top {
  margin-bottom: 28px;
}

.pricing-plan__title {
  font-size: 1.18rem;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -.025em;
  margin: 0 0 18px;
}

.pricing-plan--featured .pricing-plan__title {
  font-size: 1.28rem;
  color: var(--purple-dark, #3D2566);
}

.pricing-plan__price {
  display: flex;
  align-items: baseline;
  gap: 5px;
  margin-bottom: 14px;
}

.pricing-plan__from {
  font-size: .74rem;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: .02em;
}

.pricing-plan__amount {
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--text-main);
  letter-spacing: -.05em;
  line-height: 1;
}

.pricing-plan--featured .pricing-plan__amount {
  font-size: 2.6rem;
  color: var(--purple);
}

.pricing-plan--custom .pricing-plan__amount {
  color: #7A5C00;
}

.pricing-plan__desc {
  font-size: .84rem;
  color: var(--text-secondary);
  line-height: 1.65;
  margin: 0;
}

/* ── Lista de características ───────────────────────────────────── */
.pricing-plan__features {
  list-style: none;
  padding: 0;
  margin: 0 0 32px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-grow: 1;
  border-top: 1px solid var(--border);
  padding-top: 22px;
}

.pricing-plan--featured .pricing-plan__features {
  border-top-color: rgba(91,58,142,.15);
}

.pricing-plan__features li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: .85rem;
  color: var(--text-secondary);
  line-height: 1.45;
  padding-left: 0;
}

.pricing-plan__features li::before {
  content: "✓";
  font-size: .76rem;
  font-weight: 900;
  color: var(--gold);
  flex-shrink: 0;
  margin-top: 1px;
  line-height: 1.45;
}

.pricing-plan--featured .pricing-plan__features li::before {
  color: var(--purple);
}

.pricing-plan--custom .pricing-plan__features li::before {
  color: #C9A227;
}

.pricing-plan__features li strong {
  color: var(--text-main);
  font-weight: 700;
}

/* ── Footer: CTA ────────────────────────────────────────────────── */
.pricing-plan__footer {
  margin-top: auto;
}

.pricing-plan__cta {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 13px 24px;
  border-radius: 10px;
  font-size: .88rem;
  font-weight: 700;
  letter-spacing: -.01em;
  text-decoration: none;
  border: 1.5px solid var(--border-strong);
  color: var(--text-main);
  background: transparent;
  transition: background var(--t), border-color var(--t), color var(--t), box-shadow var(--t), transform var(--t);
}

.pricing-plan__cta:hover {
  background: var(--bg-secondary);
  border-color: var(--text-main);
  transform: translateY(-1px);
}

/* CTA principal — plan destacado */
.pricing-plan__cta--featured {
  background: var(--purple);
  color: #fff;
  border-color: var(--purple);
  box-shadow: 0 4px 18px rgba(91,58,142,.28);
}

.pricing-plan__cta--featured:hover {
  background: #4A2E78;
  border-color: #4A2E78;
  box-shadow: 0 6px 28px rgba(91,58,142,.38);
  transform: translateY(-2px);
}

/* ── Nota legal/contextual ──────────────────────────────────────── */
.pricing-note {
  text-align: center;
  font-size: .80rem;
  color: var(--text-muted);
  line-height: 1.65;
  max-width: 560px;
  margin-inline: auto;
  padding: 0 16px;
}

/* ── Responsive: pricing ────────────────────────────────────────── */
@media (max-width: 960px) {
  .pricing-premium-grid {
    grid-template-columns: 1fr;
    max-width: 480px;
    margin-inline: auto;
  }
  .pricing-plan--featured {
    margin-top: 0;
    margin-bottom: 0;
    .pricing-plan--basic {   .pricing-plan--basic {   order: 1; }  .pricing-plan--featured {   order: 2; }  .pricing-plan--custom {   order: 3; }: 1; }  .pricing-plan--featured {   .pricing-plan--basic {   order: 1; }  .pricing-plan--featured {   order: 2; }  .pricing-plan--custom {   order: 3; }: 2; }  .pricing-plan--custom {   .pricing-plan--basic {   order: 1; }  .pricing-plan--featured {   order: 2; }  .pricing-plan--custom {   order: 3; }: 3; }: -1; /* el destacado va primero en móvil */
  }
}

@media (max-width: 500px) {
  .kit-pchip { font-size: .76rem; padding: 6px 9px; }
}


/* ════════════════════════════════════════════════════════════════════
   SECCIÓN GUÍA — "¿No sabes qué kit encaja con tu trabajo?"
   Layout: contenedor centrado con tarjeta de dos columnas.
   Izquierda: título + CTA. Derecha: 3 pasos verticales.
════════════════════════════════════════════════════════════════════ */

.section-guidance {
  background: var(--bg-secondary);
  position: relative;
  overflow: hidden;
}

/* Decoración ambiental muy sutil */
.section-guidance::before {
  content: "";
  position: absolute;
  bottom: -80px; left: -60px;
  width: 440px; height: 440px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,162,39,.06) 0%, transparent 65%);
  pointer-events: none;
}

/* ── Inner ──────────────────────────────────────────────────────── */
.section-guidance__inner {
  max-width: var(--max-width);
  margin-inline: auto;
  padding: clamp(72px, 9vw, 108px) clamp(20px, 4vw, 56px);
  position: relative;
  z-index: 1;
}

/* ── Tarjeta principal ──────────────────────────────────────────── */
.guidance-card {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 6vw, 88px);
  align-items: center;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 24px;
  padding: clamp(44px, 5vw, 68px) clamp(36px, 4vw, 60px);
  box-shadow:
    0 1px 4px rgba(23,32,51,.04),
    0 10px 32px rgba(23,32,51,.07),
    0 28px 64px rgba(23,32,51,.05);
  position: relative;
  overflow: hidden;
}

/* Acento de color en borde superior */
.guidance-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(to right, var(--purple), var(--gold) 55%, transparent 90%);
  border-radius: 24px 24px 0 0;
}

/* ── Columna izquierda ──────────────────────────────────────────── */
.guidance-eyebrow {
  color: var(--purple) !important;
  opacity: 1 !important;
  margin-bottom: 18px;
}

.guidance-card__title {
  font-size: clamp(1.38rem, 2.2vw, 1.82rem);
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -.03em;
  line-height: 1.2;
  margin: 0 0 18px;
}

.guidance-card__lead {
  font-size: .90rem;
  color: var(--text-secondary);
  line-height: 1.72;
  margin: 0 0 32px;
}

.guidance-card__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 22px;
}

.guidance-card__reassurance {
  font-size: .77rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 0;
  padding-left: 2px;
}

/* ── Columna derecha: pasos ─────────────────────────────────────── */
.guidance-steps {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.guidance-step {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 22px 0;
  border-bottom: 1px solid var(--border);
  transition: background var(--t);
}

.guidance-step:first-child {
  padding-top: 0;
}

.guidance-step:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.guidance-step__num {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(91,58,142,.08);
  border: 1px solid rgba(91,58,142,.16);
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .04em;
  color: var(--purple);
  line-height: 1;
  margin-top: 2px;
}

.guidance-step__title {
  font-size: .96rem;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: -.015em;
  margin: 0 0 5px;
}

.guidance-step__text {
  font-size: .83rem;
  color: var(--text-secondary);
  line-height: 1.65;
  margin: 0;
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 860px) {
  .guidance-card {
    grid-template-columns: 1fr;
    gap: 44px;
  }
}

@media (max-width: 560px) {
  .guidance-card {
    padding: 36px 28px;
    border-radius: 18px;
  }
  .guidance-card__actions {
    flex-direction: column;
  }
  .guidance-card__actions .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}


/* ════════════════════════════════════════════════════════════════════
   KITS DESTACADOS — sección home multisectorial
════════════════════════════════════════════════════════════════════ */

/* ════════════════════════════════════════════════════════════════════
   KITS LISTOS — Sección de producto principal
════════════════════════════════════════════════════════════════════ */

.section-ready-kits {
  padding: clamp(88px, 10vw, 140px) 0;
  background:
    radial-gradient(circle at 8% 0%, rgba(91, 58, 145, 0.08), transparent 34%),
    linear-gradient(180deg, #f8fafc 0%, #f3eee5 100%);
}

.section-ready-kits__inner {
  width: min(100% - 48px, 1320px);
  margin-inline: auto;
}

.ready-kits-heading {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.75fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: end;
  margin-bottom: clamp(34px, 5vw, 64px);
}

.ready-kits-heading__title {
  margin: 0;
  max-width: 720px;
  font-size: clamp(2.5rem, 5vw, 5rem);
  line-height: 0.95;
  letter-spacing: -0.07em;
  color: #172033;
}

.ready-kits-heading__lead {
  margin: 0;
  color: #64748b;
  font-size: 1.08rem;
  line-height: 1.7;
}

.ready-kits-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}

.ready-kit-card {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: 30px;
  border-radius: 30px;
  background: linear-gradient(180deg, rgba(255,255,255,0.96), rgba(255,255,255,0.88));
  border: 1px solid rgba(216, 225, 232, 0.95);
  box-shadow: 0 24px 70px rgba(23, 32, 51, 0.08), 0 1px 0 rgba(255,255,255,0.9) inset;
}

.ready-kit-card--featured {
  background:
    radial-gradient(circle at 100% 0%, rgba(91, 58, 145, 0.12), transparent 34%),
    linear-gradient(180deg, #ffffff 0%, #f8f5ff 100%);
  border-color: rgba(91, 58, 145, 0.28);
  box-shadow: 0 34px 90px rgba(91, 58, 145, 0.18), 0 1px 0 rgba(255,255,255,0.95) inset;
  transform: translateY(-10px);
}

.ready-kit-card__label {
  display: inline-flex;
  width: fit-content;
  margin-bottom: 18px;
  padding: 8px 12px;
  border-radius: 999px;
  background: rgba(199, 163, 58, 0.12);
  border: 1px solid rgba(199, 163, 58, 0.32);
  color: #9b7a16;
  font-size: 0.72rem;
  font-weight: 900;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}

.ready-kit-card__title {
  margin: 0 0 10px;
  color: #172033;
  font-size: clamp(1.55rem, 2.2vw, 2rem);
  line-height: 1;
  letter-spacing: -0.045em;
}

.ready-kit-card__subtitle {
  margin: 0;
  color: #172033;
  font-size: 1.02rem;
  line-height: 1.55;
  font-weight: 800;
}

.ready-kit-card__desc {
  margin: 22px 0 0;
  color: #64748b;
  font-size: 0.98rem;
  line-height: 1.7;
}

.ready-kit-card__features {
  display: flex;
  flex-wrap: wrap;
  gap: 9px;
  margin-top: 24px;
}

.ready-kit-card__features span {
  display: inline-flex;
  align-items: center;
  min-height: 34px;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(91, 58, 145, 0.07);
  border: 1px solid rgba(91, 58, 145, 0.16);
  color: #3d2b5f;
  font-size: 0.82rem;
  line-height: 1;
}

.ready-kit-card__features span::before {
  content: "→";
  margin-right: 6px;
  color: #5b3a91;
  font-weight: 900;
}

.ready-kit-card__ideal {
  margin-top: 24px;
  padding: 16px 18px;
  border-radius: 18px;
  background: rgba(248, 250, 252, 0.88);
  border-left: 3px solid #c7a33a;
  color: #64748b;
  font-size: 0.92rem;
  line-height: 1.6;
}

.ready-kit-card__ideal strong { color: #172033; }

.ready-kit-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin-top: auto;
  padding-top: 28px;
}

.ready-kit-card__price {
  margin: 0;
  color: #172033;
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: -0.04em;
}

.ready-kit-card__price span {
  display: block;
  margin-bottom: 2px;
  color: #64748b;
  font-size: 0.72rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.ready-kit-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 18px;
  border-radius: 999px;
  border: 1px solid rgba(91, 58, 145, 0.28);
  color: #5b3a91;
  background: #ffffff;
  text-decoration: none;
  font-size: 0.9rem;
  font-weight: 900;
  transition: transform 180ms ease, box-shadow 180ms ease, background 180ms ease;
}

.ready-kit-card__cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 16px 36px rgba(91, 58, 145, 0.14);
}

.ready-kit-card__cta--featured {
  background: #5b3a91;
  color: #ffffff;
  box-shadow: 0 16px 40px rgba(91, 58, 145, 0.24);
}

@media (max-width: 1020px) {
  .ready-kits-heading { grid-template-columns: 1fr; }
  .ready-kits-grid { grid-template-columns: 1fr; }
  .ready-kit-card--featured { transform: none; }
}

@media (max-width: 640px) {
  .section-ready-kits__inner { width: min(100% - 32px, 1320px); }
  .ready-kit-card { padding: 24px; border-radius: 24px; }
  .ready-kit-card__footer { align-items: stretch; flex-direction: column; }
  .ready-kit-card__cta { width: 100%; }
}


/* ════════════════════════════════════════════════════════════════════
   AUDIENCIA — "Diseñado para profesionales reales"
   Grid 3×2 · tarjetas ricas con icono, problema, kit y valor
════════════════════════════════════════════════════════════════════ */

.section-audience {
  background: var(--bg-main);
  padding: clamp(80px, 10vw, 116px) 0;
  position: relative;
}

.section-audience__inner {
  width: min(100% - 48px, 1320px);
  margin-inline: auto;
}

/* ── Encabezado centrado ───────────────────────────────────────── */
.audience-heading {
  text-align: center;
  max-width: 600px;
  margin-inline: auto;
  margin-bottom: 56px;
}

.audience-heading .tag { display: block; margin-bottom: 14px; }

.audience-heading__title {
  font-size: clamp(1.38rem, 2.4vw, 1.9rem);
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -.03em;
  line-height: 1.2;
  margin: 0 0 16px;
}

.audience-heading__lead {
  font-size: .91rem;
  color: var(--text-secondary);
  line-height: 1.72;
  margin: 0;
}

/* ── Grid 3×2 ──────────────────────────────────────────────────── */
.audience-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: 52px;
}

/* ── Tarjeta ──────────────────────────────────────────────────── */
.audience-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 32px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 0;
  box-shadow: 0 1px 3px rgba(23,32,51,.04), 0 6px 18px rgba(23,32,51,.06);
  transition: box-shadow var(--t), transform var(--t), border-color var(--t);
}

.audience-card:hover {
  box-shadow: 0 2px 8px rgba(23,32,51,.06), 0 14px 36px rgba(23,32,51,.10);
  transform: translateY(-3px);
  border-color: var(--border-strong);
}

/* Icono */
.audience-card__icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text-secondary);
  margin-bottom: 18px;
  flex-shrink: 0;
  transition: background var(--t), border-color var(--t), color var(--t);
}

.audience-card:hover .audience-card__icon {
  background: rgba(91,58,142,.07);
  border-color: rgba(91,58,142,.18);
  color: var(--purple);
}

/* Título */
.audience-card__title {
  font-size: 1.0rem;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: -.02em;
  line-height: 1.3;
  margin: 0 0 10px;
}

/* Problema */
.audience-card__problem {
  font-size: .84rem;
  color: var(--text-secondary);
  line-height: 1.65;
  margin: 0 0 16px;
  flex-grow: 1;
}

/* Kit recomendado */
.audience-card__kit {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: var(--purple);
  background: var(--purple-light);
  border: 1px solid rgba(91,58,142,.18);
  border-radius: 100px;
  padding: 3px 11px;
  margin-bottom: 12px;
  align-self: flex-start;
}

.audience-card__kit--oficina {
  color: #7A5C00;
  background: rgba(201,162,39,.10);
  border-color: rgba(201,162,39,.26);
}

.audience-card__kit--local {
  color: #1A5C4F;
  background: rgba(46,125,107,.09);
  border-color: rgba(46,125,107,.24);
}

.audience-card__kit--edu {
  color: #3D2566;
  background: var(--purple-light);
  border-color: rgba(91,58,142,.20);
}

/* Microcopy de valor */
.audience-card__value {
  font-size: .78rem;
  font-weight: 500;
  font-style: italic;
  color: var(--text-muted);
  line-height: 1.55;
  margin: 0;
}

/* ── Frase de cierre ───────────────────────────────────────────── */
.audience-closing {
  text-align: center;
  font-size: .92rem;
  font-weight: 600;
  color: var(--text-secondary);
  letter-spacing: -.01em;
  line-height: 1.55;
  padding: 28px 32px;
  border: 1px solid var(--border);
  border-radius: 14px;
  background: var(--bg-secondary);
  max-width: 560px;
  margin-inline: auto;
}

/* ── Responsive: audience ──────────────────────────────────────── */
@media (max-width: 900px) {
  .audience-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 560px) {
  .audience-grid { grid-template-columns: 1fr; }
  .audience-card { padding: 26px 22px 22px; }
}

/* ── Mantenido para kits.html ──────────────────────────────────── */

/* (old .section-kits-premium CSS removed — replaced by section-ready-kits) */

.section-kits-premium {
  padding: 100px 0 96px;
  background: var(--bg-secondary);
  position: relative;
}

/* Decoración de fondo sutil */
.section-kits-premium::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--border-strong) 30%, var(--border-strong) 70%, transparent);
  pointer-events: none;
}

/* ── Encabezado de sección ──────────────────────────────────── */
.kits-premium-header {
  margin-bottom: 56px;
}

.kits-premium-header .section-title {
  margin-top: 12px;
  margin-bottom: 0;
}

.kits-premium-header .section-lead {
  max-width: 600px;
  margin-top: 18px;
  margin-bottom: 0;
  color: var(--text-secondary);
}

/* ── Grid de tarjetas ───────────────────────────────────────── */
.kits-premium-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}

/* ── Tarjeta base ───────────────────────────────────────────── */
.kit-premium-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  padding: 36px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 0;
  box-shadow:
    0 1px 3px rgba(23,32,51,.04),
    0 8px 24px rgba(23,32,51,.07),
    0 24px 56px rgba(23,32,51,.05);
  transition: box-shadow var(--t), transform var(--t), border-color var(--t);
  position: relative;
  overflow: hidden;
}

.kit-premium-card::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: var(--border);
  transition: background var(--t);
}

.kit-premium-card:hover {
  box-shadow:
    0 2px 6px rgba(23,32,51,.06),
    0 16px 40px rgba(23,32,51,.12),
    0 36px 72px rgba(23,32,51,.09);
  transform: translateY(-4px);
}

/* ── Variante destacada: TEIMA Oficina ──────────────────────── */
.kit-premium-card--featured {
  border-color: rgba(201,162,39,.45);
  background: linear-gradient(160deg, #FFFDF8 0%, rgba(201,162,39,.04) 100%);
  box-shadow:
    0 1px 3px rgba(23,32,51,.05),
    0 8px 28px rgba(23,32,51,.10),
    0 28px 64px rgba(23,32,51,.08),
    0 0 0 1px rgba(201,162,39,.12);
}

.kit-premium-card--featured::before {
  height: 4px;
  background: linear-gradient(to right, var(--gold), rgba(201,162,39,.5));
}

.kit-premium-card--featured:hover {
  border-color: rgba(201,162,39,.65);
  box-shadow:
    0 2px 8px rgba(23,32,51,.07),
    0 20px 52px rgba(23,32,51,.14),
    0 40px 80px rgba(23,32,51,.10),
    0 0 0 2px rgba(201,162,39,.18);
}

/* ── Variante TEIMA Local ───────────────────────────────────── */
.kit-premium-card--local::before {
  background: linear-gradient(to right, #2E7D6B, rgba(46,125,107,.4));
}

.kit-premium-card--local:hover {
  border-color: rgba(46,125,107,.35);
}

/* ── Variante TEIMA Edu ─────────────────────────────────────── */
.kit-premium-card--edu::before {
  background: linear-gradient(to right, var(--purple), rgba(91,58,142,.4));
}

.kit-premium-card--edu:hover {
  border-color: rgba(91,58,142,.3);
}

/* ── Cabecera de tarjeta ────────────────────────────────────── */
.kit-premium-card__top {
  margin-bottom: 28px;
}

.kit-premium-card__meta {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  flex-wrap: wrap;
}

.kit-premium-card__label {
  display: inline-flex;
  align-items: center;
  font-size: .64rem;
  font-weight: 800;
  letter-spacing: .11em;
  text-transform: uppercase;
  color: #7A5C00;
  background: rgba(201,162,39,.13);
  border: 1px solid rgba(201,162,39,.28);
  border-radius: 100px;
  padding: 3px 12px;
}

.kit-premium-card__label--local {
  color: #1A5C4F;
  background: rgba(46,125,107,.10);
  border-color: rgba(46,125,107,.28);
}

.kit-premium-card__label--edu {
  color: #3D2566;
  background: var(--purple-light);
  border-color: rgba(91,58,142,.22);
}

.kit-premium-card__vertical {
  font-size: .72rem;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: .01em;
}

.kit-premium-card__title {
  font-size: 1.42rem;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -.03em;
  line-height: 1.2;
  margin: 0 0 10px;
}

.kit-premium-card__subtitle {
  font-size: .89rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0;
}

/* ── Zona de servicios incluidos — protagonista visual ─────── */
.kit-premium-card__includes {
  background: rgba(23,32,51,.035);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 20px 20px 16px;
  margin-bottom: 20px;
}

.kit-premium-card--featured .kit-premium-card__includes {
  background: rgba(201,162,39,.05);
  border-color: rgba(201,162,39,.18);
}

.kit-premium-card--local .kit-premium-card__includes {
  background: rgba(46,125,107,.04);
  border-color: rgba(46,125,107,.15);
}

.kit-premium-card--edu .kit-premium-card__includes {
  background: rgba(91,58,142,.04);
  border-color: rgba(91,58,142,.14);
}

.kit-premium-card__includes-label {
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin: 0 0 12px;
}

/* Grid de chips 2 columnas */
.kit-premium-card__chips {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 7px;
}

.kit-pchip {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .80rem;
  color: var(--text-main);
  line-height: 1.3;
  padding: 7px 10px;
  background: rgba(255,255,255,.75);
  border: 1px solid rgba(23,32,51,.09);
  border-radius: 8px;
  transition: background var(--t), border-color var(--t);
}

.kit-pchip::before {
  content: "✓";
  font-size: .72rem;
  font-weight: 900;
  color: var(--gold);
  flex-shrink: 0;
  line-height: 1;
}

.kit-premium-card--local .kit-pchip::before {
  color: #2E7D6B;
}

.kit-premium-card--edu .kit-pchip::before {
  color: var(--purple);
}

.kit-pchip strong {
  font-weight: 700;
}

.kit-premium-card:hover .kit-pchip {
  background: rgba(255,255,255,.95);
}

/* ── "Ideal para" ───────────────────────────────────────────── */
.kit-premium-card__ideal {
  font-size: .83rem;
  color: var(--text-secondary);
  line-height: 1.6;
  margin: 0 0 24px;
  flex-grow: 1;
}

.kit-premium-card__ideal strong {
  color: var(--text-main);
  font-weight: 700;
}

/* ── Footer / CTA ───────────────────────────────────────────── */
.kit-premium-card__footer {
  margin-top: auto;
  padding-top: 20px;
  border-top: 1px solid var(--border);
}

.kit-premium-card__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 13px 24px;
  border-radius: 10px;
  font-size: .90rem;
  font-weight: 700;
  letter-spacing: -.01em;
  text-decoration: none;
  transition: background var(--t), box-shadow var(--t), transform var(--t), color var(--t);

  /* CTA base: ghost con acento */
  background: transparent;
  color: var(--text-main);
  border: 1.5px solid var(--border-strong);
}

.kit-premium-card__cta:hover {
  background: var(--bg-main);
  border-color: var(--text-main);
  transform: translateY(-1px);
}

/* CTA destacado (Oficina) */
.kit-premium-card__cta--featured {
  background: var(--gold);
  color: #fff;
  border-color: var(--gold);
  box-shadow: 0 4px 16px rgba(201,162,39,.30);
}

.kit-premium-card__cta--featured:hover {
  background: #b8911f;
  border-color: #b8911f;
  box-shadow: 0 6px 24px rgba(201,162,39,.40);
  transform: translateY(-2px);
}

.kf-nivel {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.kf-precio {
  font-size: 1.18rem;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -.03em;
}

.kf-desc {
  font-size: .78rem;
  color: var(--text-secondary);
  line-height: 1.4;
}


/* ════════════════════════════════════════════════════════════════════
   SECCIÓN SOBRE MÍ — .tl-author
   Layout: dos columnas (foto · texto) en desktop, apilado en móvil.
   Fondo: paper blanco roto, diferenciado del ivory principal.
   Detalle dorado: línea fina superior + acento en firma.
════════════════════════════════════════════════════════════════════ */

.tl-author {
  background: var(--bg-card, #FBFAF7);
  border-top: 1px solid var(--border, #DDD0BF);
  border-bottom: 1px solid var(--border, #DDD0BF);
  padding: clamp(72px, 9vw, 112px) 0;
  position: relative;
}

/* Línea dorada muy fina en la parte superior — detalle editorial */
.tl-author::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, var(--gold, #B9952E) 30%, var(--gold, #B9952E) 70%, transparent 100%);
  opacity: .35;
  pointer-events: none;
}

/* ── Inner ─────────────────────────────────────────────────────── */
.tl-author__inner {
  width: min(100% - 48px, 1200px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 300px 1fr;
  gap: clamp(48px, 7vw, 96px);
  align-items: center;
}

/* ── Columna foto ──────────────────────────────────────────────── */
.tl-author__photo-col {
  display: flex;
  justify-content: center;
}

/* Marco de foto: esquinas redondeadas estilo editorial */
.tl-author__frame {
  width: 100%;
  max-width: 280px;
  aspect-ratio: 5 / 6;
  border-radius: var(--radius-lg, 18px);
  overflow: hidden;
  border: 1px solid var(--border, #DDD0BF);
  box-shadow:
    0 2px 8px rgba(17,24,39,.06),
    0 10px 32px rgba(17,24,39,.08);
  position: relative;
  background: var(--bg-secondary, #EFE9DF);
  /* Sutil borde interno dorado: realce sin peso visual */
  outline: 2px solid rgba(185,149,46,.12);
  outline-offset: -3px;
}

/* Imagen real (descomentada cuando está disponible) */
.tl-author__photo {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 15%;
  display: block;
  filter: saturate(0.92) contrast(0.98);
  transition: filter var(--t, .22s ease);
}

/* ── Placeholder elegante — activo hasta añadir la foto ──────── */
.tl-author__placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  background: linear-gradient(155deg, #F0EBE0 0%, #E3DAC8 100%);
}

/* Círculo con iniciales — suave, nada llamativo */
.tl-author__initials {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 72px;
  height: 72px;
  border-radius: 50%;
  background: rgba(185,149,46,.12);
  border: 1.5px solid rgba(185,149,46,.28);
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: .05em;
  color: var(--gold, #B9952E);
  user-select: none;
}

.tl-author__placeholder-note {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted, #9CA3AF);
  opacity: .7;
}

/* ── Columna contenido ─────────────────────────────────────────── */
.tl-author__content {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Título principal */
.tl-author__title {
  font-size: clamp(1.5rem, 2.6vw, 2rem);
  font-weight: 800;
  color: var(--text-main, #111827);
  letter-spacing: -.03em;
  line-height: 1.18;
  margin: 0 0 28px;
}

/* Cuerpo de texto: párrafos con respiro */
.tl-author__body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 36px;
}

.tl-author__body p {
  font-size: .94rem;
  color: var(--text-secondary, #4B5563);
  line-height: 1.75;
  margin: 0;
}

/* Primer párrafo con ligero énfasis — nombre del autor */
.tl-author__body p:first-child {
  font-weight: 600;
  color: var(--text-main, #111827);
}

/* ── Firma ─────────────────────────────────────────────────────── */
.tl-author__signature {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 32px;
  padding-left: 20px;
  position: relative;
}

/* Línea dorada izquierda — detalle de precisión */
.tl-author__signature-rule {
  position: absolute;
  left: 0;
  top: 2px;
  bottom: 2px;
  width: 2.5px;
  background: linear-gradient(to bottom, var(--gold, #B9952E), rgba(185,149,46,.2));
  border-radius: 2px;
}

.tl-author__name {
  font-size: .97rem;
  font-weight: 800;
  color: var(--text-main, #111827);
  letter-spacing: -.02em;
}

.tl-author__role {
  font-size: .83rem;
  font-weight: 600;
  color: var(--gold, #B9952E);
  letter-spacing: .02em;
}

.tl-author__tagline {
  font-size: .78rem;
  color: var(--text-muted, #9CA3AF);
  font-style: italic;
}

/* ── CTA discreto ──────────────────────────────────────────────── */
.tl-author__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: .83rem;
  font-weight: 700;
  letter-spacing: .01em;
  color: var(--text-secondary, #4B5563);
  border-bottom: 1px solid var(--border-strong, #C4B49E);
  padding-bottom: 2px;
  width: fit-content;
  transition: color var(--t, .22s ease), border-color var(--t, .22s ease);
}

.tl-author__cta:hover {
  color: var(--purple, #4B2E83);
  border-color: var(--purple, #4B2E83);
}

.tl-author__cta svg {
  transition: transform var(--t, .22s ease);
  flex-shrink: 0;
}

.tl-author__cta:hover svg {
  transform: translateX(3px);
}

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 780px) {
  .tl-author__inner {
    grid-template-columns: 1fr;
    gap: 40px;
  }

  .tl-author__photo-col {
    justify-content: flex-start;
  }

  .tl-author__frame {
    max-width: 200px;
    aspect-ratio: 1 / 1;
    border-radius: var(--radius-md, 12px);
  }

  .tl-author__initials {
    width: 60px;
    height: 60px;
    font-size: 1.2rem;
  }
}

@media (max-width: 480px) {
  .tl-author {
    padding: clamp(52px, 8vw, 72px) 0;
  }

  .tl-author__inner {
    width: min(100% - 32px, 1200px);
    gap: 32px;
  }

  .tl-author__frame {
    max-width: 160px;
  }

  .tl-author__title {
    font-size: 1.35rem;
  }

  .tl-author__body p {
    font-size: .88rem;
  }
}


/* ════════════════════════════════════════════════════════════════════
   MUESTRA DEL MÉTODO — .tl-compare
   Comparativa Antes / Después. Fondo ivory, dos tarjetas equilibradas.
   "Después" con acento dorado sutil.
   ════════════════════════════════════════════════════════════════════ */

.tl-compare {
  background: var(--bg-main);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: clamp(72px, 9vw, 112px) 0;
  position: relative;
}

/* Línea dorada horizontal — eco del .tl-author */
.tl-compare::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2px;
  background: linear-gradient(90deg, transparent 0%, rgba(185,149,46,.28) 35%, rgba(185,149,46,.28) 65%, transparent 100%);
  pointer-events: none;
}

/* ── Inner ─────────────────────────────────────────────────────── */
.tl-compare__inner {
  width: min(100% - 48px, 1100px);
  margin: 0 auto;
}

/* ── Cabecera centrada ─────────────────────────────────────────── */
.tl-compare__header {
  max-width: 660px;
  margin: 0 auto clamp(48px, 6vw, 72px);
  text-align: center;
}

.tl-compare__title {
  font-size: clamp(1.55rem, 3.2vw, 2.1rem);
  font-weight: 700;
  line-height: 1.25;
  color: var(--text-main);
  margin-bottom: 16px;
  letter-spacing: -.03em;
}

.tl-compare__lead {
  font-size: clamp(.93rem, 1.4vw, 1.03rem);
  color: var(--text-secondary);
  line-height: 1.72;
}

/* ── Grid de tarjetas ──────────────────────────────────────────── */
.tl-compare__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(18px, 2.5vw, 32px);
  align-items: start;
}

/* ── Tarjeta base ──────────────────────────────────────────────── */
.tl-compare__card {
  border-radius: var(--radius-lg);
  padding: clamp(28px, 4vw, 44px);
  position: relative;
  overflow: hidden;
}

/* Tarjeta Antes — sobria, ligeramente rebajada */
.tl-compare__card--before {
  background: var(--bg-card);
  border: 1px solid var(--border);
  opacity: .86;
}

/* Tarjeta Después — destacada con acento dorado */
.tl-compare__card--after {
  background: var(--bg-card);
  border: 1.5px solid rgba(185,149,46,.38);
  box-shadow: 0 4px 24px rgba(185,149,46,.07), var(--shadow-sm);
}

/* Franja dorada en la parte superior de la tarjeta "Después" */
.tl-compare__card--after::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: linear-gradient(90deg, rgba(185,149,46,.35), rgba(185,149,46,.72) 50%, rgba(185,149,46,.35));
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
}

/* ── Cabecera de tarjeta ───────────────────────────────────────── */
.tl-compare__card-header {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.tl-compare__card-title {
  font-size: 1.45rem;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -.03em;
}

/* Badge pequeño de contexto */
.tl-compare__badge {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 99px;
  white-space: nowrap;
}

.tl-compare__badge--before {
  background: rgba(107,114,128,.10);
  color: var(--text-muted);
}

.tl-compare__badge--after {
  background: rgba(185,149,46,.12);
  color: var(--gold);
}

/* ── Cita de la petición ───────────────────────────────────────── */
.tl-compare__quote {
  font-size: .9rem;
  font-style: italic;
  color: var(--text-secondary);
  border-left: 3px solid var(--border);
  padding: 10px 16px;
  margin-bottom: 24px;
  border-radius: 0 4px 4px 0;
  background: rgba(17,24,39,.025);
  line-height: 1.6;
}

.tl-compare__card--after .tl-compare__quote {
  border-left-color: rgba(185,149,46,.4);
}

/* ── Lista de resultados ───────────────────────────────────────── */
.tl-compare__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tl-compare__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .93rem;
  line-height: 1.55;
  color: var(--text-secondary);
}

/* Guión apagado para "Antes" */
.tl-compare__list--before li::before {
  content: '—';
  flex-shrink: 0;
  color: var(--text-muted);
  font-size: .78rem;
  margin-top: 3px;
  min-width: 14px;
}

/* Check dorado para "Después" */
.tl-compare__list--after li {
  color: var(--text-main);
}

.tl-compare__list--after li::before {
  content: '✓';
  flex-shrink: 0;
  color: var(--gold);
  font-size: .8rem;
  font-weight: 700;
  margin-top: 2px;
  min-width: 14px;
}

/* ── Cierre de sección ─────────────────────────────────────────── */
.tl-compare__footer {
  margin-top: clamp(48px, 6vw, 64px);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}

.tl-compare__closing {
  max-width: 560px;
  font-size: clamp(.93rem, 1.3vw, 1.03rem);
  color: var(--text-secondary);
  line-height: 1.72;
}

/* ── Bloque de evidencia real ──────────────────────────────────── */
.tl-compare__evidence {
  margin-top: clamp(36px, 5vw, 52px);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-card);
}

.tl-compare__evidence-header {
  padding: 18px 28px 16px;
  border-bottom: 1px solid var(--border);
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.tl-compare__evidence-label {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(185,149,46,.10);
  border: 1px solid rgba(185,149,46,.22);
  border-radius: 4px;
  padding: 3px 9px;
  white-space: nowrap;
}

.tl-compare__evidence-title {
  font-size: .95rem;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: -.02em;
}

.tl-compare__evidence-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
}

/* Columna izquierda — prompt oscuro */
.tl-compare__prompt-mini {
  background: var(--bg-dark);
  border-right: 1px solid rgba(255,255,255,.06);
}

.tl-compare__prompt-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 20px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.tl-compare__prompt-bar > span:first-child {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: rgba(255,255,255,.42);
}

.tl-compare__prompt-badge {
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(185,149,46,.12);
  border: 1px solid rgba(185,149,46,.25);
  border-radius: 3px;
  padding: 2px 7px;
}

.tl-compare__prompt-body {
  padding: 20px 22px;
  font-size: .84rem;
  line-height: 1.78;
  color: rgba(255,255,255,.78);
  display: flex;
  flex-direction: column;
  gap: 11px;
}

.tl-compare__var {
  color: var(--gold);
  font-weight: 600;
}

/* Columna derecha — checklist claro */
.tl-compare__checklist-mini {
  padding: 20px 24px;
}

.tl-compare__checklist-title {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.tl-compare__checklist-mini ul {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.tl-compare__checklist-mini li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .88rem;
  color: var(--text-secondary);
  line-height: 1.52;
}

.tl-compare__checklist-mini li::before {
  content: '';
  flex-shrink: 0;
  width: 16px;
  height: 16px;
  margin-top: 2px;
  border-radius: 50%;
  border: 1.5px solid rgba(75,46,131,.25);
  background: rgba(75,46,131,.06);
  display: block;
}

/* ── Resultado tras revisión ───────────────────────────────────── */
.tl-compare__result {
  margin-top: 20px;
  padding: 16px 18px;
  border-radius: var(--radius-md);
  background: rgba(185,149,46,.04);
  border: 1px solid rgba(185,149,46,.20);
  position: relative;
}

/* Línea dorada izquierda muy fina */
.tl-compare__result::before {
  content: '';
  position: absolute;
  left: 0; top: 12px; bottom: 12px;
  width: 2.5px;
  background: linear-gradient(to bottom, rgba(185,149,46,.6), rgba(185,149,46,.2));
  border-radius: 2px;
}

.tl-compare__result-label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 10px;
}

.tl-compare__result-text {
  font-size: .88rem;
  font-style: italic;
  color: var(--text-main);
  line-height: 1.65;
  margin-bottom: 10px;
}

.tl-compare__result-note {
  font-size: .76rem;
  color: var(--text-muted);
  line-height: 1.5;
}

/* Nota inferior */
.tl-compare__evidence-note {
  padding: 14px 28px;
  border-top: 1px solid var(--border);
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px;
  background: rgba(185,149,46,.025);
}

.tl-compare__evidence-note p {
  font-size: .8rem;
  color: var(--text-muted);
  line-height: 1.5;
}

.tl-compare__evidence-note a {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .8rem;
  font-weight: 700;
  color: var(--gold);
  white-space: nowrap;
  transition: opacity var(--t);
}

.tl-compare__evidence-note a:hover {
  opacity: .7;
}

/* ── Responsive ────────────────────────────────────────────────── */
@media (max-width: 720px) {
  .tl-compare__grid {
    grid-template-columns: 1fr;
  }

  .tl-compare__card--before {
    opacity: 1;
  }

  .tl-compare__evidence-cols {
    grid-template-columns: 1fr;
  }

  .tl-compare__prompt-mini {
    border-right: none;
    border-bottom: 1px solid rgba(255,255,255,.07);
  }

  .tl-compare__evidence-note {
    flex-direction: column;
    align-items: flex-start;
  }
}

@media (max-width: 480px) {
  .tl-compare__inner {
    width: min(100% - 32px, 1100px);
  }

  .tl-compare__card {
    padding: 28px 24px;
  }

  .tl-compare__title {
    font-size: 1.35rem;
  }

  .tl-compare__lead {
    font-size: .88rem;
  }
}


/* ── Método TEIMA — variante 4 columnas ───────────────────── */

/* El grid base usa auto-fit con minmax(185px). Con 4 tarjetas
   en lugar de 5, simplemente forzamos el máximo a 4 columnas. */
.metodo-grid--4 {
  grid-template-columns: repeat(4, 1fr);
}


/* ── Footer nav — 3 columnas con headings ─────────────────── */

.footer-nav {
  display: flex;
  justify-content: center;
  gap: 64px;
  margin-top: 32px;
  flex-wrap: wrap;
  text-align: left;
}

.footer-nav-col { min-width: 130px; }

.footer-nav-heading {
  display: block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(246,242,234,.28);
  margin-bottom: 12px;
}

.footer-nav .footer-links {
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  margin-top: 0;
  justify-content: flex-start;
}

.footer-nav .footer-links a {
  font-size: .82rem;
}


/* ════════════════════════════════════════════════════════════════════
   PÁGINA KITS — componentes específicos de kits.html
════════════════════════════════════════════════════════════════════ */

/* ── Page hero — hero de páginas interiores ─────────────────── */

.page-hero {
  padding: 64px 0 0;
  background: var(--bg-main);
  border-bottom: 1px solid var(--border);
}

.page-hero__content {
  max-width: 700px;
  padding-bottom: 48px;
}

.page-hero__content .tag {
  margin-bottom: 16px;
}

.page-hero__title {
  font-size: clamp(2rem, 4.5vw, 3rem);
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -.04em;
  line-height: 1.15;
  margin: 12px 0 20px;
}

.page-hero__title em {
  font-style: italic;
  color: var(--purple);
}

.page-hero__lead {
  font-size: 1.05rem;
  color: var(--text-secondary);
  line-height: 1.7;
  max-width: 580px;
}

/* Barra de stats del hero */
.page-hero__bar {
  display: flex;
  align-items: center;
  gap: 0;
  border-top: 1px solid var(--border);
  padding: 24px 0;
  flex-wrap: wrap;
}

.phb-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 0 32px 0 0;
}

.phb-num {
  font-size: 1.5rem;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -.04em;
  line-height: 1;
}

.phb-label {
  font-size: .75rem;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: .02em;
}

.phb-sep {
  width: 1px;
  height: 36px;
  background: var(--border);
  margin-right: 32px;
  flex-shrink: 0;
}

/* ── Breadcrumb ──────────────────────────────────────────────── */

.breadcrumb { margin-bottom: 32px; }

.breadcrumb-list {
  display: flex;
  align-items: center;
  gap: 8px;
  list-style: none;
  font-size: .8rem;
  color: var(--text-muted);
}

.breadcrumb-list a {
  color: var(--text-muted);
  transition: color var(--t);
}
.breadcrumb-list a:hover { color: var(--purple); }

/* ── Sección catálogo — encabezado con desc lateral ─────────── */

.section-catalog {
  padding: 80px 0;
  background: var(--bg-main);
}

/* .section-catalog--soon eliminada — sin uso */

.catalog-heading {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
  margin-bottom: 40px;
  flex-wrap: wrap;
}

.catalog-heading .section-title {
  margin-top: 10px;
  margin-bottom: 0;
}

.catalog-heading__desc {
  font-size: .9rem;
  color: var(--text-secondary);
  max-width: 320px;
  line-height: 1.6;
  padding-bottom: 4px;
}

/* ── Tag variante muted (para "en preparación") ─────────────── */

.tag--muted {
  color: var(--text-muted);
  background: rgba(159,148,138,.1);
  border-color: rgba(159,148,138,.25);
}

/* .kit-dest-card--soon eliminada — sin uso */

.kit-dest-badge--muted {
  color: var(--text-muted);
  background: rgba(159,148,138,.1);
  border-color: rgba(159,148,138,.22);
}

/* ── Sección comparativa de niveles (tiers) ─────────────────── */

.section-tiers {
  padding: 88px 0;
  background: var(--bg-secondary);
}

.tiers-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: start;
}

/* Tarjeta de nivel base */
.tier-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: var(--shadow-sm);
  transition: box-shadow var(--t), transform var(--t);
}

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

/* Variante destacada */
.tier-card--featured {
  border-color: var(--purple);
  border-width: 2px;
  box-shadow: var(--shadow-md), 0 0 0 4px var(--purple-light);
  transform: translateY(-6px);
}
.tier-card--featured:hover {
  transform: translateY(-9px);
  box-shadow: var(--shadow-lg), 0 0 0 4px var(--purple-light);
}

/* Cabecera de la tarjeta */
.tier-card__header {
  padding: 28px 28px 24px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-secondary);
  position: relative;
}

.tier-badge-top {
  position: absolute;
  top: -1px;
  left: 50%;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  font-size: .66rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #F6F2EA;
  background: var(--purple);
  border-radius: 0 0 8px 8px;
  padding: 4px 14px;
  white-space: nowrap;
}

.tier-label {
  display: block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 10px;
  margin-top: 14px;
}

.tier-price {
  font-size: 1rem;
  color: var(--text-secondary);
  margin-bottom: 10px;
}

.tier-price strong {
  font-size: 2rem;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -.04em;
}

.tier-desc {
  font-size: .84rem;
  color: var(--text-secondary);
  line-height: 1.55;
}

/* Lista de contenido incluido */
.tier-includes {
  list-style: none;
  padding: 24px 28px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
  flex-grow: 1;
}

.tier-includes li {
  font-size: .84rem;
  color: var(--text-secondary);
  padding-left: 22px;
  position: relative;
  line-height: 1.45;
}

.tier-includes li::before {
  content: "✓";
  position: absolute;
  left: 0;
  color: var(--gold);
  font-weight: 700;
  font-size: .8rem;
}

.tier-card--featured .tier-includes li::before {
  color: var(--purple);
}

/* Footer de la tarjeta */
.tier-card__footer {
  padding: 20px 28px 28px;
  border-top: 1px solid var(--border);
}

.tier-card__footer .btn {
  width: 100%;
  justify-content: center;
  text-align: center;
}

/* Nota debajo de los tiers */
.tiers-note {
  text-align: center;
  margin-top: 36px;
  font-size: .82rem;
  color: var(--text-muted);
  line-height: 1.6;
}

.tiers-note a {
  color: var(--purple);
  font-weight: 600;
  transition: color var(--t);
}
.tiers-note a:hover { color: var(--purple-dark); }


/* ── Sección "¿No sabes qué kit necesitas?" ─────────────────── */

.section-kits-no-sabes {
  padding: 80px 0;
  background: var(--bg-dark);
}

.no-sabes-wrapper {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 64px;
  align-items: center;
}

.no-sabes__text .tag { margin-bottom: 16px; }

.no-sabes__title {
  font-size: clamp(1.6rem, 3vw, 2.2rem);
  font-weight: 800;
  color: #F6F2EA;
  letter-spacing: -.03em;
  line-height: 1.25;
  margin-bottom: 16px;
}

.no-sabes__text p {
  font-size: .92rem;
  color: rgba(246,242,234,.55);
  line-height: 1.7;
}

/* Puntos del proceso */
.no-sabes__puntos {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

.nsp-item {
  display: flex;
  align-items: flex-start;
  gap: 20px;
}

.nsp-num {
  font-size: 1.6rem;
  font-weight: 800;
  font-style: italic;
  color: var(--gold);
  opacity: .5;
  line-height: 1;
  min-width: 42px;
  letter-spacing: -.04em;
}

.nsp-text {
  font-size: .9rem;
  color: rgba(246,242,234,.6);
  line-height: 1.55;
  padding-top: 4px;
}


/* ════════════════════════════════════════════════════════════════════
   INDICADORES DIRECCIONALES
   Flechas sutiles, conectores y señales de lectura.
   Sistema TEIMA — guía visual sin decoración excesiva.
════════════════════════════════════════════════════════════════════ */

/* ── 1. Botones principales — flecha sutil con deslizamiento ─────── */

.btn-primary::after,
.btn-ghost::after,
.ready-kit-card__cta::after,
.next-vertical-card__link::after,
.pricing-plan__cta::after {
  content: "→";
  display: inline-block;
  margin-left: 6px;
  font-size: .88em;
  line-height: 1;
  font-weight: 900;
  transition: transform 180ms ease;
}

.btn-primary:hover::after,
.btn-ghost:hover::after,
.ready-kit-card__cta:hover::after,
.next-vertical-card__link:hover::after,
.pricing-plan__cta:hover::after {
  transform: translateX(3px);
}

/* Sin flecha en botones a ancho completo de tarjetas de niveles */
.tier-card__footer .btn::after { display: none; }


/* ── 2. Sistema TEIMA — indicador de secuencia en número ─────────── */
/* Grid 2×2 sobre fondo oscuro. La flecha tras el número insinúa     */
/* continuidad sin imponer una dirección en el espacio.              */

.system-card__num::after {
  content: " →";
  /* Anula la herencia de -webkit-text-fill-color: transparent */
  -webkit-text-fill-color: rgba(199, 163, 58, 0.32);
  color: rgba(199, 163, 58, 0.32);
  font-size: 1.1rem;
  font-weight: 900;
  transition: -webkit-text-fill-color 240ms ease, color 240ms ease;
}

.system-card:hover .system-card__num::after {
  -webkit-text-fill-color: rgba(199, 163, 58, 0.68);
  color: rgba(199, 163, 58, 0.68);
}

/* El paso final no lleva flecha — es el resultado */
.system-card:last-child .system-card__num::after {
  display: none;
}


/* ── 3. Diagnóstico — conector vertical entre pasos ─────────────── */
/* Línea fina detrás de los bubbles numerados en desktop.            */

.guidance-steps {
  position: relative;
}

@media (min-width: 640px) {
  .guidance-steps::before {
    content: "";
    position: absolute;
    left: 17px;       /* centra la línea en el bubble de 36px */
    top: 38px;        /* arranca bajo el primer número */
    bottom: 38px;     /* termina sobre el último número */
    width: 1px;
    background: linear-gradient(
      to bottom,
      rgba(91, 58, 142, 0.22) 0%,
      rgba(91, 58, 142, 0.07) 100%
    );
    pointer-events: none;
  }
}


/* ── 4. Hero — scroll cue sutil ──────────────────────────────────── */

.hero__scroll-cue {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  margin-top: 28px;
  color: var(--text-muted, #94A3B8);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  user-select: none;
}

.hero__scroll-cue::after {
  content: "↓";
  display: inline-block;
  font-size: .95rem;
  line-height: 1;
  animation: teimaCue 1.9s ease-in-out infinite;
}

@keyframes teimaCue {
  0%, 100% { transform: translateY(0);   opacity: 0.45; }
  50%       { transform: translateY(4px); opacity: 0.9;  }
}

/* En móvil el scroll cue se oculta — los botones ya guían suficiente */
@media (max-width: 700px) {
  .hero__scroll-cue { display: none; }
}


/* ════════════════════════════════════════════════════════════════════
   TL-KITS — Sección "Kits listos para usar"
   Clases independientes (prefijo tl-) para evitar conflictos.
════════════════════════════════════════════════════════════════════ */

.tl-kits {
  padding: clamp(88px, 10vw, 140px) 0;
  background:
    radial-gradient(circle at 8% 0%, rgba(91, 58, 145, 0.07), transparent 34%),
    linear-gradient(180deg, #f8fafc 0%, #f3eee5 100%);
}

.tl-kits__inner {
  width: min(100% - 48px, 1320px);
  margin-inline: auto;
}

/* ── Cabecera en dos columnas ───────────────────────────────────── */

.tl-kits__header {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(280px, 0.75fr);
  gap: clamp(32px, 6vw, 96px);
  align-items: end;
  margin-bottom: clamp(40px, 5vw, 68px);
}

.tl-eyebrow {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #9b7a16;
  margin: 0 0 14px;
}

.tl-kits__title {
  margin: 0;
  font-size: clamp(2.6rem, 5vw, 5rem);
  line-height: 0.95;
  letter-spacing: -0.07em;
  color: #172033;
}

.tl-kits__lead {
  margin: 0;
  color: #64748b;
  font-size: 1.06rem;
  line-height: 1.7;
}

/* ── Grid de tarjetas ───────────────────────────────────────────── */

.tl-kits__grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
  align-items: stretch;
}

/* ── Tarjeta base ───────────────────────────────────────────────── */

.tl-kit {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: 32px;
  border-radius: 28px;
  background: linear-gradient(180deg, rgba(255,255,255,0.97), rgba(255,255,255,0.90));
  border: 1px solid rgba(216, 225, 232, 0.9);
  box-shadow:
    0 20px 60px rgba(23, 32, 51, 0.08),
    0 1px 0 rgba(255,255,255,0.9) inset;
  transition: box-shadow 200ms ease, transform 200ms ease;
}

.tl-kit:hover {
  box-shadow:
    0 28px 72px rgba(23, 32, 51, 0.12),
    0 1px 0 rgba(255,255,255,0.95) inset;
  transform: translateY(-3px);
}

/* ── Variante destacada ─────────────────────────────────────────── */

.tl-kit--featured {
  background:
    radial-gradient(circle at 100% 0%, rgba(91, 58, 145, 0.10), transparent 38%),
    linear-gradient(180deg, #ffffff 0%, #f8f4ff 100%);
  border-color: rgba(91, 58, 145, 0.26);
  box-shadow:
    0 32px 88px rgba(91, 58, 145, 0.16),
    0 1px 0 rgba(255,255,255,0.95) inset;
  transform: translateY(-10px);
}

.tl-kit--featured:hover {
  transform: translateY(-13px);
  box-shadow:
    0 40px 100px rgba(91, 58, 145, 0.22),
    0 1px 0 rgba(255,255,255,0.95) inset;
}

/* ── Etiqueta de vertical ───────────────────────────────────────── */

.tl-kit__label {
  display: inline-flex;
  width: fit-content;
  padding: 6px 12px;
  margin-bottom: 20px;
  border-radius: 999px;
  background: rgba(199, 163, 58, 0.12);
  border: 1px solid rgba(199, 163, 58, 0.30);
  color: #9b7a16;
  font-size: 0.70rem;
  font-weight: 900;
  letter-spacing: 0.11em;
  text-transform: uppercase;
}

/* ── Nombre del kit ─────────────────────────────────────────────── */

.tl-kit__name {
  margin: 0 0 10px;
  color: #172033;
  font-size: clamp(1.55rem, 2.2vw, 2rem);
  line-height: 1;
  letter-spacing: -0.045em;
}

/* ── Subtítulo ──────────────────────────────────────────────────── */

.tl-kit__subtitle {
  margin: 0;
  color: #172033;
  font-size: 1rem;
  font-weight: 800;
  line-height: 1.5;
}

/* ── Descripción ────────────────────────────────────────────────── */

.tl-kit__text {
  margin: 18px 0 0;
  color: #64748b;
  font-size: 0.96rem;
  line-height: 1.72;
}

/* ── Features: chips con → ──────────────────────────────────────── */

.tl-kit__features {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}

.tl-kit__features span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 6px 12px;
  border-radius: 999px;
  background: rgba(91, 58, 145, 0.065);
  border: 1px solid rgba(91, 58, 145, 0.15);
  color: #3d2b5f;
  font-size: 0.82rem;
  line-height: 1;
}

.tl-kit__features span::before {
  content: "→";
  color: #5b3a91;
  font-weight: 900;
  font-size: 0.78rem;
  flex-shrink: 0;
}

/* ── Bloque "Ideal para" ────────────────────────────────────────── */

.tl-kit__ideal {
  margin-top: 22px;
  padding: 14px 18px;
  border-radius: 16px;
  background: rgba(248, 250, 252, 0.85);
  border-left: 3px solid #c7a33a;
  color: #64748b;
  font-size: 0.90rem;
  line-height: 1.62;
}

.tl-kit__ideal strong {
  color: #172033;
  font-weight: 700;
}

/* ── Footer: precio + CTA ───────────────────────────────────────── */

.tl-kit__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-top: auto;
  padding-top: 28px;
}

.tl-kit__price {
  margin: 0;
  color: #172033;
  font-size: 1.35rem;
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
}

.tl-kit__price span {
  display: block;
  margin-bottom: 3px;
  color: #64748b;
  font-size: 0.70rem;
  font-weight: 800;
  letter-spacing: 0.09em;
  text-transform: uppercase;
}

/* ── Botón CTA ──────────────────────────────────────────────────── */

.tl-kit__button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 20px;
  border-radius: 999px;
  border: 1px solid rgba(91, 58, 145, 0.28);
  background: #ffffff;
  color: #5b3a91;
  font-size: 0.88rem;
  font-weight: 900;
  text-decoration: none;
  white-space: nowrap;
  transition: transform 180ms ease, box-shadow 180ms ease;
}

.tl-kit__button::after {
  content: "→";
  display: inline-block;
  margin-left: 6px;
  font-size: 0.82rem;
  transition: transform 180ms ease;
}

.tl-kit__button:hover {
  transform: translateY(-2px);
  box-shadow: 0 14px 32px rgba(91, 58, 145, 0.14);
}

.tl-kit__button:hover::after {
  transform: translateX(3px);
}

.tl-kit__button--featured {
  background: #5b3a91;
  color: #ffffff;
  border-color: #5b3a91;
  box-shadow: 0 14px 38px rgba(91, 58, 145, 0.22);
}

.tl-kit__button--featured:hover {
  box-shadow: 0 20px 48px rgba(91, 58, 145, 0.32);
}

/* ── Responsive ─────────────────────────────────────────────────── */

@media (max-width: 1020px) {
  .tl-kits__header {
    grid-template-columns: 1fr;
  }
  .tl-kits__grid {
    grid-template-columns: 1fr;
    max-width: 560px;
    margin-inline: auto;
  }
  .tl-kit--featured {
    transform: none;
  }
  .tl-kit--featured:hover {
    transform: translateY(-3px);
  }
}

@media (max-width: 640px) {
  .tl-kits__inner {
    width: min(100% - 32px, 1320px);
  }
  .tl-kit {
    padding: 24px;
    border-radius: 22px;
  }
  .tl-kit__footer {
    flex-direction: column;
    align-items: stretch;
  }
  .tl-kit__button {
    width: 100%;
    justify-content: center;
  }
}


/* ── Responsive: página kits ────────────────────────────────── */

@media (max-width: 960px) {
  .metodo-grid--4 {
    grid-template-columns: repeat(2, 1fr);
  }

  /* kits.html */
  .tiers-grid { grid-template-columns: 1fr; }
  .tier-card--featured { transform: none; }
  .tier-card--featured:hover { transform: translateY(-2px); }
  .no-sabes-wrapper { grid-template-columns: 1fr; gap: 40px; }
  .catalog-heading { flex-direction: column; align-items: flex-start; gap: 8px; }
  .catalog-heading__desc { max-width: 100%; }
  .phb-sep { display: none; }
  .phb-item { padding: 8px 24px 8px 0; }
}

@media (max-width: 600px) {
  .metodo-grid--4 {
    grid-template-columns: 1fr;
  }
  .footer-nav {
    gap: 32px;
    justify-content: flex-start;
  }

  /* kits.html */
  .page-hero { padding-top: 48px; }
  .page-hero__title { font-size: 1.9rem; }
  .page-hero__bar { gap: 0; }
  .phb-item {
    width: 50%;
    padding: 12px 0;
    border-bottom: 1px solid var(--border);
  }
  .no-sabes__puntos { gap: 16px; }
  .nsp-num { font-size: 1.2rem; min-width: 32px; }
}


/* ════════════════════════════════════════════════════════════════════
   HERO VISUAL — Panel derecho: imagen humana integrada
   Estructura: .hero-visual > figure.media + .badge
   Imagen real → assets/teima-human-work.jpg
════════════════════════════════════════════════════════════════════ */

/* ── Animación de aparición ────────────────────────────────────── */
@keyframes hero-visual-in {
  from { opacity: 0; transform: translateY(16px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Contenedor principal ──────────────────────────────────────── */
.hero-visual {
  position: relative;
  justify-self: end;
  width: min(100%, 560px);
  min-height: 460px;
  border-radius: 16px 16px 0 0;
  overflow: hidden;

  /* Sin borde ni sombra — la imagen fluye en la página */
  border: none;
  box-shadow: none;

  /* Color de fondo visible si la imagen tarda o falla */
  background: #E8DFCE;

  /* Difuminado de bordes: la imagen se disuelve en el fondo */
  mask-image:
    linear-gradient(to bottom, black 55%, transparent 97%),
    linear-gradient(to right,  black 0%, black 62%, transparent 100%);
  mask-composite: intersect;
  -webkit-mask-image:
    linear-gradient(to bottom, black 55%, transparent 97%),
    linear-gradient(to right,  black 0%, black 62%, transparent 100%);
  -webkit-mask-composite: source-in;

  /* Aparición suave con desvanecimiento */
  animation: hero-visual-in 0.75s ease both;
  animation-delay: 0.18s;
}

/* ── Figura / imagen principal ────────────────────────────────────
   IMAGEN REAL → coloca el archivo: assets/teima-human-work.jpg
   Escena ideal: persona revisando documentos, manos en primer plano,
   luz lateral cálida, escritorio neutro, sin pose corporativa.
   La imagen rellena el panel completo sin distorsión.
   ── */
.hero-visual__media {
  position: absolute;
  inset: 0;
  margin: 0;
  padding: 0;
  /* figure necesita width/height explícitos para que img los herede */
  width: 100%;
  height: 100%;
}

.hero-visual__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 20%;
  display: block;
  /* Integración suave con la paleta cálida de la web */
  filter: saturate(0.90) contrast(0.97);
}

/* Fallback de color — visible solo si la imagen no carga (gestionado en .hero-visual { background }) */

/* ── Overlay: toque cálido muy sutil sobre la imagen ───────────── */
.hero-visual::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  background:
    radial-gradient(ellipse 60% 40% at 80% 10%,
      rgba(201, 162, 39, 0.07) 0%, transparent 65%
    );
  pointer-events: none;
}

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 800px) {
  .hero-visual {
    width: 100%;
    min-height: 320px;
    border-radius: 12px 12px 0 0;
  }
}

@media (max-width: 560px) {
  .hero-visual {
    min-height: 260px;
    border-radius: 8px 8px 0 0;
  }
}


/* ════════════════════════════════════════════════════════════════════
   TL-RESOURCE-SYSTEM — Qué contiene un sistema TEIMA
   Clases: .tl-resource-system, .tl-resource-manifest, .tl-resource-module
════════════════════════════════════════════════════════════════════ */

/* ── Sección contenedora ─────────────────────────────────────────── */
.tl-resource-system {
  padding-block: clamp(72px, 10vw, 120px);
  background: var(--bg-main, #F6F2EA);
}

.tl-resource-system__inner {
  width: min(100% - 48px, 1320px);
  margin-inline: auto;
}

/* ── Cabecera ────────────────────────────────────────────────────── */
.tl-resource-system__header {
  max-width: 680px;
  margin-bottom: clamp(48px, 6vw, 72px);
}

.tl-resource-system__title {
  margin: 8px 0 16px;
  font-size: clamp(2rem, 3.5vw, 2.8rem);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 1.05;
  color: #172033;
}

.tl-resource-system__lead {
  font-size: clamp(0.95rem, 1.4vw, 1.05rem);
  color: #4a4a4a;
  line-height: 1.6;
}

/* ── Layout: manifiesto izquierda + módulos derecha ─────────────── */
.tl-resource-system__layout {
  display: grid;
  grid-template-columns: 380px 1fr;
  gap: 24px;
  align-items: start;
}

/* ── Tarjeta manifiesto ─────────────────────────────────────────── */
.tl-resource-manifest {
  position: sticky;
  top: 24px;
  background: linear-gradient(148deg, #EDE5FA 0%, #DDD1F5 100%);
  border: 1.5px solid rgba(91, 58, 142, 0.22);
  border-radius: 20px;
  padding: 36px 32px 32px;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.tl-resource-manifest__badge {
  display: inline-flex;
  width: fit-content;
  padding: 5px 12px;
  margin-bottom: 20px;
  border-radius: 999px;
  background: rgba(91, 58, 142, 0.14);
  border: 1px solid rgba(91, 58, 142, 0.28);
  color: #4a2a7a;
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.10em;
  text-transform: uppercase;
}

.tl-resource-manifest__name {
  margin: 0 0 14px;
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.04em;
  color: #172033;
  line-height: 1.1;
}

.tl-resource-manifest__desc {
  margin: 0 0 24px;
  font-size: 0.9rem;
  color: #3d3056;
  line-height: 1.65;
}

.tl-resource-manifest__includes {
  list-style: none;
  margin: 0 0 20px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tl-resource-manifest__includes li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.82rem;
  font-weight: 600;
  color: #4a2a7a;
}

.tl-resource-manifest__includes li::before {
  content: '';
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #5b3a8e;
  flex-shrink: 0;
}

.tl-resource-manifest__note {
  margin: 0;
  font-size: 0.78rem;
  font-weight: 600;
  color: rgba(91, 58, 142, 0.65);
  letter-spacing: 0.02em;
}

/* ── Columna de módulos ─────────────────────────────────────────── */
.tl-resource-modules {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* ── Tarjeta módulo individual ──────────────────────────────────── */
.tl-resource-module {
  background: #ffffff;
  border: 1.5px solid rgba(91, 58, 142, 0.10);
  border-radius: 16px;
  padding: 24px 28px;
  display: grid;
  grid-template-columns: 52px 1fr;
  gap: 0 20px;
  align-items: start;
  transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}

.tl-resource-module:hover {
  border-color: rgba(91, 58, 142, 0.22);
  box-shadow: 0 8px 32px rgba(91, 58, 142, 0.08);
  transform: translateX(3px);
}

.tl-resource-module__num {
  padding-top: 2px;
  font-size: 1.6rem;
  font-weight: 900;
  letter-spacing: -0.06em;
  line-height: 1;
  background: linear-gradient(135deg, #5b3a8e 0%, #9066c0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
}

.tl-resource-module__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tl-resource-module__name {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  color: #172033;
  line-height: 1.2;
}

.tl-resource-module__desc {
  margin: 0;
  font-size: 0.875rem;
  color: #4a4a4a;
  line-height: 1.6;
}

.tl-resource-module__features {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tl-resource-module__features li {
  padding: 3px 10px;
  border-radius: 999px;
  background: rgba(91, 58, 142, 0.07);
  border: 1px solid rgba(91, 58, 142, 0.14);
  font-size: 0.70rem;
  font-weight: 700;
  color: #5b3a8e;
  letter-spacing: 0.03em;
}

/* ── Responsive ─────────────────────────────────────────────────── */
@media (max-width: 960px) {
  .tl-resource-system__layout {
    grid-template-columns: 1fr;
  }
  .tl-resource-manifest {
    position: static;
  }
}

@media (max-width: 600px) {
  .tl-resource-system__inner {
    width: min(100% - 32px, 1320px);
  }
  .tl-resource-module {
    grid-template-columns: 40px 1fr;
    gap: 0 14px;
    padding: 20px 20px;
  }
  .tl-resource-module__num {
    font-size: 1.3rem;
  }
  .tl-resource-manifest {
    padding: 28px 24px;
    border-radius: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tl-resource-module {
    transition: none;
  }
  .tl-resource-module:hover {
    transform: none;
  }
}


/* ════════════════════════════════════════════════════════════════════
   TL-PROB — El problema real  (rediseño premium)
   Clases: .tl-prob, .tl-prob__header, .tl-prob__claim, .tl-prob-card
════════════════════════════════════════════════════════════════════ */

.tl-prob {
  padding-block: clamp(80px, 11vw, 130px);
  background: #F9F5ED;
  position: relative;
  overflow: hidden;
}

/* Acento radial dorado en esquina superior derecha */
.tl-prob::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 70% 55% at 105% -5%,
    rgba(201, 162, 39, 0.07) 0%,
    transparent 65%
  );
  pointer-events: none;
}

.tl-prob__inner {
  width: min(100% - 48px, 1320px);
  margin-inline: auto;
}

/* ── Header editorial 2 columnas ────────────────────────────────── */
.tl-prob__header {
  display: grid;
  grid-template-columns: minmax(0, 2fr) minmax(0, 1fr);
  gap: 56px;
  align-items: start;
  margin-bottom: clamp(56px, 8vw, 88px);
}

.tl-prob__title {
  margin: 10px 0 22px;
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 1.02;
  color: #172033;
}

.tl-prob__lead {
  font-size: clamp(0.95rem, 1.4vw, 1.05rem);
  color: #4a4a4a;
  line-height: 1.65;
  max-width: 520px;
}

/* Tarjeta claim (columna derecha) */
.tl-prob__claim {
  background: #ffffff;
  border: 1.5px solid rgba(201, 162, 39, 0.30);
  border-radius: 18px;
  padding: 32px 28px 26px;
  margin-top: 20px;
  position: relative;
}

.tl-prob__claim::before {
  content: '"';
  position: absolute;
  top: 8px;
  left: 18px;
  font-size: 4rem;
  line-height: 1;
  color: rgba(201, 162, 39, 0.18);
  font-family: Georgia, serif;
  pointer-events: none;
}

.tl-prob__claim-text {
  margin: 0 0 18px;
  padding-top: 20px;
  font-size: 1.06rem;
  font-weight: 700;
  font-style: italic;
  line-height: 1.45;
  color: #3d1a6e;
}

.tl-prob__claim-note {
  display: block;
  font-size: 0.77rem;
  color: #999;
  font-weight: 500;
  letter-spacing: 0.02em;
  border-top: 1px solid rgba(201, 162, 39, 0.20);
  padding-top: 14px;
}

/* ── Tarjetas de problema ───────────────────────────────────────── */
.tl-prob__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-bottom: clamp(40px, 5vw, 60px);
}

.tl-prob-card {
  position: relative;
  background: #FEFCF8;
  border: 1.5px solid rgba(201, 162, 39, 0.22);
  border-radius: 20px;
  padding: 40px 28px 36px;
  overflow: hidden;
  transition: border-color 220ms ease, box-shadow 220ms ease, transform 220ms ease;
}

.tl-prob-card:hover {
  border-color: rgba(201, 162, 39, 0.50);
  box-shadow:
    0 16px 44px rgba(201, 162, 39, 0.09),
    0 2px 8px rgba(0,0,0,0.04);
  transform: translateY(-4px);
}

/* Número grande en baja opacidad (decorativo) */
.tl-prob-card__num {
  position: absolute;
  top: -12px;
  right: 14px;
  font-size: 7rem;
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.08em;
  color: rgba(201, 162, 39, 0.065);
  pointer-events: none;
  user-select: none;
}

.tl-prob-card__icon {
  color: #9b7a16;
  opacity: 0.72;
  margin-bottom: 22px;
}

.tl-prob-card__title {
  margin: 0 0 14px;
  font-size: 1.1rem;
  font-weight: 800;
  letter-spacing: -0.03em;
  line-height: 1.25;
  color: #1a1a2e;
}

.tl-prob-card__text {
  margin: 0;
  font-size: 0.875rem;
  color: #585858;
  line-height: 1.68;
}

/* Flecha discreta en esquina inferior derecha */
.tl-prob-card::after {
  content: '→';
  position: absolute;
  bottom: 18px;
  right: 20px;
  font-size: 0.82rem;
  color: rgba(201, 162, 39, 0.30);
  transition: transform 180ms ease, color 180ms ease;
}

.tl-prob-card:hover::after {
  transform: translateX(3px);
  color: rgba(201, 162, 39, 0.62);
}

/* Línea de cierre */
.tl-prob__close {
  text-align: center;
  font-size: 0.875rem;
  font-style: italic;
  color: #999;
  letter-spacing: 0.01em;
}

.tl-prob__close::before,
.tl-prob__close::after {
  content: ' — ';
  opacity: 0.5;
}


/* ════════════════════════════════════════════════════════════════════
   TL-SOL — La solución  (rediseño premium)
   Clases: .tl-sol, .tl-sol-manifest, .tl-sol-mod
════════════════════════════════════════════════════════════════════ */

.tl-sol {
  padding-block: clamp(80px, 11vw, 130px);
  background: linear-gradient(158deg, #F6F2EA 0%, #EEE6FA 100%);
  position: relative;
  overflow: hidden;
}

/* Acento radial morado en esquina inferior izquierda */
.tl-sol::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 60% 50% at -5% 110%,
    rgba(91, 58, 142, 0.07) 0%,
    transparent 65%
  );
  pointer-events: none;
}

.tl-sol__inner {
  width: min(100% - 48px, 1320px);
  margin-inline: auto;
}

.tl-sol__header {
  max-width: 740px;
  margin-bottom: clamp(52px, 7vw, 80px);
}

.tl-sol__title {
  margin: 10px 0 18px;
  font-size: clamp(2.2rem, 4vw, 3.4rem);
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 1.02;
  color: #172033;
}

.tl-sol__lead {
  font-size: clamp(0.95rem, 1.4vw, 1.05rem);
  color: #4a4a4a;
  line-height: 1.65;
}

/* ── Layout asimétrico: manifiesto + módulos ────────────────────── */
.tl-sol__layout {
  display: grid;
  grid-template-columns: 340px 1fr;
  gap: 28px;
  align-items: start;
}

/* ── Tarjeta manifiesto (izquierda, sticky) ─────────────────────── */
.tl-sol-manifest {
  position: sticky;
  top: 28px;
  background: linear-gradient(148deg, #2e1558 0%, #4d2c85 55%, #6e4aaa 100%);
  border-radius: 22px;
  padding: 40px 32px 36px;
  color: white;
  overflow: hidden;
}

/* Círculo decorativo de fondo */
.tl-sol-manifest::before {
  content: '';
  position: absolute;
  top: -50px;
  right: -50px;
  width: 220px;
  height: 220px;
  border-radius: 50%;
  background: rgba(255,255,255,0.045);
  pointer-events: none;
}

.tl-sol-manifest::after {
  content: '';
  position: absolute;
  bottom: -30px;
  left: -30px;
  width: 140px;
  height: 140px;
  border-radius: 50%;
  background: rgba(201, 162, 39, 0.07);
  pointer-events: none;
}

.tl-sol-manifest__badge {
  display: inline-flex;
  width: fit-content;
  padding: 5px 13px;
  margin-bottom: 24px;
  border-radius: 999px;
  background: rgba(255,255,255,0.14);
  border: 1px solid rgba(255,255,255,0.24);
  font-size: 0.68rem;
  font-weight: 900;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255,255,255,0.88);
  position: relative;
}

.tl-sol-manifest__title {
  margin: 0 0 18px;
  font-size: clamp(1.35rem, 2vw, 1.72rem);
  font-weight: 800;
  letter-spacing: -0.04em;
  line-height: 1.12;
  color: #ffffff;
  position: relative;
}

.tl-sol-manifest__text {
  margin: 0 0 28px;
  font-size: 0.9rem;
  color: rgba(255,255,255,0.76);
  line-height: 1.68;
  position: relative;
}

.tl-sol-manifest__pillars {
  list-style: none;
  margin: 0;
  padding: 20px 0 0;
  border-top: 1px solid rgba(255,255,255,0.14);
  display: flex;
  flex-direction: column;
  gap: 10px;
  position: relative;
}

.tl-sol-manifest__pillars li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: 0.83rem;
  font-weight: 600;
  color: rgba(255,255,255,0.84);
}

.tl-sol-manifest__pillars li::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(201, 162, 39, 0.85);
  flex-shrink: 0;
}

/* ── Grid de 6 módulos (derecha) ────────────────────────────────── */
.tl-sol-modules {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 14px;
}

.tl-sol-mod {
  background: rgba(255, 255, 255, 0.82);
  border: 1.5px solid rgba(91, 58, 142, 0.12);
  border-radius: 16px;
  padding: 24px 22px;
  display: grid;
  grid-template-columns: 50px 1fr;
  gap: 0 14px;
  align-items: start;
  transition: border-color 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}

.tl-sol-mod:hover {
  border-color: rgba(91, 58, 142, 0.30);
  box-shadow: 0 8px 30px rgba(91, 58, 142, 0.10);
  transform: translateY(-3px);
}

/* Número con gradiente morado */
.tl-sol-mod__num {
  padding-top: 1px;
  font-size: 1.55rem;
  font-weight: 900;
  letter-spacing: -0.06em;
  line-height: 1;
  background: linear-gradient(135deg, #5b3a8e 0%, #9066c0 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  position: relative;
}

/* Flecha discreta tras el número */
.tl-sol-mod__num::after {
  content: ' →';
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0;
  -webkit-text-fill-color: rgba(91, 58, 142, 0.22);
  color: rgba(91, 58, 142, 0.22);
  vertical-align: top;
  line-height: 1.9;
  display: inline-block;
  transition: transform 180ms ease;
}

.tl-sol-mod:hover .tl-sol-mod__num::after {
  -webkit-text-fill-color: rgba(91, 58, 142, 0.55);
  color: rgba(91, 58, 142, 0.55);
  transform: translateX(2px);
}

.tl-sol-mod__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tl-sol-mod__name {
  margin: 0;
  font-size: 0.96rem;
  font-weight: 800;
  letter-spacing: -0.025em;
  color: #172033;
  line-height: 1.25;
}

.tl-sol-mod__text {
  margin: 0;
  font-size: 0.83rem;
  color: #585858;
  line-height: 1.62;
}

/* ── Responsive ─────────────────────────────────────────────────── */

@media (max-width: 1020px) {
  .tl-prob__header {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .tl-prob__claim {
    margin-top: 0;
    max-width: 460px;
  }
  .tl-sol__layout {
    grid-template-columns: 1fr;
  }
  .tl-sol-manifest {
    position: static;
  }
  .tl-sol-modules {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (max-width: 760px) {
  .tl-prob__cards {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .tl-prob__inner,
  .tl-sol__inner {
    width: min(100% - 32px, 1320px);
  }
}

@media (max-width: 600px) {
  .tl-sol-modules {
    grid-template-columns: 1fr;
    gap: 12px;
  }
  .tl-prob-card__num {
    font-size: 5rem;
  }
  .tl-sol-manifest {
    padding: 28px 24px;
    border-radius: 16px;
  }
  .tl-prob-card {
    padding: 32px 22px 28px;
    border-radius: 16px;
  }
}

@media (prefers-reduced-motion: reduce) {
  .tl-prob-card,
  .tl-sol-mod {
    transition: none;
  }
  .tl-prob-card:hover,
  .tl-sol-mod:hover {
    transform: none;
  }
  .tl-prob-card:hover::after,
  .tl-sol-mod:hover .tl-sol-mod__num::after {
    transform: none;
  }
}

/* ── Scroll snap system ─────────────────────────────────────────
   Snap suave (proximity) sólo en escritorio. En móvil desactivado
   para no romper la experiencia de scroll natural.
──────────────────────────────────────────────────────────────── */

/* Secciones principales: ancla correcta + altura mínima de viewport */
.snap-section {
  scroll-snap-align: start;
  scroll-margin-top: var(--header-height);
  min-height: calc(100svh - var(--header-height));
}

/* Snap activado sólo en pantallas ≥ 960 px */
@media (min-width: 960px) {
  html {
    scroll-snap-type: y proximity;
  }
}

/* Snap desactivado en móvil + secciones con altura automática */
@media (max-width: 959px) {
  html {
    scroll-snap-type: none;
  }
  .snap-section {
    min-height: auto;
  }
}

/* Respetar preferencia de movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
    scroll-snap-type: none;
  }
  .snap-section {
    scroll-snap-align: none;
  }
}

/* ── Barra de progreso de scroll ────────────────────────────── */
.scroll-progress {
  position: fixed;
  top: 0;
  left: 0;
  width: 0%;           /* actualizada por JS */
  height: 3px;
  background: linear-gradient(90deg, var(--gold, #C9A227) 0%, var(--purple, #5B3A8E) 100%);
  z-index: 9999;
  border-radius: 0 2px 2px 0;
  transition: width 80ms linear;
  pointer-events: none;
}

/* ── Indicador de sección activa en nav ─────────────────────── */
.nav-link {
  position: relative;
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 2px;
  background: var(--gold, #C9A227);
  border-radius: 2px;
  transform: scaleX(0);
  transition: transform 220ms ease;
  transform-origin: center;
}

.nav-link--active::after {
  transform: scaleX(1);
}

/* En móvil (menú vertical) el indicador se pone a la izquierda */
@media (max-width: 767px) {
  .nav-link::after {
    bottom: auto;
    top: 50%;
    right: auto;
    width: 2px;
    height: 60%;
    transform: translateY(-50%) scaleY(0);
    transform-origin: center;
    border-radius: 2px;
  }
  .nav-link--active::after {
    transform: translateY(-50%) scaleY(1);
  }
}


/* ════════════════════════════════════════════════════════════════════
   DIAGNÓSTICO — diagnostico.html
   Prefijo: tl-diagnosis-* / tl-form-* / tl-after-*
   Sistema de diseño TEIMA: premium, editorial, multisectorial.
════════════════════════════════════════════════════════════════════ */


/* ── HERO ────────────────────────────────────────────────────────── */

.tl-diagnosis-hero {
  background:
    radial-gradient(ellipse 80% 60% at 0% 0%, rgba(91,58,142,.12) 0%, transparent 55%),
    radial-gradient(ellipse 50% 70% at 100% 100%, rgba(201,162,39,.06) 0%, transparent 60%),
    linear-gradient(168deg, #1C1410 0%, #2a1d5e 55%, #1C1410 100%);
  padding-block: clamp(80px, 10vw, 128px);
  position: relative;
  overflow: hidden;
}

.tl-diagnosis-hero__inner {
  width: min(100% - 48px, 1280px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr minmax(300px, 460px);
  gap: clamp(40px, 6vw, 96px);
  align-items: center;
}

.tl-diagnosis-hero__content {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.tl-diagnosis-hero__content .tl-eyebrow {
  color: var(--gold-soft, #E9D8A6);
  opacity: .7;
  margin-bottom: 20px;
}

.tl-diagnosis-hero__title {
  margin: 0 0 24px;
  font-size: clamp(2.2rem, 4.5vw, 3.6rem);
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 1.05;
  color: #F6F2EA;
}

.tl-diagnosis-hero__title-em {
  display: block;
  color: var(--gold, #C9A227);
  font-style: italic;
  font-weight: 800;
}

.tl-diagnosis-hero__lead {
  margin: 0 0 36px;
  font-size: clamp(.95rem, 1.4vw, 1.08rem);
  color: rgba(246,242,234,.62);
  line-height: 1.7;
  max-width: 520px;
}

.tl-diagnosis-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 22px;
}

.tl-diagnosis-hero__micro {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin: 0;
  font-size: .76rem;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: rgba(246,242,234,.32);
}

.tl-diagnosis-hero__micro span[aria-hidden] {
  opacity: .4;
}


/* ── Process card (columna derecha del hero) ─────────────────────── */

.tl-diagnosis-process-card {
  background: linear-gradient(158deg, rgba(91,58,142,.28) 0%, rgba(61,37,102,.45) 100%);
  border: 1px solid rgba(201,162,39,.18);
  border-radius: var(--radius-xl, 28px);
  padding: clamp(28px, 4vw, 44px) clamp(24px, 3.5vw, 40px);
  position: relative;
  overflow: hidden;
}

/* Punto de luz dorado en esquina superior */
.tl-diagnosis-process-card::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -40px;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(201,162,39,.10) 0%, transparent 65%);
  pointer-events: none;
}

.tl-diagnosis-process-card__label {
  margin: 0 0 24px;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(201,162,39,.55);
}

.tl-diagnosis-process-card__steps {
  list-style: none;
  margin: 0 0 24px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}

.tl-diagnosis-process-step {
  display: flex;
  gap: 18px;
  align-items: flex-start;
  padding: 20px 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.tl-diagnosis-process-step:first-child { padding-top: 0; }
.tl-diagnosis-process-step:last-child  { border-bottom: none; padding-bottom: 0; }

.tl-diagnosis-process-step__num {
  flex-shrink: 0;
  font-size: 1.55rem;
  font-weight: 900;
  letter-spacing: -0.06em;
  line-height: 1;
  background: linear-gradient(135deg, #C9A227 0%, rgba(201,162,39,.45) 100%);
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
  color: transparent;
  margin-top: 2px;
  min-width: 36px;
}

.tl-diagnosis-process-step__body {
  display: flex;
  flex-direction: column;
  gap: 5px;
}

.tl-diagnosis-process-step__title {
  margin: 0;
  font-size: .95rem;
  font-weight: 700;
  color: #F6F2EA;
  letter-spacing: -.02em;
  line-height: 1.3;
}

.tl-diagnosis-process-step__text {
  margin: 0;
  font-size: .81rem;
  color: rgba(246,242,234,.52);
  line-height: 1.6;
}

.tl-diagnosis-process-card__note {
  margin: 0;
  font-size: .78rem;
  color: rgba(201,162,39,.5);
  line-height: 1.55;
  font-style: italic;
  border-top: 1px solid rgba(255,255,255,.06);
  padding-top: 20px;
}


/* ── REVIEW — qué revisamos antes de recomendar ─────────────────── */

.tl-diagnosis-review {
  padding-block: clamp(72px, 9vw, 112px);
  background: var(--bg-secondary, #EFE7DA);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.tl-diagnosis-review__inner {
  width: min(100% - 48px, 1280px);
  margin-inline: auto;
}

.tl-diagnosis-review__header {
  max-width: 700px;
  margin-bottom: clamp(40px, 5vw, 64px);
}

.tl-diagnosis-review__title {
  margin: 10px 0 18px;
  font-size: clamp(1.75rem, 3vw, 2.6rem);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 1.1;
  color: var(--text-main);
}

.tl-diagnosis-review__lead {
  margin: 0;
  font-size: clamp(.9rem, 1.3vw, 1rem);
  color: var(--text-secondary);
  line-height: 1.7;
}

.tl-diagnosis-review__grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}

.tl-diagnosis-review-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 18px);
  padding: 28px 24px 24px;
  position: relative;
  overflow: hidden;
  transition: border-color var(--t), box-shadow var(--t), transform var(--t);
}

.tl-diagnosis-review-card:hover {
  border-color: rgba(91,58,142,.22);
  box-shadow: 0 8px 28px rgba(91,58,142,.08);
  transform: translateY(-2px);
}

/* Número decorativo en baja opacidad */
.tl-diagnosis-review-card__num {
  position: absolute;
  top: -8px;
  right: 12px;
  font-size: 5.5rem;
  font-weight: 900;
  letter-spacing: -.08em;
  line-height: 1;
  color: rgba(91,58,142,.055);
  pointer-events: none;
  user-select: none;
}

.tl-diagnosis-review-card__body {
  position: relative;
  z-index: 1;
}

.tl-diagnosis-review-card__title {
  margin: 0 0 10px;
  font-size: .97rem;
  font-weight: 800;
  letter-spacing: -.025em;
  color: var(--text-main);
  line-height: 1.3;
}

.tl-diagnosis-review-card__text {
  margin: 0;
  font-size: .83rem;
  color: var(--text-secondary);
  line-height: 1.65;
}


/* ── FORMULARIO ─────────────────────────────────────────────────── */

.tl-diagnosis-form-section {
  padding-block: clamp(72px, 9vw, 112px);
  background: var(--bg-secondary);
}

/* Card contenedora del formulario */
.tl-diagnosis-form-wrap {
  width: min(100% - 40px, 920px);
  margin-inline: auto;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 24px;
  box-shadow:
    0 1px 3px rgba(36,28,21,.04),
    0 12px 40px rgba(36,28,21,.07),
    0 32px 72px rgba(36,28,21,.05);
  overflow: hidden;
}

/* Cabecera de la card del formulario */
.tl-diagnosis-form-header {
  padding: clamp(36px, 5vw, 56px) clamp(28px, 5vw, 60px) clamp(28px, 4vw, 44px);
  border-bottom: 1px solid var(--border);
  background: linear-gradient(158deg, #FFFDF8 0%, rgba(91,58,142,.03) 100%);
  max-width: 760px;
}

.tl-diagnosis-form-header__title {
  margin: 10px 0 14px;
  font-size: clamp(1.6rem, 2.8vw, 2.4rem);
  font-weight: 900;
  letter-spacing: -0.045em;
  color: var(--text-main);
  line-height: 1.1;
  text-wrap: balance;
}

.tl-diagnosis-form-header__lead {
  margin: 0;
  font-size: .97rem;
  color: var(--text-secondary);
  line-height: 1.68;
  max-width: 620px;
  text-wrap: pretty;
}

/* Formulario: contenedor principal — padding definido junto a .tl-form-section */

/* ── Fieldset / grupo ────────────────────────────────────────────── */
/*
  NOTA TÉCNICA: display:grid/flex en <fieldset> no funciona de forma
  fiable entre navegadores porque <legend> no participa como grid item
  (se renderiza en el borde del fieldset, fuera del anonymous content box).
  Solución: fieldset como bloque simple, legend con display:table
  (el único método cross-browser que garantiza comportamiento de bloque
  y elimina el "legend-in-border" rendering).
*/

.tl-form-group {
  border: none;
  border-top: 1px solid var(--border);
  margin: 0;
  padding: clamp(32px, 4vw, 48px) 0;
  min-width: 0;
}

.tl-form-group:first-of-type {
  border-top: none;
  padding-top: 0;
}

.tl-form-group--last {
  padding-bottom: 0;
}

/* display:table saca a <legend> del modelo de posicionamiento especial
   del fieldset y lo convierte en un elemento de bloque normal, encima
   del contenido del formulario. Es el método más fiable cross-browser. */
.tl-form-group__legend {
  display: table;
  padding: 0 0 14px;
  margin: 0 0 22px;
  width: 100%;
  font-size: .63rem;
  font-weight: 800;
  letter-spacing: .15em;
  text-transform: uppercase;
  color: var(--purple);
  border-bottom: 1.5px solid rgba(91,58,142,.13);
}

/* ── Secciones de formulario premium (cards) ─────────────────────── */
/*
  El fieldset es transparente — solo da semántica para lectores de pantalla.
  El card visual vive en el div hijo __inner.
  La legend se oculta visualmente (.sr-only) pero sigue siendo accesible.
  Esto evita el problema cross-browser del legend-on-border que hace que
  el encabezado quede mitad dentro mitad fuera del borde de la card.
*/

.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;
}

.tl-form-section {
  border: none;
  padding: 0;
  margin: 0;
  min-width: 0;
}

.tl-form-section + .tl-form-section {
  margin-top: 24px;
}

.tl-form-section__inner {
  border: 1px solid rgba(216, 210, 196, 0.85);
  border-radius: 24px;
  padding: clamp(24px, 4vw, 40px);
  background: rgba(255, 255, 255, 0.78);
  box-shadow:
    0 2px 8px rgba(23, 32, 51, 0.03),
    0 20px 56px rgba(23, 32, 51, 0.05);
}

.tl-form-section__header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 16px;
  margin-bottom: 24px;
  color: var(--text-main, #172033);
  font-size: .95rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  border-bottom: 1.5px solid rgba(216, 210, 196, 0.7);
}

.tl-form-section__num {
  color: #B9952E;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  flex-shrink: 0;
}

/* Forma el formulario como lista de cards, no como una cadena de divs */
.tl-diagnosis-form {
  padding: clamp(28px, 4vw, 40px) clamp(28px, 5vw, 60px) clamp(36px, 5vw, 56px);
}

/* Grid de campos — ancho completo bajo la legend */
.tl-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
  min-width: 0;
}

/* Campo individual */
.tl-form-field {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}

.tl-form-field--full {
  grid-column: 1 / -1;
}

/* Estado de error */
.tl-form-field--error .tl-form-input,
.tl-form-field--error .tl-form-select,
.tl-form-field--error .tl-form-textarea {
  border-color: rgba(185,64,64,.55);
  background: rgba(185,64,64,.03);
  box-shadow: 0 0 0 3px rgba(185,64,64,.08);
}

.tl-form-field__error-msg {
  display: none;
  font-size: .74rem;
  color: #B94040;
  font-weight: 500;
  line-height: 1.4;
}

.tl-form-field--error .tl-form-field__error-msg {
  display: block;
}

.tl-form-field__hint {
  font-size: .74rem;
  color: var(--text-muted);
  line-height: 1.4;
}

/* Label */
.tl-form-label {
  display: flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  font-size: .84rem;
  font-weight: 600;
  color: var(--text-main);
  letter-spacing: -.01em;
  line-height: 1.3;
  margin: 0;
}

.tl-form-label abbr {
  text-decoration: none;
  color: var(--purple);
  font-size: .85em;
}

.tl-form-label__opt {
  font-size: .7rem;
  font-weight: 500;
  color: var(--text-muted);
  letter-spacing: .01em;
  font-style: italic;
}

/* ── Pregunta con texto de ayuda (para grupos de chips) ─────────── */

.tl-form-question {
  margin-bottom: 4px;
}

.tl-form-question strong {
  display: inline;
  font-size: .84rem;
  font-weight: 700;
  color: var(--text-main, #172033);
  letter-spacing: -.01em;
}

.tl-form-question small {
  display: inline-block;
  margin-left: 8px;
  color: #8a8175;
  font-size: .76rem;
  font-style: italic;
  font-weight: 400;
}

/* Inputs, selects, textareas */
.tl-form-input,
.tl-form-select,
.tl-form-textarea {
  display: block;
  width: 100%;
  padding: 12px 16px;
  font-family: var(--font-base);
  font-size: .93rem;
  color: var(--text-main);
  background: rgba(255, 255, 255, 0.88);
  border: 1px solid rgba(216, 210, 196, 0.95);
  border-radius: 16px;
  transition: border-color var(--t), box-shadow var(--t), background var(--t);
  box-sizing: border-box;
  line-height: 1.5;
}

.tl-form-input,
.tl-form-select {
  min-height: 52px;
  padding: 0 16px;
}

.tl-form-input:hover,
.tl-form-select:hover,
.tl-form-textarea:hover {
  border-color: var(--border-strong);
}

.tl-form-input:focus,
.tl-form-select:focus,
.tl-form-textarea:focus {
  outline: none;
  border-color: rgba(91, 58, 145, 0.55);
  background: #fff;
  box-shadow: 0 0 0 4px rgba(91, 58, 145, 0.10);
}

.tl-form-input::placeholder,
.tl-form-textarea::placeholder {
  color: var(--text-muted);
  font-style: normal;
  opacity: .7;
}

.tl-form-textarea {
  resize: vertical;
  min-height: 140px;
  padding: 15px 16px;
}

/* Select wrapper */
.tl-form-select-wrap {
  position: relative;
}

.tl-form-select-wrap::after {
  content: '▾';
  position: absolute;
  right: 14px;
  top: 50%;
  transform: translateY(-50%);
  font-size: .78rem;
  color: var(--text-muted);
  pointer-events: none;
}

.tl-form-select {
  appearance: none;
  -webkit-appearance: none;
  padding-right: 38px;
  cursor: pointer;
}

/* ── Opciones: checkboxes y radios (pill buttons) ───────────────── */

.tl-form-options {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-top: 14px;
}

.tl-form-option {
  display: inline-flex;
  cursor: pointer;
}

/* Ocultar el input nativo visualmente, mantenerlo accesible */
.tl-form-option input[type="checkbox"],
.tl-form-option input[type="radio"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  clip: rect(0 0 0 0);
  overflow: hidden;
}

.tl-form-option__text {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  font-size: .84rem;
  font-weight: 600;
  color: #4b5563;
  background: rgba(255, 255, 255, 0.72);
  border: 1px solid rgba(216, 210, 196, 0.95);
  border-radius: 100px;
  transition:
    background 180ms ease,
    border-color 180ms ease,
    color 180ms ease,
    transform 180ms ease,
    box-shadow 180ms ease;
  cursor: pointer;
  line-height: 1.25;
  user-select: none;
  white-space: nowrap;
}

.tl-form-option input:checked + .tl-form-option__text {
  background: rgba(91, 58, 145, 0.10);
  border-color: rgba(91, 58, 145, 0.45);
  color: #4B2E83;
  box-shadow: none;
}

.tl-form-option:hover .tl-form-option__text {
  transform: translateY(-1px);
  border-color: rgba(91, 58, 145, 0.35);
  color: #4B2E83;
  background: rgba(255, 255, 255, 0.9);
}

.tl-form-option input:focus-visible + .tl-form-option__text {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
}

/* Radios: variante rectangular */
.tl-form-option--radio .tl-form-option__text {
  border-radius: var(--radius-sm, 6px);
  padding: 9px 18px;
}

.tl-form-option input[type="radio"]:checked + .tl-form-option__text {
  background: rgba(91, 58, 145, 0.10);
  border-color: rgba(91, 58, 145, 0.45);
  color: #4B2E83;
}

/* ── Consentimiento ─────────────────────────────────────────────── */

.tl-form-consent {
  margin-top: 28px;
  padding: 20px 22px;
  background: var(--gold-pale, rgba(201,162,39,.08));
  border: 1.5px solid rgba(201,162,39,.25);
  border-radius: var(--radius-md, 12px);
  transition: border-color var(--t), background var(--t);
}

.tl-form-consent__label {
  display: flex;
  align-items: flex-start;
  gap: 13px;
  cursor: pointer;
  font-size: .87rem;
  color: var(--text-secondary);
  line-height: 1.65;
}

.tl-form-consent__label input[type="checkbox"] {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 3px;
  accent-color: var(--purple);
  cursor: pointer;
}

.tl-form-consent__label input:focus-visible {
  outline: 2px solid var(--purple);
  outline-offset: 2px;
}

.tl-form-consent--error {
  border-color: rgba(185,64,64,.45);
  background: rgba(185,64,64,.04);
}

.tl-form-consent__error {
  display: none;
  margin-top: 9px;
  font-size: .76rem;
  color: #B94040;
  font-weight: 600;
  padding-left: 31px;
}

.tl-form-consent--error .tl-form-consent__error {
  display: block;
}

/* ── Caja de confianza pre-envío ────────────────────────────────── */

.tl-form-preflight {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  margin-top: 28px;
  padding: 18px 20px;
  background: linear-gradient(135deg, rgba(185, 149, 46, 0.06) 0%, rgba(91, 58, 145, 0.04) 100%);
  border: 1px solid rgba(185, 149, 46, 0.25);
  border-radius: 14px;
}

.tl-form-preflight__icon {
  flex-shrink: 0;
  margin-top: 1px;
  color: #B9952E;
  opacity: .85;
}

.tl-form-preflight__body {
  min-width: 0;
}

.tl-form-preflight__title {
  margin: 0 0 4px;
  font-size: .8rem;
  font-weight: 700;
  color: var(--text-main, #172033);
  letter-spacing: .01em;
  text-transform: uppercase;
}

.tl-form-preflight__text {
  margin: 0;
  font-size: .87rem;
  color: var(--text-secondary);
  line-height: 1.65;
}

/* Modificador de margen superior — sustituye inline styles */
.tl-form-field--mt { margin-top: 20px; }

/* ── Área de envío ──────────────────────────────────────────────── */

.tl-form-submit {
  margin-top: 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.tl-form-submit__note {
  margin: 0;
  font-size: .79rem;
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 440px;
}

.tl-form-submit__mailto {
  margin: 0;
  font-size: .78rem;
  color: var(--text-muted);
  line-height: 1.6;
  max-width: 480px;
  padding: 10px 14px;
  background: rgba(216, 210, 196, 0.25);
  border-radius: 10px;
  border-left: 2px solid rgba(216, 210, 196, 0.8);
}

.tl-form-submit__mailto a {
  color: var(--text-secondary);
  text-decoration: underline;
  text-underline-offset: 2px;
}

/* ── Confirmación inline ────────────────────────────────────────── */

.tl-form-confirm {
  display: none;
  margin-top: 24px;
  padding: 20px 24px;
  background: rgba(122,132,80,.09);
  border: 1px solid rgba(122,132,80,.22);
  border-left: 3px solid var(--olive, #7A8450);
  border-radius: var(--radius-md, 12px);
  color: #3d4420;
  font-size: .93rem;
  line-height: 1.65;
  font-weight: 500;
}

.tl-form-confirm.visible {
  display: block;
}

/* Estado error — fetch falló o sin conexión */
.tl-form-confirm--error {
  background: rgba(185, 28, 28, .06);
  border-color: rgba(185, 28, 28, .22);
  border-left-color: #b91c1c;
  color: #7f1d1d;
}
.tl-form-confirm--error a {
  color: #991b1b;
  font-weight: 600;
}

/* Nota de privacidad — dentro de la card, al pie */
.tl-diagnosis-privacy-note {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  padding: 18px clamp(28px, 5vw, 60px);
  border-top: 1px solid var(--border);
  margin: 0;
  font-size: .76rem;
  color: var(--text-muted);
  line-height: 1.55;
  background: var(--bg-secondary);
  border-radius: 0 0 24px 24px;
}

.tl-diagnosis-privacy-note svg {
  flex-shrink: 0;
  margin-top: 1px;
  opacity: .5;
  color: var(--purple);
}


/* ── CTA alternativo — contacto directo ────────────────────────── */

.tl-diagnosis-alt-contact {
  width: min(100% - 40px, 920px);
  margin: 32px auto 0;
  padding: 24px clamp(24px, 4vw, 40px);
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 18px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.tl-diagnosis-alt-contact__text {
  min-width: 0;
}

.tl-diagnosis-alt-contact__label {
  display: block;
  font-size: .78rem;
  font-weight: 700;
  color: var(--text-muted);
  letter-spacing: .04em;
  text-transform: uppercase;
  margin-bottom: 4px;
}

.tl-diagnosis-alt-contact__email {
  display: inline-block;
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -.01em;
  text-decoration: none;
  transition: color var(--t);
}

.tl-diagnosis-alt-contact__email:hover {
  color: var(--purple);
}

.tl-diagnosis-alt-contact__hint {
  margin: 6px 0 0;
  font-size: .8rem;
  color: var(--text-muted);
  line-height: 1.55;
}

@media (max-width: 600px) {
  .tl-diagnosis-alt-contact {
    flex-direction: column;
    align-items: flex-start;
  }
}


/* ── QUÉ OCURRE DESPUÉS ─────────────────────────────────────────── */

.tl-after-diagnosis {
  padding-block: clamp(72px, 9vw, 108px);
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.tl-after-diagnosis__inner {
  width: min(100% - 48px, 900px);
  margin-inline: auto;
  text-align: center;
}

.tl-after-diagnosis__header {
  margin-bottom: clamp(36px, 5vw, 56px);
}

.tl-after-diagnosis__title {
  margin: 10px 0 0;
  font-size: clamp(1.6rem, 2.8vw, 2.4rem);
  font-weight: 900;
  letter-spacing: -0.045em;
  color: var(--text-main);
  line-height: 1.1;
}

/* Fila horizontal: paso — conector — paso — conector — paso */
.tl-after-diagnosis__steps {
  display: flex;
  align-items: flex-start;
  justify-content: center;
  gap: 0;
  flex-wrap: wrap;
}

.tl-after-step {
  flex: 1;
  min-width: 160px;
  max-width: 240px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  text-align: center;
  padding: 8px 12px;
}

.tl-after-step__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--purple) 0%, #4A2E78 100%);
  color: #fff;
  font-size: .8rem;
  font-weight: 900;
  letter-spacing: .05em;
  flex-shrink: 0;
  box-shadow: 0 4px 14px rgba(91,58,142,.28);
}

.tl-after-step__body {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tl-after-step__title {
  margin: 0;
  font-size: .97rem;
  font-weight: 800;
  letter-spacing: -.02em;
  color: var(--text-main);
  line-height: 1.3;
}

.tl-after-step__text {
  margin: 0;
  font-size: .83rem;
  color: var(--text-secondary);
  line-height: 1.62;
}

/* Flecha SVG entre pasos */
.tl-after-step__connector {
  display: flex;
  align-items: flex-start;
  padding-top: 16px;
  color: rgba(91,58,142,.28);
  flex-shrink: 0;
  align-self: flex-start;
}

/* Timing note */
.tl-after-diagnosis__timing {
  margin: clamp(32px, 4vw, 48px) 0 0;
  font-size: .88rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.tl-after-diagnosis__timing strong {
  color: var(--text-main);
  font-weight: 700;
}


/* ── CTA FINAL ─────────────────────────────────────────────────── */

.tl-diagnosis-final-cta {
  padding-block: clamp(72px, 9vw, 108px);
  background: var(--bg-main);
}

.tl-diagnosis-final-cta__inner {
  width: min(100% - 48px, 1100px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: clamp(36px, 5vw, 72px);
  align-items: center;
}

.tl-diagnosis-final-cta__title {
  margin: 10px 0 16px;
  font-size: clamp(1.55rem, 2.6vw, 2.2rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  color: var(--text-main);
  line-height: 1.1;
}

.tl-diagnosis-final-cta__lead {
  margin: 0;
  font-size: .93rem;
  color: var(--text-secondary);
  line-height: 1.7;
  max-width: 480px;
}

.tl-diagnosis-final-cta__actions {
  display: flex;
  flex-direction: column;
  gap: 12px;
  flex-shrink: 0;
}


/* ── RESPONSIVE — diagnosis pages ──────────────────────────────── */

/* Hero: apilado en pantallas medianas */
@media (max-width: 860px) {
  .tl-diagnosis-hero__inner {
    grid-template-columns: 1fr;
    gap: 48px;
  }
  .tl-diagnosis-hero__lead {
    max-width: 100%;
  }
  .tl-diagnosis-process-card {
    max-width: 560px;
  }
}

/* Review grid: 2 columnas en tablet */
@media (max-width: 720px) {
  .tl-diagnosis-review__grid {
    grid-template-columns: 1fr 1fr;
  }
}

/* CTA final: apilado */
@media (max-width: 760px) {
  .tl-diagnosis-final-cta__inner {
    grid-template-columns: 1fr;
  }
  .tl-diagnosis-final-cta__actions {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

/* Formulario: padding reducido en tablet */
@media (max-width: 680px) {
  .tl-diagnosis-form-header {
    padding: 28px 24px 24px;
  }
  .tl-diagnosis-form {
    padding: 0 24px 32px;
  }
  .tl-diagnosis-privacy-note {
    padding: 16px 24px;
  }
}

/* Formulario: campo grid de 2 → 1 columna en móvil */
@media (max-width: 540px) {
  .tl-form-grid {
    grid-template-columns: 1fr;
  }
  .tl-form-field--full {
    grid-column: 1;
  }
  .tl-diagnosis-form-wrap {
    width: min(100% - 24px, 920px);
    border-radius: 16px;
  }
  .tl-diagnosis-privacy-note {
    border-radius: 0 0 16px 16px;
  }
  .tl-diagnosis-form {
    padding: 20px 18px 28px;
  }
  .tl-form-section__inner {
    padding: 20px 18px;
    border-radius: 16px;
  }
  .tl-form-question small {
    display: block;
    margin-left: 0;
    margin-top: 4px;
  }
}

/* After-diagnosis: apilado vertical */
@media (max-width: 580px) {
  .tl-after-diagnosis__steps {
    flex-direction: column;
    align-items: center;
    gap: 8px;
  }
  .tl-after-step__connector {
    transform: rotate(90deg);
    padding-top: 0;
    align-self: center;
  }
  .tl-after-step {
    max-width: 100%;
    min-width: 0;
    flex-direction: row;
    text-align: left;
    gap: 18px;
  }
  .tl-after-step__body {
    flex: 1;
  }
}

/* Review: 1 columna en móvil pequeño */
@media (max-width: 440px) {
  .tl-diagnosis-review__grid {
    grid-template-columns: 1fr;
  }
}

/* Pill buttons: wrap en pantallas pequeñas (ya tienen flex-wrap) */
@media (max-width: 380px) {
  .tl-form-option__text {
    white-space: normal;
    text-align: left;
  }
}


/* ============================================================
   TEIMA OFICINA — Página de producto (conversión)
   Prefijo: tl-product-*
   Archivo: teima-oficina.html
   ============================================================ */


/* ── HERO ───────────────────────────────────────────────────── */

.tl-product-hero {
  background: linear-gradient(160deg, #1A1128 0%, #0F0B1A 55%, #0D1520 100%);
  padding-block: clamp(72px, 10vw, 120px);
  position: relative;
  overflow: hidden;
}

.tl-product-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 55% at 70% 40%, rgba(91,58,142,.18) 0%, transparent 70%),
    radial-gradient(ellipse 40% 35% at 25% 75%, rgba(201,162,39,.07) 0%, transparent 60%);
  pointer-events: none;
}

.tl-product-hero__inner {
  position: relative;
  width: min(100% - 48px, 1140px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: clamp(48px, 7vw, 96px);
  align-items: center;
}

.tl-product-hero__content {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Badges */
.tl-product-hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 28px;
}

.tl-product-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 12px;
  border-radius: 100px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.tl-product-badge--kit {
  background: rgba(91,58,142,.35);
  color: #C4A8F0;
  border: 1px solid rgba(91,58,142,.5);
}

.tl-product-badge--sector {
  background: rgba(201,162,39,.15);
  color: #D4B84A;
  border: 1px solid rgba(201,162,39,.3);
}

/* Título hero */
.tl-product-hero__brand {
  display: flex;
  align-items: baseline;
  gap: 8px;
  margin-bottom: 12px;
  font-size: clamp(1.2rem, 2vw, 1.6rem);
  font-weight: 900;
  letter-spacing: -.03em;
  color: #fff;
  line-height: 1;
}

.tl-product-hero__brand-sep {
  color: rgba(255,255,255,.25);
  font-weight: 300;
}

.tl-product-hero__brand-name {
  color: rgba(255,255,255,.8);
  font-weight: 600;
}

.tl-product-hero__brand .brand-te { color: #fff; }
.tl-product-hero__brand .brand-m  { color: #D4A017; }
.tl-product-hero__brand .brand-a  { color: #9B6FD0; }

.tl-product-hero__title {
  margin: 0 0 24px;
  line-height: 1;
}

.tl-product-hero__title-main {
  display: block;
  font-size: clamp(1.9rem, 3.6vw, 3rem);
  font-weight: 900;
  color: #fff;
  line-height: 1.15;
  letter-spacing: -.04em;
  font-style: normal;
}

.tl-product-hero__title-em {
  color: rgba(196,168,240,.85);
  font-style: italic;
}

.tl-product-hero__lead {
  margin: 0 0 36px;
  font-size: clamp(.92rem, 1.4vw, 1.05rem);
  color: rgba(255,255,255,.6);
  line-height: 1.7;
}

/* CTA hero */
.tl-product-hero__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-bottom: 24px;
}

/* Botón principal hero con precio */
.btn-hero-primary {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 22px 14px 24px;
  background: var(--purple, #5B3A8E);
  color: #fff;
  font-size: .97rem;
  font-weight: 700;
  letter-spacing: -.01em;
  border-radius: 100px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background var(--t), box-shadow var(--t), transform var(--t);
  box-shadow:
    0 2px 8px rgba(91,58,142,.4),
    0 8px 28px rgba(91,58,142,.3);
}

.btn-hero-primary:hover {
  background: var(--purple-dark, #4A2E78);
  box-shadow:
    0 4px 14px rgba(91,58,142,.5),
    0 14px 40px rgba(91,58,142,.35);
  transform: translateY(-1px);
}

.btn-hero-price {
  display: inline-flex;
  align-items: center;
  padding: 3px 10px;
  background: rgba(255,255,255,.18);
  border-radius: 100px;
  font-size: .82rem;
  font-weight: 800;
  letter-spacing: .01em;
}

/* Trust row */
.tl-product-hero__trust {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
}

.tl-product-hero__trust-item {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .76rem;
  color: rgba(255,255,255,.42);
  font-weight: 500;
}

.tl-product-hero__trust-item svg {
  color: rgba(91,58,142,.8);
}

.tl-product-hero__trust-sep {
  color: rgba(255,255,255,.15);
  font-size: .7rem;
}

/* Kit preview card */
.tl-product-kit-preview {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px;
  overflow: hidden;
  backdrop-filter: blur(12px);
  box-shadow:
    0 2px 8px rgba(0,0,0,.2),
    0 20px 60px rgba(0,0,0,.3);
}

.tl-product-kit-preview__header {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 14px 18px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  background: rgba(255,255,255,.03);
}

.tl-product-kit-preview__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  flex-shrink: 0;
}

.tl-product-kit-preview__dot:first-child { background: rgba(255,100,80,.5); }
.tl-product-kit-preview__dot:nth-child(2) { background: rgba(255,200,50,.5); }
.tl-product-kit-preview__dot:nth-child(3) { background: rgba(80,200,80,.5); }

.tl-product-kit-preview__title {
  margin-left: 8px;
  font-size: .68rem;
  font-weight: 600;
  color: rgba(255,255,255,.4);
  letter-spacing: .03em;
  font-family: 'SFMono-Regular', 'Consolas', monospace;
}

.tl-product-kit-preview__body {
  padding: 20px 18px 0;
}

/* Prompt preview */
.tl-product-kit-prompt {
  background: rgba(91,58,142,.15);
  border: 1px solid rgba(91,58,142,.25);
  border-radius: 10px;
  padding: 14px 16px;
  margin-bottom: 14px;
}

.tl-product-kit-prompt__label {
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #9B6FD0;
  margin-bottom: 10px;
}

.tl-product-kit-prompt__text {
  font-size: .78rem;
  color: rgba(255,255,255,.7);
  line-height: 1.6;
  font-family: 'SFMono-Regular', 'Consolas', monospace;
}

.tl-product-kit-prompt__var {
  color: #D4A017;
  font-weight: 600;
}

.tl-product-kit-divider {
  height: 1px;
  background: rgba(255,255,255,.08);
  margin-bottom: 14px;
}

/* File list */
.tl-product-kit-files {
  padding-bottom: 18px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tl-product-kit-file {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .75rem;
  color: rgba(255,255,255,.55);
  font-family: 'SFMono-Regular', 'Consolas', monospace;
}

.tl-product-kit-file svg {
  color: rgba(91,58,142,.7);
  flex-shrink: 0;
}

.tl-product-kit-file--more {
  color: rgba(91,58,142,.8);
  font-weight: 700;
  letter-spacing: .01em;
  font-family: var(--font-base);
  font-size: .72rem;
  padding-top: 4px;
  border-top: 1px dashed rgba(91,58,142,.25);
  margin-top: 2px;
}

.tl-product-kit-preview__footer {
  padding: 12px 18px;
  border-top: 1px solid rgba(255,255,255,.06);
  background: rgba(36,108,64,.1);
  font-size: .71rem;
  color: rgba(120,220,140,.7);
  display: flex;
  align-items: center;
  gap: 7px;
}


/* ── BARRA DE MÉTRICAS ──────────────────────────────────────── */

.tl-product-statbar {
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding-block: clamp(22px, 3vw, 32px);
}

.tl-product-statbar__inner {
  width: min(100% - 48px, 1100px);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 0;
}

.tl-product-stat {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 32px;
  text-align: center;
}

.tl-product-stat__num {
  font-size: clamp(1.6rem, 2.5vw, 2.2rem);
  font-weight: 900;
  color: var(--purple);
  letter-spacing: -.04em;
  line-height: 1;
}

.tl-product-stat__label {
  font-size: .72rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
}

.tl-product-statbar__sep {
  width: 1px;
  height: 36px;
  background: var(--border);
  flex-shrink: 0;
}


/* ── PROBLEMA ───────────────────────────────────────────────── */

.tl-product-problem {
  padding-block: clamp(72px, 9vw, 112px);
  background: var(--bg-secondary);
}

.tl-product-problem__inner {
  width: min(100% - 48px, 1100px);
  margin-inline: auto;
}

.tl-product-problem__header {
  max-width: 760px;
  margin-bottom: clamp(48px, 6vw, 72px);
}

.tl-product-problem__title {
  margin: 10px 0 20px;
  font-size: clamp(1.7rem, 3.2vw, 2.6rem);
  font-weight: 900;
  letter-spacing: -.04em;
  color: var(--text-main);
  line-height: 1.15;
}

.tl-product-problem__title-em {
  color: var(--purple);
}

.tl-product-problem__scenario {
  margin: 0 0 16px;
  font-size: clamp(.96rem, 1.5vw, 1.08rem);
  color: var(--text-main);
  font-weight: 500;
  line-height: 1.7;
  font-style: italic;
  padding: 16px 20px;
  border-left: 3px solid var(--purple);
  background: rgba(91,58,142,.05);
  border-radius: 0 8px 8px 0;
}

.tl-product-problem__lead {
  margin: 0;
  font-size: clamp(.91rem, 1.3vw, 1rem);
  color: var(--text-secondary);
  line-height: 1.7;
}

.tl-product-problem__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.tl-product-problem-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 16px);
  padding: clamp(24px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: box-shadow var(--t), transform var(--t);
}

.tl-product-problem-card:hover {
  box-shadow: 0 4px 24px rgba(15,11,26,.08);
  transform: translateY(-2px);
}

.tl-product-problem-card__icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--purple-light);
  border-radius: var(--radius-sm, 8px);
  color: var(--purple);
  flex-shrink: 0;
}

.tl-product-problem-card__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -.02em;
  line-height: 1.3;
}

.tl-product-problem-card__text {
  margin: 0;
  font-size: .87rem;
  color: var(--text-secondary);
  line-height: 1.65;
  flex: 1;
}

.tl-product-problem-card__cost {
  font-size: .75rem;
  font-weight: 700;
  color: #B94040;
  letter-spacing: .01em;
  padding-top: 8px;
  border-top: 1px solid rgba(185,64,64,.12);
}


/* ── SOLUCIÓN ───────────────────────────────────────────────── */

.tl-product-solution {
  padding-block: clamp(72px, 9vw, 112px);
  background: var(--bg-main);
}

.tl-product-solution__inner {
  width: min(100% - 48px, 1100px);
  margin-inline: auto;
}

.tl-product-solution__header {
  text-align: center;
  margin-bottom: clamp(48px, 6vw, 72px);
}

.tl-product-solution__title {
  margin: 10px 0 0;
  font-size: clamp(1.6rem, 3vw, 2.4rem);
  font-weight: 900;
  letter-spacing: -.04em;
  color: var(--text-main);
  line-height: 1.2;
}

.tl-product-solution__grid {
  display: grid;
  grid-template-columns: 1fr 48px 1fr;
  align-items: stretch;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
  box-shadow:
    0 1px 3px rgba(36,28,21,.03),
    0 8px 28px rgba(36,28,21,.06);
}

.tl-product-solution__col {
  padding: clamp(32px, 4vw, 52px);
}

.tl-product-solution__col--before {
  background: rgba(185,64,64,.03);
}

.tl-product-solution__col--after {
  background: rgba(36,108,64,.04);
}

.tl-product-solution__col-header {
  margin-bottom: 24px;
}

.tl-product-solution__col-label {
  display: inline-flex;
  align-items: center;
  padding: 5px 13px;
  border-radius: 100px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.tl-product-solution__col-label--before {
  background: rgba(185,64,64,.1);
  color: #B94040;
  border: 1px solid rgba(185,64,64,.2);
}

.tl-product-solution__col-label--after {
  background: rgba(36,108,64,.1);
  color: #246C40;
  border: 1px solid rgba(36,108,64,.2);
}

.tl-product-solution__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tl-product-solution__list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .9rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.tl-product-solution__list li svg { flex-shrink: 0; margin-top: 2px; }

.tl-product-solution__col--before .tl-product-solution__list li svg { color: #B94040; }
.tl-product-solution__col--after  .tl-product-solution__list li svg { color: #246C40; }

.tl-product-solution__col--after .tl-product-solution__list li {
  color: var(--text-main);
}

.tl-product-solution__list li strong {
  color: inherit;
  font-weight: 700;
}

.tl-product-solution__col--after .tl-product-solution__list li strong {
  color: #246C40;
}

.tl-product-solution__divider {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
  color: var(--border-strong);
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
}

.tl-product-solution__note {
  margin: 20px 0 0;
  font-size: .73rem;
  color: var(--text-muted);
  line-height: 1.55;
  font-style: italic;
  text-align: center;
}


/* ── QUÉ INCLUYE ────────────────────────────────────────────── */

.tl-product-includes {
  padding-block: clamp(72px, 9vw, 112px);
  background: var(--bg-secondary);
}

.tl-product-includes__inner {
  width: min(100% - 48px, 1100px);
  margin-inline: auto;
}

.tl-product-includes__header {
  text-align: center;
  max-width: 680px;
  margin-inline: auto;
  margin-bottom: clamp(48px, 6vw, 72px);
}

.tl-product-includes__title {
  margin: 10px 0 16px;
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--text-main);
  line-height: 1.22;
}

.tl-product-includes__lead {
  margin: 0;
  font-size: clamp(.9rem, 1.3vw, 1rem);
  color: var(--text-secondary);
  line-height: 1.65;
}

.tl-product-includes__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.tl-product-module-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 16px);
  padding: clamp(24px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: box-shadow var(--t), transform var(--t), border-color var(--t);
}

.tl-product-module-card:hover {
  box-shadow: 0 4px 24px rgba(15,11,26,.08);
  transform: translateY(-2px);
  border-color: rgba(91,58,142,.2);
}

.tl-product-module-card--highlight {
  border-color: rgba(91,58,142,.35);
  background: linear-gradient(160deg, #FDFBFF 0%, rgba(91,58,142,.04) 100%);
  box-shadow: 0 2px 12px rgba(91,58,142,.1);
}

.tl-product-module-card__num {
  font-size: .65rem;
  font-weight: 900;
  letter-spacing: .12em;
  color: var(--purple);
  opacity: .45;
}

.tl-product-module-card__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -.02em;
  line-height: 1.3;
}

.tl-product-module-card__text {
  margin: 0;
  font-size: .86rem;
  color: var(--text-secondary);
  line-height: 1.65;
  flex: 1;
}

.tl-product-module-card__count {
  font-size: .72rem;
  font-weight: 700;
  color: var(--purple);
  letter-spacing: .01em;
  opacity: .75;
}

.tl-product-module-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}


/* ── CASOS DE USO ───────────────────────────────────────────── */

.tl-product-usecases {
  padding-block: clamp(72px, 9vw, 112px);
  background: var(--bg-main);
}

.tl-product-usecases__inner {
  width: min(100% - 48px, 1100px);
  margin-inline: auto;
}

.tl-product-usecases__header {
  max-width: 640px;
  margin-bottom: clamp(48px, 6vw, 72px);
}

.tl-product-usecases__title {
  margin: 10px 0 16px;
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--text-main);
  line-height: 1.22;
}

.tl-product-usecases__lead {
  margin: 0;
  font-size: clamp(.9rem, 1.3vw, 1rem);
  color: var(--text-secondary);
  line-height: 1.65;
}

.tl-product-usecases__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.tl-product-usecase-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 16px);
  padding: clamp(24px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.tl-product-usecase-card__title {
  margin: 0 0 20px;
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -.02em;
  line-height: 1.3;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.tl-product-usecase-row {
  display: grid;
  grid-template-columns: 70px 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 11px 0;
  border-bottom: 1px solid var(--border);
}

.tl-product-usecase-row:last-child { border-bottom: none; }

.tl-product-usecase-row--result {
  background: rgba(91,58,142,.04);
  margin: 0 calc(-1 * clamp(24px, 3vw, 36px)) calc(-1 * clamp(24px, 3vw, 36px));
  padding: 12px clamp(24px, 3vw, 36px) clamp(24px, 3vw, 36px);
  border-bottom: none;
  border-top: 1px solid rgba(91,58,142,.12);
}

.tl-product-usecase-row__label {
  font-size: .67rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--purple);
  opacity: .7;
}

.tl-product-usecase-row--result .tl-product-usecase-row__label { opacity: 1; }

.tl-product-usecase-row__content {
  font-size: .86rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.tl-product-usecase-row--result .tl-product-usecase-row__content {
  color: var(--text-main);
  font-weight: 500;
}

.tl-product-usecase-row--result .tl-product-usecase-row__content strong {
  color: #246C40;
}


/* ── PARA QUIÉN ─────────────────────────────────────────────── */

.tl-product-audience {
  padding-block: clamp(72px, 9vw, 112px);
  background: var(--bg-secondary);
}

.tl-product-audience__inner {
  width: min(100% - 48px, 1100px);
  margin-inline: auto;
}

.tl-product-audience__header {
  max-width: 640px;
  margin-bottom: clamp(48px, 6vw, 72px);
}

.tl-product-audience__title {
  margin: 10px 0 0;
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--text-main);
  line-height: 1.22;
}

.tl-product-audience__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.tl-product-audience-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 16px);
  padding: clamp(24px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: box-shadow var(--t), transform var(--t);
}

.tl-product-audience-card:hover {
  box-shadow: 0 4px 24px rgba(15,11,26,.08);
  transform: translateY(-2px);
}

.tl-product-audience-card__title {
  margin: 0 0 2px;
  font-size: .97rem;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -.02em;
  line-height: 1.3;
}

.tl-product-audience-card__problem {
  margin: 0;
  font-size: .84rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.tl-product-audience-card__help {
  margin: 0;
  font-size: .84rem;
  color: var(--text-main);
  font-weight: 500;
  line-height: 1.6;
  padding-top: 10px;
  border-top: 1px solid var(--border);
}

.tl-product-audience-card__cta {
  display: inline-flex;
  align-items: center;
  margin-top: auto;
  padding-top: 8px;
  font-size: .8rem;
  font-weight: 700;
  color: var(--purple);
  text-decoration: none;
  transition: color var(--t), gap var(--t);
  gap: 0;
}

.tl-product-audience-card__cta:hover {
  color: var(--purple-dark, #3D2566);
  gap: 3px;
}


/* ── VALUE STACK ────────────────────────────────────────────── */

.tl-product-valuestack {
  padding-block: clamp(80px, 10vw, 120px);
  background: linear-gradient(160deg, #1A1128 0%, #100C1E 100%);
  position: relative;
  overflow: hidden;
}

.tl-product-valuestack::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 60% at 15% 50%, rgba(91,58,142,.22) 0%, transparent 65%),
    radial-gradient(ellipse 40% 40% at 85% 60%, rgba(201,162,39,.06) 0%, transparent 60%);
  pointer-events: none;
}

.tl-product-valuestack__inner {
  position: relative;
  width: min(100% - 48px, 1100px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(48px, 7vw, 96px);
  align-items: center;
}

.tl-product-valuestack__title {
  margin: 10px 0 20px;
  font-size: clamp(1.6rem, 3vw, 2.5rem);
  font-weight: 900;
  letter-spacing: -.04em;
  color: #fff;
  line-height: 1.18;
}

.tl-product-valuestack__lead {
  margin: 0;
  font-size: clamp(.88rem, 1.3vw, 1rem);
  color: rgba(255,255,255,.55);
  line-height: 1.7;
}

.tl-product-valuestack__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  background: rgba(255,255,255,.05);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 16px;
  overflow: hidden;
}

.tl-product-valuestack__item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 16px 20px;
  border-bottom: 1px solid rgba(255,255,255,.06);
  transition: background var(--t);
}

.tl-product-valuestack__item:last-child {
  border-bottom: none;
}

.tl-product-valuestack__item:hover {
  background: rgba(255,255,255,.04);
}

.tl-product-valuestack__check {
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(135deg, #246C40, #1A5230);
  border-radius: 50%;
  flex-shrink: 0;
  margin-top: 2px;
  color: #fff;
}

.tl-product-valuestack__item-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tl-product-valuestack__item-body strong {
  font-size: .88rem;
  font-weight: 700;
  color: rgba(255,255,255,.9);
  letter-spacing: -.01em;
}

.tl-product-valuestack__item-body span {
  font-size: .78rem;
  color: rgba(255,255,255,.45);
  line-height: 1.4;
}


/* ── PRECIOS ────────────────────────────────────────────────── */

.tl-product-pricing {
  padding-block: clamp(72px, 9vw, 112px);
  background: var(--bg-main);
}

.tl-product-pricing__inner {
  width: min(100% - 48px, 1100px);
  margin-inline: auto;
}

.tl-product-pricing__header {
  text-align: center;
  max-width: 680px;
  margin-inline: auto;
  margin-bottom: clamp(48px, 6vw, 72px);
}

.tl-product-pricing__title {
  margin: 10px 0 16px;
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--text-main);
  line-height: 1.22;
}

.tl-product-pricing__lead {
  margin: 0;
  font-size: clamp(.9rem, 1.3vw, 1rem);
  color: var(--text-secondary);
  line-height: 1.65;
}

/* Mini-FAQ de objeciones */
.tl-product-faq {
  margin-top: clamp(52px, 6vw, 72px);
  padding: clamp(32px, 4vw, 52px);
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 16px);
}

.tl-product-faq__title {
  margin: 0 0 28px;
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -.02em;
}

.tl-product-faq__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px 40px;
}

.tl-product-faq__item {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tl-product-faq__q {
  margin: 0;
  font-size: .9rem;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: -.01em;
  line-height: 1.35;
}

.tl-product-faq__a {
  margin: 0;
  font-size: .84rem;
  color: var(--text-secondary);
  line-height: 1.65;
}


/* ── CTA FINAL ──────────────────────────────────────────────── */

.tl-product-cta {
  padding-block: clamp(88px, 11vw, 136px);
  background: linear-gradient(160deg, #1A1128 0%, #0F0B1A 60%, #0D1520 100%);
  position: relative;
  overflow: hidden;
}

.tl-product-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(91,58,142,.2) 0%, transparent 70%);
  pointer-events: none;
}

.tl-product-cta__inner {
  position: relative;
  width: min(100% - 48px, 780px);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 36px;
}

.tl-product-cta__content {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.tl-product-cta__title {
  margin: 8px 0 20px;
  font-size: clamp(1.8rem, 3.8vw, 3.2rem);
  font-weight: 900;
  letter-spacing: -.05em;
  color: #fff;
  line-height: 1.15;
  font-style: normal;
}

.tl-product-cta__title-em {
  display: block;
  color: rgba(196,168,240,.85);
  font-style: italic;
}

.tl-product-cta__lead {
  margin: 0;
  font-size: clamp(.88rem, 1.4vw, 1rem);
  color: rgba(255,255,255,.5);
  line-height: 1.8;
}

.tl-product-cta__actions {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 12px;
  width: 100%;
  max-width: 420px;
}

/* Botón CTA principal oscuro */
.btn-cta-primary {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: 18px 28px;
  background: var(--purple, #5B3A8E);
  color: #fff;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -.02em;
  border-radius: 100px;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: background var(--t), box-shadow var(--t), transform var(--t);
  box-shadow:
    0 4px 16px rgba(91,58,142,.45),
    0 12px 40px rgba(91,58,142,.3);
}

.btn-cta-primary:hover {
  background: var(--purple-dark, #4A2E78);
  box-shadow:
    0 6px 22px rgba(91,58,142,.55),
    0 18px 52px rgba(91,58,142,.35);
  transform: translateY(-2px);
}

.btn-cta-arrow {
  font-size: 1.1em;
  transition: transform var(--t);
}

.btn-cta-primary:hover .btn-cta-arrow {
  transform: translateX(3px);
}

/* Botón ghost sobre fondo oscuro */
.btn-ghost-light {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px 28px;
  background: transparent;
  color: rgba(255,255,255,.55);
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: -.01em;
  border-radius: 100px;
  text-decoration: none;
  border: 1.5px solid rgba(255,255,255,.15);
  cursor: pointer;
  transition: background var(--t), color var(--t), border-color var(--t);
}

.btn-ghost-light:hover {
  background: rgba(255,255,255,.07);
  color: rgba(255,255,255,.8);
  border-color: rgba(255,255,255,.3);
}

/* Garantías finales */
.tl-product-cta__reassurance {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px 20px;
}

.tl-product-cta__reassurance span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .73rem;
  color: rgba(255,255,255,.35);
}

.tl-product-cta__reassurance span svg {
  color: rgba(91,58,142,.7);
}


/* ── DARK MODE overrides ────────────────────────────────────── */

.dark-mode .tl-product-module-card--highlight {
  background: linear-gradient(160deg, rgba(91,58,142,.15) 0%, rgba(73,46,120,.08) 100%);
}

.dark-mode .tl-product-kit-preview {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.07);
}

.dark-mode .tl-product-solution__col--before { background: rgba(185,64,64,.06); }
.dark-mode .tl-product-solution__col--after  { background: rgba(36,108,64,.06); }

.dark-mode .tl-product-statbar {
  background: var(--bg-card);
}


/* ── RESPONSIVE ─────────────────────────────────────────────── */

/* Hero: 1 col en tablet */
@media (max-width: 960px) {
  .tl-product-hero__inner {
    grid-template-columns: 1fr;
  }
  .tl-product-hero__visual { max-width: 480px; }
}

/* Value stack: 1 col */
@media (max-width: 900px) {
  .tl-product-valuestack__inner {
    grid-template-columns: 1fr;
  }
}

/* Stat bar: wrap en tablet */
@media (max-width: 860px) {
  .tl-product-problem__cards,
  .tl-product-audience__grid,
  .tl-product-includes__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .tl-product-stat {
    padding: 8px 20px;
  }
}

/* Before/After: stack vertical */
@media (max-width: 780px) {
  .tl-product-solution__grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }
  .tl-product-solution__divider {
    padding: 12px 0;
    border: none;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    justify-content: center;
    transform: rotate(90deg);
    margin-block: -1px;
  }
  .tl-product-usecases__grid { grid-template-columns: 1fr; }
  .tl-product-faq__grid      { grid-template-columns: 1fr; }
}

/* 1 col en móvil */
@media (max-width: 580px) {
  .tl-product-problem__cards,
  .tl-product-includes__grid,
  .tl-product-audience__grid {
    grid-template-columns: 1fr;
  }
  .tl-product-statbar__sep { display: none; }
  .tl-product-statbar__inner {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 0;
  }
  .tl-product-stat {
    padding: 16px 12px;
    border-bottom: 1px solid var(--border);
  }
  .tl-product-stat:nth-child(1),
  .tl-product-stat:nth-child(3),
  .tl-product-stat:nth-child(5) {
    border-right: 1px solid var(--border);
  }
}


/* ── HERO ───────────────────────────────────────────────────── */

.tl-product-hero {
  background: linear-gradient(160deg, #1A1128 0%, #0F0B1A 55%, #0D1520 100%);
  padding-block: clamp(72px, 10vw, 120px);
  position: relative;
  overflow: hidden;
}

/* Textura de fondo sutil */
.tl-product-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 55% at 70% 40%, rgba(91,58,142,.18) 0%, transparent 70%),
    radial-gradient(ellipse 40% 35% at 25% 75%, rgba(201,162,39,.07) 0%, transparent 60%);
  pointer-events: none;
}

.tl-product-hero__inner {
  position: relative;
  width: min(100% - 48px, 1140px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 380px;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}

/* Columna copy */
.tl-product-hero__content {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.tl-product-hero__badges {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 24px;
}

.tl-product-badge {
  display: inline-flex;
  align-items: center;
  padding: 5px 12px;
  border-radius: 100px;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.tl-product-badge--kit {
  background: rgba(91,58,142,.35);
  color: #C4A8F0;
  border: 1px solid rgba(91,58,142,.5);
}

.tl-product-badge--sector {
  background: rgba(201,162,39,.15);
  color: #D4B84A;
  border: 1px solid rgba(201,162,39,.3);
}

.tl-product-hero__brand {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin-bottom: 10px;
  font-size: clamp(1.4rem, 2.5vw, 1.9rem);
  font-weight: 900;
  letter-spacing: -.04em;
  color: #fff;
  line-height: 1;
}

.tl-product-hero__brand-name {
  color: rgba(255,255,255,.85);
  font-weight: 700;
}

/* Colores de marca en hero oscuro */
.tl-product-hero__brand .brand-te { color: #fff; }
.tl-product-hero__brand .brand-m  { color: #D4A017; }
.tl-product-hero__brand .brand-a  { color: #9B6FD0; }

.tl-product-hero__title {
  margin: 0 0 24px;
  line-height: 1.18;
  letter-spacing: -.03em;
}

.tl-product-hero__title-main {
  display: block;
  font-size: clamp(1.6rem, 3.2vw, 2.55rem);
  font-weight: 800;
  color: #fff;
  line-height: 1.2;
}

.tl-product-hero__lead {
  margin: 0 0 36px;
  font-size: clamp(.92rem, 1.4vw, 1.05rem);
  color: rgba(255,255,255,.62);
  line-height: 1.7;
  max-width: 520px;
}

.tl-product-hero__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin-bottom: 20px;
}

.tl-product-hero__note {
  margin: 0;
  font-size: .76rem;
  color: rgba(255,255,255,.38);
  line-height: 1.55;
}

/* Tarjeta de flujo */
.tl-product-flow-card {
  background: rgba(255,255,255,.06);
  border: 1px solid rgba(255,255,255,.1);
  border-radius: 20px;
  overflow: hidden;
  backdrop-filter: blur(8px);
}

.tl-product-flow-card__header {
  padding: 16px 24px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
}

.tl-product-flow-card__label {
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.4);
}

.tl-product-flow-step {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 20px 24px;
}

.tl-product-flow-step__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(91,58,142,.7) 0%, rgba(73,46,120,.9) 100%);
  color: #fff;
  font-size: .72rem;
  font-weight: 900;
  letter-spacing: .05em;
  flex-shrink: 0;
  border: 1px solid rgba(91,58,142,.5);
}

.tl-product-flow-step__body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-top: 4px;
}

.tl-product-flow-step__title {
  font-size: .88rem;
  font-weight: 700;
  color: rgba(255,255,255,.9);
  letter-spacing: -.01em;
}

.tl-product-flow-step__text {
  font-size: .78rem;
  color: rgba(255,255,255,.48);
  line-height: 1.55;
  margin: 0;
}

.tl-product-flow-connector {
  display: flex;
  justify-content: center;
  color: rgba(91,58,142,.5);
  padding: 0 0 0 36px;
}

.tl-product-flow-card__footer {
  padding: 14px 24px;
  border-top: 1px solid rgba(255,255,255,.08);
  background: rgba(91,58,142,.12);
  font-size: .73rem;
  color: rgba(255,255,255,.38);
  font-style: italic;
}

/* ── FLUJO PREMIUM — TEIMA OFICINA ──────────────────────────── */

.tl-office-flow-premium {
  background: linear-gradient(148deg, #1A1128 0%, #0F0B1A 60%, #1A1530 100%);
  border-radius: 24px;
  overflow: hidden;
  position: relative;
}

.tl-office-flow-premium::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 60% 50% at 80% 20%, rgba(185,149,46,.07) 0%, transparent 70%);
  pointer-events: none;
}

.tl-office-flow-premium__head {
  padding: 22px 28px 18px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}

.tl-office-flow-premium__head-label {
  display: block;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(185,149,46,.75);
  margin-bottom: 6px;
}

.tl-office-flow-premium__head-sub {
  font-size: .82rem;
  color: rgba(255,255,255,.5);
  line-height: 1.45;
  margin: 0;
}

.tl-office-flow-premium__steps {
  padding: 8px 0;
  position: relative;
  z-index: 1;
}

.tl-office-flow-step {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 18px 28px;
  position: relative;
}

.tl-office-flow-step + .tl-office-flow-step {
  border-top: 1px solid rgba(255,255,255,.05);
}

.tl-office-flow-step__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, rgba(91,58,142,.65) 0%, rgba(73,46,120,.85) 100%);
  border: 1px solid rgba(91,58,142,.4);
  color: rgba(255,255,255,.85);
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .04em;
  flex-shrink: 0;
  margin-top: 2px;
}

.tl-office-flow-step__body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.tl-office-flow-step__title {
  font-size: .78rem;
  font-weight: 700;
  color: rgba(255,255,255,.45);
  letter-spacing: .08em;
  text-transform: uppercase;
  margin: 0;
}

.tl-office-flow-step__keyword {
  display: block;
  font-size: .94rem;
  font-weight: 800;
  color: rgba(255,255,255,.92);
  letter-spacing: -.01em;
  line-height: 1.25;
  margin-top: 2px;
}

.tl-office-flow-step__desc {
  font-size: .8rem;
  color: rgba(255,255,255,.42);
  line-height: 1.55;
  margin: 4px 0 0;
}

.tl-office-flow-step__connector {
  display: flex;
  justify-content: center;
  color: rgba(91,58,142,.4);
  padding: 0 0 0 44px;
}

.tl-office-flow-premium__footer {
  padding: 14px 28px;
  border-top: 1px solid rgba(255,255,255,.07);
  background: rgba(91,58,142,.1);
  font-size: .73rem;
  color: rgba(255,255,255,.32);
  display: flex;
  align-items: center;
  gap: 7px;
  font-style: italic;
}


/* ── PROBLEMA ───────────────────────────────────────────────── */

.tl-product-problem {
  padding-block: clamp(72px, 9vw, 112px);
  background: var(--bg-secondary);
}

.tl-product-problem__inner {
  width: min(100% - 48px, 1100px);
  margin-inline: auto;
}

.tl-product-problem__header {
  max-width: 740px;
  margin-bottom: clamp(48px, 6vw, 72px);
}

.tl-product-problem__title {
  margin: 10px 0 16px;
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--text-main);
  line-height: 1.22;
}

.tl-product-problem__title-em {
  color: var(--purple);
}

.tl-product-problem__lead {
  margin: 0;
  font-size: clamp(.92rem, 1.4vw, 1.02rem);
  color: var(--text-secondary);
  line-height: 1.7;
  max-width: 620px;
}

.tl-product-problem__cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.tl-product-problem-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 16px);
  padding: clamp(24px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: box-shadow var(--t), transform var(--t);
}

.tl-product-problem-card:hover {
  box-shadow: 0 4px 24px rgba(15,11,26,.08);
  transform: translateY(-2px);
}

.tl-product-problem-card__icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--purple-light);
  border-radius: var(--radius-sm, 8px);
  color: var(--purple);
  flex-shrink: 0;
}

.tl-product-problem-card__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -.02em;
  line-height: 1.3;
}

.tl-product-problem-card__text {
  margin: 0;
  font-size: .88rem;
  color: var(--text-secondary);
  line-height: 1.65;
}


/* ── SOLUCIÓN ANTES / DESPUÉS ───────────────────────────────── */

.tl-product-solution {
  padding-block: clamp(72px, 9vw, 112px);
  background: var(--bg-main);
}

.tl-product-solution__inner {
  width: min(100% - 48px, 1100px);
  margin-inline: auto;
}

.tl-product-solution__header {
  text-align: center;
  margin-bottom: clamp(48px, 6vw, 72px);
}

.tl-product-solution__title {
  margin: 10px 0 0;
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--text-main);
  line-height: 1.22;
}

.tl-product-solution__grid {
  display: grid;
  grid-template-columns: 1fr 48px 1fr;
  gap: 0;
  align-items: stretch;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 16px);
  overflow: hidden;
  box-shadow:
    0 1px 3px rgba(36,28,21,.03),
    0 8px 28px rgba(36,28,21,.06);
}

.tl-product-solution__col {
  padding: clamp(32px, 4vw, 52px);
}

.tl-product-solution__col--before {
  background: rgba(185,64,64,.03);
}

.tl-product-solution__col--after {
  background: rgba(36,108,64,.04);
}

.tl-product-solution__col-header {
  margin-bottom: 24px;
}

.tl-product-solution__col-label {
  display: inline-flex;
  align-items: center;
  padding: 5px 13px;
  border-radius: 100px;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
}

.tl-product-solution__col-label--before {
  background: rgba(185,64,64,.1);
  color: #B94040;
  border: 1px solid rgba(185,64,64,.2);
}

.tl-product-solution__col-label--after {
  background: rgba(36,108,64,.1);
  color: #246C40;
  border: 1px solid rgba(36,108,64,.2);
}

.tl-product-solution__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tl-product-solution__list li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .91rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.tl-product-solution__col--before .tl-product-solution__list li svg {
  color: #B94040;
  flex-shrink: 0;
}

.tl-product-solution__col--after .tl-product-solution__list li svg {
  color: #246C40;
  flex-shrink: 0;
}

.tl-product-solution__col--after .tl-product-solution__list li {
  color: var(--text-main);
  font-weight: 500;
}

.tl-product-solution__divider {
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--bg-card);
  color: var(--border-strong);
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
}


/* ── QUÉ INCLUYE ────────────────────────────────────────────── */

.tl-product-includes {
  padding-block: clamp(72px, 9vw, 112px);
  background: var(--bg-secondary);
}

.tl-product-includes__inner {
  width: min(100% - 48px, 1100px);
  margin-inline: auto;
}

.tl-product-includes__header {
  text-align: center;
  max-width: 680px;
  margin-inline: auto;
  margin-bottom: clamp(48px, 6vw, 72px);
}

.tl-product-includes__title {
  margin: 10px 0 16px;
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--text-main);
  line-height: 1.22;
}

.tl-product-includes__lead {
  margin: 0;
  font-size: clamp(.9rem, 1.3vw, 1rem);
  color: var(--text-secondary);
  line-height: 1.65;
}

.tl-product-includes__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.tl-product-module-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 16px);
  padding: clamp(24px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transition: box-shadow var(--t), transform var(--t), border-color var(--t);
}

.tl-product-module-card:hover {
  box-shadow: 0 4px 24px rgba(15,11,26,.08);
  transform: translateY(-2px);
  border-color: rgba(91,58,142,.2);
}

.tl-product-module-card--highlight {
  border-color: rgba(91,58,142,.35);
  background: linear-gradient(160deg, #FDFBFF 0%, rgba(91,58,142,.04) 100%);
  box-shadow: 0 2px 12px rgba(91,58,142,.1);
}

.tl-product-module-card__num {
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .1em;
  color: var(--purple);
  opacity: .55;
}

.tl-product-module-card__title {
  margin: 0;
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -.02em;
  line-height: 1.3;
}

.tl-product-module-card__text {
  margin: 0;
  font-size: .86rem;
  color: var(--text-secondary);
  line-height: 1.65;
  flex: 1;
}

.tl-product-module-card__chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}


/* ── CASOS DE USO ───────────────────────────────────────────── */

.tl-product-usecases {
  padding-block: clamp(72px, 9vw, 112px);
  background: var(--bg-main);
}

.tl-product-usecases__inner {
  width: min(100% - 48px, 1100px);
  margin-inline: auto;
}

.tl-product-usecases__header {
  max-width: 640px;
  margin-bottom: clamp(48px, 6vw, 72px);
}

.tl-product-usecases__title {
  margin: 10px 0 16px;
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--text-main);
  line-height: 1.22;
}

.tl-product-usecases__lead {
  margin: 0;
  font-size: clamp(.9rem, 1.3vw, 1rem);
  color: var(--text-secondary);
  line-height: 1.65;
}

.tl-product-usecases__grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

.tl-product-usecase-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 16px);
  padding: clamp(24px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 0;
  overflow: hidden;
}

.tl-product-usecase-card__title {
  margin: 0 0 20px;
  font-size: 1rem;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -.02em;
  line-height: 1.3;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.tl-product-usecase-row {
  display: grid;
  grid-template-columns: 72px 1fr;
  gap: 12px;
  align-items: baseline;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.tl-product-usecase-row:last-child {
  border-bottom: none;
}

.tl-product-usecase-row--result {
  background: rgba(91,58,142,.04);
  margin: 0 calc(-1 * clamp(24px, 3vw, 36px)) calc(-1 * clamp(24px, 3vw, 36px));
  padding: 12px clamp(24px, 3vw, 36px) clamp(24px, 3vw, 36px);
  border-bottom: none;
  border-top: 1px solid rgba(91,58,142,.12);
}

.tl-product-usecase-row__label {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--purple);
  opacity: .7;
  padding-top: 2px;
}

.tl-product-usecase-row--result .tl-product-usecase-row__label {
  opacity: 1;
}

.tl-product-usecase-row__content {
  font-size: .86rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.tl-product-usecase-row--result .tl-product-usecase-row__content {
  color: var(--text-main);
  font-weight: 500;
}


/* ── PARA QUIÉN ─────────────────────────────────────────────── */

.tl-product-audience {
  padding-block: clamp(72px, 9vw, 112px);
  background: var(--bg-secondary);
}

.tl-product-audience__inner {
  width: min(100% - 48px, 1100px);
  margin-inline: auto;
}

.tl-product-audience__header {
  max-width: 640px;
  margin-bottom: clamp(48px, 6vw, 72px);
}

.tl-product-audience__title {
  margin: 10px 0 0;
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--text-main);
  line-height: 1.22;
}

.tl-product-audience__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
}

.tl-product-audience-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg, 16px);
  padding: clamp(24px, 3vw, 36px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: box-shadow var(--t), transform var(--t);
}

.tl-product-audience-card:hover {
  box-shadow: 0 4px 24px rgba(15,11,26,.08);
  transform: translateY(-2px);
}

.tl-product-audience-card__title {
  margin: 0 0 4px;
  font-size: .97rem;
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -.02em;
  line-height: 1.3;
}

.tl-product-audience-card__problem {
  margin: 0;
  font-size: .84rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.tl-product-audience-card__help {
  margin: 0;
  font-size: .84rem;
  color: var(--text-main);
  font-weight: 500;
  line-height: 1.6;
  padding-top: 8px;
  border-top: 1px solid var(--border);
}

.tl-product-audience-card__cta {
  display: inline-flex;
  align-items: center;
  margin-top: auto;
  font-size: .8rem;
  font-weight: 700;
  color: var(--purple);
  text-decoration: none;
  padding-top: 8px;
  transition: color var(--t);
}

.tl-product-audience-card__cta:hover {
  color: var(--purple-dark, #3D2566);
}


/* ── PRECIOS ────────────────────────────────────────────────── */

.tl-product-pricing {
  padding-block: clamp(72px, 9vw, 112px);
  background: var(--bg-main);
}

.tl-product-pricing__inner {
  width: min(100% - 48px, 1100px);
  margin-inline: auto;
}

.tl-product-pricing__header {
  text-align: center;
  max-width: 640px;
  margin-inline: auto;
  margin-bottom: clamp(48px, 6vw, 72px);
}

.tl-product-pricing__title {
  margin: 10px 0 16px;
  font-size: clamp(1.5rem, 2.8vw, 2.2rem);
  font-weight: 800;
  letter-spacing: -.03em;
  color: var(--text-main);
  line-height: 1.22;
}

.tl-product-pricing__lead {
  margin: 0;
  font-size: clamp(.9rem, 1.3vw, 1rem);
  color: var(--text-secondary);
  line-height: 1.65;
}


/* ── CTA FINAL ──────────────────────────────────────────────── */

.tl-product-cta {
  padding-block: clamp(80px, 10vw, 128px);
  background: linear-gradient(160deg, #1A1128 0%, #0F0B1A 60%, #0D1520 100%);
  position: relative;
  overflow: hidden;
}

.tl-product-cta::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 60% at 50% 50%, rgba(91,58,142,.2) 0%, transparent 70%);
  pointer-events: none;
}

.tl-product-cta__inner {
  position: relative;
  width: min(100% - 48px, 820px);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 32px;
}

.tl-product-cta__title {
  margin: 10px 0 16px;
  font-size: clamp(1.6rem, 3.2vw, 2.55rem);
  font-weight: 800;
  letter-spacing: -.03em;
  color: #fff;
  line-height: 1.2;
}

.tl-product-cta__title-em {
  display: block;
  color: rgba(196,168,240,.9);
}

.tl-product-cta__lead {
  margin: 0;
  font-size: clamp(.92rem, 1.4vw, 1.05rem);
  color: rgba(255,255,255,.55);
  line-height: 1.7;
  max-width: 520px;
}

.tl-product-cta__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  justify-content: center;
}

.tl-product-cta__note {
  margin: 0;
  font-size: .76rem;
  color: rgba(255,255,255,.35);
  line-height: 1.55;
}


/* ── DARK MODE overrides ────────────────────────────────────── */

.dark-mode .tl-product-module-card--highlight {
  background: linear-gradient(160deg, rgba(91,58,142,.15) 0%, rgba(73,46,120,.08) 100%);
}

.dark-mode .tl-product-flow-card {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.08);
}

.dark-mode .tl-product-solution__col--before {
  background: rgba(185,64,64,.06);
}

.dark-mode .tl-product-solution__col--after {
  background: rgba(36,108,64,.06);
}


/* ── RESPONSIVE ─────────────────────────────────────────────── */

/* Hero: colapsa a 1 columna en tablet */
@media (max-width: 900px) {
  .tl-product-hero__inner {
    grid-template-columns: 1fr;
  }
  .tl-product-hero__visual {
    max-width: 460px;
  }
  .tl-product-hero__lead {
    max-width: 100%;
  }
}

/* Problema y audiencia: 2 cols en tablet */
@media (max-width: 860px) {
  .tl-product-problem__cards,
  .tl-product-audience__grid {
    grid-template-columns: repeat(2, 1fr);
  }
  .tl-product-includes__grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* Before/After: stack vertical */
@media (max-width: 780px) {
  .tl-product-solution__grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
  }
  .tl-product-solution__divider {
    padding: 16px 0;
    border-left: none;
    border-right: none;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    justify-content: center;
    transform: rotate(90deg);
    margin-block: -1px;
  }
  .tl-product-usecases__grid {
    grid-template-columns: 1fr;
  }
}

/* Módulos y problema: 1 col en móvil */
@media (max-width: 580px) {
  .tl-product-problem__cards,
  .tl-product-includes__grid,
  .tl-product-audience__grid {
    grid-template-columns: 1fr;
  }
  .tl-product-hero__badges {
    flex-direction: column;
    align-items: flex-start;
  }
  .tl-product-cta__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .tl-product-cta__actions .btn {
    text-align: center;
  }
}


/* ── CORRECCIÓN: anula bloque duplicado anterior ─────────────
   El bloque tl-product-* fue añadido dos veces. Las reglas
   siguientes restauran los valores correctos del bloque bueno.
─────────────────────────────────────────────────────────────── */

.tl-product-hero__inner {
  grid-template-columns: 1fr 420px;
  gap: clamp(48px, 7vw, 96px);
}
.tl-product-hero__badges { margin-bottom: 28px; }
.tl-product-badge { gap: 6px; }

/* Responsivo corregido: colapso a 1 col a 960px (no 900px) */
@media (max-width: 960px) {
  .tl-product-hero__inner { grid-template-columns: 1fr; }
  .tl-product-hero__visual { max-width: 480px; }
}
@media (max-width: 900px) {
  .tl-product-hero__lead { max-width: 100%; }
  .tl-product-valuestack__inner { grid-template-columns: 1fr; }
}
@media (max-width: 780px) {
  .tl-product-faq__grid { grid-template-columns: 1fr; }
}
@media (max-width: 580px) {
  .tl-product-statbar__sep     { display: none; }
  .tl-product-statbar__inner   { display: grid; grid-template-columns: repeat(3,1fr); gap: 0; }
  .tl-product-stat             { padding: 16px 12px; border-bottom: 1px solid var(--border); }
  .tl-product-stat:nth-child(1),
  .tl-product-stat:nth-child(3),
  .tl-product-stat:nth-child(5) { border-right: 1px solid var(--border); }
  .tl-product-hero__badges     { flex-direction: column; align-items: flex-start; }
  .tl-product-cta__actions     { flex-direction: column; align-items: stretch; }
  .tl-product-cta__actions .btn { text-align: center; }
}


/* ============================================================
   TL-OFFERS — Catálogo editorial de kits (index.html #kits)
   Prefijo: tl-offers / tl-offer
   ============================================================ */


/* ── SECCIÓN ────────────────────────────────────────────────── */

.tl-offers {
  padding-block: clamp(80px, 10vw, 128px);
  background: var(--bg-main);
}

.tl-offers__inner {
  width: min(100% - 48px, 1140px);
  margin-inline: auto;
}

/* Eyebrow (sobrelineado de sección) */
.tl-eyebrow {
  margin: 0 0 8px;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--purple, #5B3A8E);
  opacity: .75;
}

/* Header: título izquierda, lead derecha */
.tl-offers__header {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: end;
  margin-bottom: clamp(48px, 6vw, 72px);
}

.tl-offers__title {
  margin: 8px 0 0;
  font-size: clamp(1.9rem, 3.6vw, 2.85rem);
  font-weight: 900;
  letter-spacing: -.04em;
  color: var(--text-main);
  line-height: 1.1;
}

.tl-offers__lead {
  margin: 0;
  font-size: clamp(.9rem, 1.3vw, 1.02rem);
  color: var(--text-secondary);
  line-height: 1.7;
}


/* ── GRID DE OFERTAS ─────────────────────────────────────────── */

.tl-offers__layout {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 24px;
}

/* Oferta principal ocupa toda la fila */
.tl-offers__layout > .tl-offer--main {
  grid-column: 1 / -1;
}


/* ── TARJETA BASE ────────────────────────────────────────────── */

.tl-offer {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 20px;
  overflow: hidden;
  transition: box-shadow var(--t), transform var(--t);
}

.tl-offer:hover {
  box-shadow: 0 8px 40px rgba(15,11,26,.08);
  transform: translateY(-2px);
}


/* ── OFERTA PRINCIPAL (horizontal) ──────────────────────────── */

.tl-offer--main {
  display: grid;
  grid-template-columns: 1fr 300px;
}

.tl-offer--main .tl-offer__content {
  padding: clamp(32px, 4vw, 52px);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.tl-offer--main .tl-offer__side {
  display: flex;
  flex-direction: column;
}

.tl-offer--main .tl-offer__features {
  flex: 1;
  padding: clamp(24px, 3vw, 36px);
  border-bottom: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tl-offer--main .tl-offer__footer {
  padding: clamp(20px, 2.5vw, 28px) clamp(24px, 3vw, 36px);
  background: linear-gradient(160deg, rgba(91,58,142,.05) 0%, rgba(91,58,142,.02) 100%);
}


/* ── OFERTAS SECUNDARIAS (vertical) ─────────────────────────── */

.tl-offer--secondary {
  display: flex;
  flex-direction: column;
}

.tl-offer--secondary .tl-offer__content {
  flex: 1;
  padding: clamp(28px, 3.5vw, 44px);
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tl-offer--secondary .tl-offer__footer {
  padding: clamp(20px, 2.5vw, 28px) clamp(28px, 3.5vw, 44px);
  border-top: 1px solid var(--border);
  background: var(--bg-secondary);
}


/* ── ELEMENTOS DE TARJETA ────────────────────────────────────── */

/* Etiqueta de categoría */
.tl-offer__label {
  display: inline-block;
  padding: 4px 12px;
  border-radius: 100px;
  font-size: .67rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  background: var(--purple-light, rgba(91,58,142,.08));
  color: var(--purple, #5B3A8E);
  border: 1px solid rgba(91,58,142,.15);
  width: fit-content;
}

/* Nombre del producto con marca inline */
.tl-offer__title {
  margin: 0;
  font-size: clamp(1.35rem, 2.2vw, 1.8rem);
  font-weight: 900;
  letter-spacing: -.04em;
  color: var(--text-main);
  line-height: 1.15;
  display: flex;
  align-items: baseline;
  gap: 4px;
  flex-wrap: wrap;
}


/* Subtítulo del producto */
.tl-offer__subtitle {
  margin: 0;
  font-size: clamp(.88rem, 1.3vw, 1rem);
  color: var(--text-secondary);
  font-weight: 600;
  line-height: 1.55;
}

/* Descripción del producto */
.tl-offer__text {
  margin: 0;
  font-size: .88rem;
  color: var(--text-secondary);
  line-height: 1.7;
}

/* Caja "Ideal para..." */
.tl-offer__ideal {
  margin: 4px 0 0;
  font-size: .81rem;
  color: var(--text-secondary);
  line-height: 1.6;
  padding: 12px 16px;
  background: var(--bg-secondary);
  border-radius: 10px;
  border-left: 3px solid rgba(91,58,142,.22);
}

/* Lista de características */
.tl-offer__features {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.tl-offer__features span {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .86rem;
  color: var(--text-main);
  line-height: 1.4;
}

.tl-offer__features span::before {
  content: "";
  display: inline-flex;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--purple, #5B3A8E);
  opacity: .45;
  flex-shrink: 0;
}

/* Lista compacta (2 columnas) */
.tl-offer__features--compact {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px 12px;
  margin-top: auto;
}

.tl-offer__features--compact span {
  font-size: .81rem;
}

/* Precio */
.tl-offer__price {
  margin: 0 0 14px;
  font-size: 1.7rem;
  font-weight: 900;
  letter-spacing: -.04em;
  color: var(--text-main);
  line-height: 1;
}

.tl-offer__price span {
  font-size: .7rem;
  font-weight: 500;
  letter-spacing: 0;
  color: var(--text-secondary);
  display: block;
  margin-bottom: 4px;
  line-height: 1.4;
}

/* Botón de CTA */
.tl-offer__button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  padding: 11px 20px;
  border-radius: 100px;
  font-size: .86rem;
  font-weight: 700;
  letter-spacing: -.01em;
  text-decoration: none;
  border: 1px solid var(--border);
  background: var(--bg-main);
  color: var(--text-main);
  transition: background var(--t), box-shadow var(--t), transform var(--t);
}

.tl-offer__button:hover {
  background: var(--bg-secondary);
  box-shadow: 0 2px 8px rgba(15,11,26,.06);
}

/* Botón primario */
.tl-offer__button--primary {
  background: var(--purple, #5B3A8E);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 2px 14px rgba(91,58,142,.25);
}

.tl-offer__button--primary:hover {
  background: var(--purple-dark, #4A2E78);
  box-shadow: 0 6px 24px rgba(91,58,142,.38);
  transform: translateY(-1px);
}


/* ── DARK MODE ──────────────────────────────────────────────── */

.dark-mode .tl-offer {
  background: var(--bg-card);
  border-color: var(--border);
}

.dark-mode .tl-offer--main .tl-offer__footer {
  background: rgba(91,58,142,.06);
}

.dark-mode .tl-offer--secondary .tl-offer__footer {
  background: transparent;
}

.dark-mode .tl-offer__ideal {
  background: rgba(255,255,255,.03);
}

.dark-mode .tl-offer__button {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.1);
  color: rgba(255,255,255,.88);
}

.dark-mode .tl-offer__button:hover {
  background: rgba(255,255,255,.1);
}


/* ── RESPONSIVE ─────────────────────────────────────────────── */

/* Tablet: header en 1 col, oferta principal en 1 col */
@media (max-width: 960px) {
  .tl-offers__header {
    grid-template-columns: 1fr;
    gap: 16px;
  }
  .tl-offer--main {
    grid-template-columns: 1fr;
  }
  .tl-offer--main .tl-offer__content {
    border-right: none;
    border-bottom: 1px solid var(--border);
  }
  .tl-offer--main .tl-offer__features {
    flex-direction: row;
    flex-wrap: wrap;
    gap: 8px;
    border-bottom: none;
    padding-block: 20px;
  }
  .tl-offer--main .tl-offer__features span {
    background: var(--bg-secondary);
    padding: 6px 14px;
    border-radius: 100px;
    font-size: .79rem;
    border: 1px solid var(--border);
    gap: 0;
  }
  .tl-offer--main .tl-offer__features span::before {
    display: none;
  }
  .tl-offer--main .tl-offer__footer {
    padding: 20px clamp(24px, 3vw, 36px);
  }
}

/* Móvil: todo en 1 columna */
@media (max-width: 600px) {
  .tl-offers__layout {
    grid-template-columns: 1fr;
  }
  .tl-offer__features--compact {
    grid-template-columns: 1fr;
  }
}


/* ══════════════════════════════════════════════════════════
   TEIMA WORDMARK — Sistema tipográfico unificado
   Sustituye brand-v2, brand-inline y variantes anteriores.
   Regla: la I siempre en dorado, nunca invisible.
   ══════════════════════════════════════════════════════════ */

/* ── Logo principal: header y footer ───────────────────── */
.teima-brand {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  text-decoration: none;
  line-height: 1;
  flex-shrink: 0;
  color: var(--teima-ink, #111827);
}

.teima-word {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  color: var(--teima-ink, #111827);
  font-weight: 900;
  font-size: clamp(1.18rem, 1.45vw, 1.5rem);
  letter-spacing: -0.045em;
  line-height: 1;
}

.teima-word__i {
  color: var(--teima-gold, #B9952E);
  margin-inline: 2px;
  font-weight: 900;
}

.teima-lab {
  color: var(--teima-violet, #4B2E83);
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1;
  transform: translateY(-0.02em);
}

/* ── Variante sobre fondos oscuros ──────────────────────── */
.teima-brand--light .teima-word {
  color: #F6F2EA;
}
.teima-brand--light .teima-word__i {
  color: var(--teima-gold-soft, #E8D8A8);
}
.teima-brand--light .teima-lab {
  color: rgba(246,242,234,0.5);
}

/* ── Marca inline para nombres de producto ──────────────── */
/* Uso: <span class="teima-inline" aria-label="TEIMA">     */
/*   <span aria-hidden="true">T</span>...                   */
/*   <span aria-hidden="true" class="teima-inline__i">I</span> */
/* </span> Oficina                                          */
.teima-inline {
  display: inline-flex;
  align-items: baseline;
  gap: 1px;
  margin-right: 0.18em;
  color: var(--teima-ink, #111827);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 1;
  font-style: normal;
}

.teima-inline__i {
  color: var(--teima-gold, #B9952E);
  margin-inline: 2px;
  font-weight: 900;
}

/* ── Responsive ─────────────────────────────────────────── */
@media (max-width: 720px) {
  .teima-word      { font-size: 1.18rem; }
  .teima-lab       { font-size: 0.75rem; }
}


/* ============================================================
   TEIMA OFICINA — RECONSTRUCCIÓN VISUAL PREMIUM v2
   Prefijo: tl-office-*
   ============================================================ */

/* ── SECCIÓN PROBLEMA PREMIUM ───────────────────────────────── */

.tl-office-problem-premium {
  padding-block: clamp(80px, 10vw, 128px);
  background: #FDFCF9;
  position: relative;
}

.tl-office-problem-inner {
  width: min(100% - 48px, 1200px);
  margin-inline: auto;
}

.tl-office-problem-header {
  max-width: 680px;
  margin-bottom: clamp(56px, 7vw, 88px);
}

.tl-office-problem-title {
  margin: 10px 0 18px;
  font-size: clamp(1.7rem, 3.2vw, 2.6rem);
  font-weight: 900;
  letter-spacing: -.04em;
  color: #172033;
  line-height: 1.18;
  text-wrap: balance;
}

.tl-office-problem-title-em {
  color: #4B2E83;
}

.tl-office-problem-lead {
  margin: 0;
  font-size: clamp(.95rem, 1.4vw, 1.05rem);
  color: #5a5550;
  line-height: 1.7;
  max-width: 560px;
}

/* Layout: manifiesto izquierda + 3 problemas derecha */
.tl-office-problem-layout {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(24px, 3vw, 40px);
  align-items: start;
}

/* Tarjeta manifiesto */
.tl-office-manifest {
  background: linear-gradient(148deg, #1A1128 0%, #0F0B1A 60%, #1A1530 100%);
  border-radius: 24px;
  padding: clamp(36px, 5vw, 56px);
  position: relative;
  overflow: hidden;
  box-shadow:
    0 2px 8px rgba(15,11,26,.12),
    0 24px 64px rgba(15,11,26,.2);
}

.tl-office-manifest::before {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 50% at 80% 20%, rgba(91,58,142,.22) 0%, transparent 65%),
              radial-gradient(ellipse 40% 40% at 20% 80%, rgba(185,149,46,.08) 0%, transparent 60%);
  pointer-events: none;
}

.tl-office-manifest__pre {
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(185,149,46,.7);
  margin: 0 0 20px;
  position: relative;
}

.tl-office-manifest__title {
  font-size: clamp(1.4rem, 2.4vw, 2rem);
  font-weight: 900;
  letter-spacing: -.04em;
  line-height: 1.22;
  color: #fff;
  margin: 0 0 20px;
  position: relative;
}

.tl-office-manifest__body {
  font-size: clamp(.88rem, 1.2vw, .95rem);
  color: rgba(255,255,255,.52);
  line-height: 1.72;
  margin: 0;
  position: relative;
}

.tl-office-manifest__accent {
  position: absolute;
  bottom: -20px;
  right: -20px;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(91,58,142,.35) 0%, transparent 70%);
  pointer-events: none;
}

/* Tres problemas */
.tl-office-pains {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.tl-office-pain-card {
  display: flex;
  align-items: flex-start;
  gap: 24px;
  padding: clamp(24px, 3vw, 32px);
  border: 1px solid rgba(216,210,196,.7);
  border-radius: 16px;
  background: #fff;
  transition: box-shadow .2s, border-color .2s, transform .2s;
}

.tl-office-pain-card + .tl-office-pain-card {
  margin-top: 12px;
}

.tl-office-pain-card:hover {
  box-shadow: 0 4px 24px rgba(23,32,51,.07);
  border-color: rgba(91,58,142,.18);
  transform: translateY(-1px);
}

.tl-office-pain-card__num {
  font-size: clamp(2rem, 3.5vw, 3rem);
  font-weight: 900;
  letter-spacing: -.06em;
  line-height: 1;
  color: #B9952E;
  opacity: .25;
  flex-shrink: 0;
  min-width: 48px;
  text-align: right;
}

.tl-office-pain-card__body {
  flex: 1;
}

.tl-office-pain-card__title {
  margin: 0 0 8px;
  font-size: clamp(.95rem, 1.3vw, 1.05rem);
  font-weight: 800;
  color: #172033;
  letter-spacing: -.02em;
}

.tl-office-pain-card__text {
  margin: 0;
  font-size: .88rem;
  color: #5a5550;
  line-height: 1.65;
}


/* ── SECCIÓN TRANSFORMACIÓN (ANTES / CON TEIMA) ─────────────── */

.tl-office-transformation {
  padding-block: clamp(80px, 10vw, 128px);
  background: #F7F5F0;
}

.tl-office-transformation__inner {
  width: min(100% - 48px, 1100px);
  margin-inline: auto;
}

.tl-office-transformation__header {
  text-align: center;
  max-width: 660px;
  margin-inline: auto;
  margin-bottom: clamp(56px, 7vw, 80px);
}

.tl-office-transformation__title {
  margin: 10px 0 16px;
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  font-weight: 900;
  letter-spacing: -.04em;
  color: #172033;
  line-height: 1.2;
}

.tl-office-transformation__lead {
  margin: 0;
  font-size: clamp(.92rem, 1.4vw, 1.02rem);
  color: #5a5550;
  line-height: 1.7;
}

/* Grid: dos columnas + conector SVG centrado entre ellas */
.tl-office-transform-grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0;
  align-items: center;
}

/* Columna ANTES */
.tl-office-before {
  padding: clamp(32px, 4vw, 48px);
  background: rgba(185,64,64,.03);
  border: 1px solid rgba(185,64,64,.16);
  border-radius: 20px 0 0 20px;
  height: 100%;
  box-sizing: border-box;
}

/* Columna CON TEIMA */
.tl-office-after {
  padding: clamp(32px, 4vw, 48px);
  background: rgba(36,80,74,.03);
  border: 1px solid rgba(74,111,89,.18);
  border-left: none;
  border-radius: 0 20px 20px 0;
  height: 100%;
  box-sizing: border-box;
}

/* Conector central — solo el SVG, sin caja */
.tl-office-transform-connector {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  z-index: 1;
}

/* Etiquetas de columna */
.tl-office-col-label {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  margin-bottom: 24px;
  padding: 5px 12px;
  border-radius: 100px;
}

.tl-office-col-label--before {
  background: rgba(185,64,64,.1);
  color: #B94040;
  border: 1px solid rgba(185,64,64,.2);
}

.tl-office-col-label--after {
  background: rgba(74,111,89,.12);
  color: #2A6B48;
  border: 1px solid rgba(74,111,89,.22);
}

/* Listas de items */
.tl-office-transform-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.tl-office-transform-list li {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  font-size: clamp(.88rem, 1.2vw, .94rem);
  line-height: 1.6;
}

.tl-office-transform-list--before li {
  color: #5a5550;
}

.tl-office-transform-list--after li {
  color: #172033;
}

.tl-office-transform-list--after li strong {
  color: #172033;
  font-weight: 700;
}

/* ── TRANSFORM CARDS — VERSIÓN ESTABLE ──────────────────────── */

/* Contenedor de las dos tarjetas + conector */
.tl-office-transform-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
  gap: 0;
  align-items: stretch;
}

/* Conector central rediseñado */
.tl-office-transform-connector {
  align-self: center;
  display: inline-grid;
  place-items: center;
  padding: 0 8px;
  flex-shrink: 0;
}

/* Tarjeta base */
.tl-office-transform-card {
  min-width: 0;
  padding: clamp(26px, 4vw, 42px);
  box-sizing: border-box;
}

.tl-office-transform-card--before {
  background: rgba(185,64,64,.03);
  border: 1px solid rgba(185,64,64,.16);
  border-radius: 20px 0 0 20px;
}

.tl-office-transform-card--after {
  background: rgba(36,80,74,.03);
  border: 1px solid rgba(74,111,89,.18);
  border-left: none;
  border-radius: 0 20px 20px 0;
}

/* Cabecera de la tarjeta */
.tl-office-transform-card__head {
  margin-bottom: 20px;
}

.tl-office-transform-card__label {
  display: inline-block;
  font-size: .67rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 5px 12px;
  border-radius: 100px;
  margin-bottom: 7px;
}

.tl-office-transform-card__label--before {
  background: rgba(185,64,64,.1);
  color: #B94040;
  border: 1px solid rgba(185,64,64,.2);
}

.tl-office-transform-card__label--after {
  background: rgba(74,111,89,.12);
  color: #2A6B48;
  border: 1px solid rgba(74,111,89,.22);
}

.tl-office-transform-card__sub {
  font-size: .8rem;
  color: #9a948e;
  margin: 0;
  font-style: italic;
}

/* Lista de items */
.tl-office-transform-items {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Cada item: flex row — icono fijo + bloque de texto que ocupa el resto */
.tl-office-transform-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 0;
  border-top: 1px solid rgba(216, 210, 196, 0.55);
}

.tl-office-transform-item:first-child {
  border-top: 0;
  padding-top: 0;
}

/* Icono circular */
.tl-office-transform-item__icon {
  flex: 0 0 26px;
  display: inline-grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 900;
  line-height: 1;
  margin-top: 1px;
}

.tl-office-transform-card--before .tl-office-transform-item__icon {
  color: #9f3f3f;
  background: rgba(159, 63, 63, 0.10);
}

.tl-office-transform-card--after .tl-office-transform-item__icon {
  color: #146c43;
  background: rgba(20, 108, 67, 0.12);
}

/* Bloque de texto: ocupa todo el ancho restante */
.tl-office-transform-item__text {
  flex: 1 1 auto;
  min-width: 0;
}

.tl-office-transform-item__text strong {
  display: block;
  color: #172033;
  font-size: 1rem;
  font-weight: 900;
  line-height: 1.25;
}

.tl-office-transform-item__text span {
  display: block;
  margin-top: 5px;
  color: #64748b;
  font-size: 0.88rem;
  line-height: 1.6;
}

.tl-office-transform-icon--x {
  background: rgba(185,64,64,.1);
  color: #B94040;
}

.tl-office-transform-icon--check {
  background: rgba(36,108,64,.1);
  color: #246C40;
}


/* ── SECCIÓN SISTEMA INCLUDES ────────────────────────────────── */

.tl-office-system-includes {
  padding-block: clamp(80px, 10vw, 128px);
  background: #FDFCF9;
}

.tl-office-system-inner {
  width: min(100% - 48px, 1200px);
  margin-inline: auto;
}

.tl-office-system-header {
  max-width: 680px;
  margin-bottom: clamp(56px, 7vw, 88px);
}

.tl-office-system-title {
  margin: 10px 0 16px;
  font-size: clamp(1.7rem, 3.2vw, 2.6rem);
  font-weight: 900;
  letter-spacing: -.04em;
  color: #172033;
  line-height: 1.18;
  text-wrap: balance;
}

.tl-office-system-lead {
  margin: 0;
  font-size: clamp(.92rem, 1.4vw, 1.02rem);
  color: #5a5550;
  line-height: 1.7;
}

/* Layout: tarjeta principal izq (3 filas) + 3 bloques der */
.tl-office-system-layout {
  display: grid;
  grid-template-columns: 1.1fr 1fr;
  grid-template-rows: repeat(3, auto);
  gap: 16px;
  align-items: stretch;
}

/* Tarjeta principal */
.tl-office-system-main {
  grid-row: 1 / 4;
  background: linear-gradient(148deg, #1A1128 0%, #0F0B1A 55%, #1A1530 100%);
  border-radius: 24px;
  padding: clamp(36px, 5vw, 52px);
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 2px 8px rgba(15,11,26,.12),
    0 24px 64px rgba(15,11,26,.2);
}

.tl-office-system-main::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 65% 50% at 75% 15%, rgba(91,58,142,.24) 0%, transparent 65%),
    radial-gradient(ellipse 45% 40% at 15% 85%, rgba(185,149,46,.09) 0%, transparent 60%);
  pointer-events: none;
}

.tl-office-system-main__badge {
  display: inline-flex;
  align-self: flex-start;
  padding: 5px 14px;
  background: rgba(185,149,46,.18);
  border: 1px solid rgba(185,149,46,.35);
  border-radius: 100px;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #D4B84A;
  position: relative;
}

.tl-office-system-main__title {
  font-size: clamp(1.2rem, 1.8vw, 1.5rem);
  font-weight: 900;
  letter-spacing: -.03em;
  line-height: 1.28;
  color: #fff;
  margin: 0;
  position: relative;
  text-wrap: balance;
}

.tl-office-system-main__body {
  font-size: clamp(.87rem, 1.1vw, .92rem);
  color: rgba(255,255,255,.5);
  line-height: 1.72;
  margin: 0;
  position: relative;
  flex: 1;
}

.tl-office-system-main__claims {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 0;
  margin: 0;
  list-style: none;
  position: relative;
}

.tl-office-system-main__claims span {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 8px 14px;
  border-radius: 999px;
  background: rgba(185, 149, 46, .12);
  border: 1px solid rgba(185, 149, 46, .24);
  color: #f1d982;
  font-weight: 800;
  font-size: .82rem;
  letter-spacing: .01em;
}

.tl-office-system-main__claims span::before {
  content: "✓";
  color: #d6b85a;
  font-weight: 900;
  font-size: .75rem;
}

/* Legacy li support (backward compat) */
.tl-office-system-main__claims li {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: .85rem;
  font-weight: 600;
  color: rgba(255,255,255,.75);
}

.tl-office-system-main__claims li svg {
  color: #B9952E;
  flex-shrink: 0;
}

.tl-office-system-main__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: flex-start;
  padding: 11px 20px;
  background: rgba(255,255,255,.1);
  border: 1px solid rgba(255,255,255,.18);
  border-radius: 12px;
  color: rgba(255,255,255,.85);
  font-size: .86rem;
  font-weight: 600;
  text-decoration: none;
  transition: background .2s, border-color .2s;
  position: relative;
}

.tl-office-system-main__cta:hover {
  background: rgba(255,255,255,.16);
  border-color: rgba(255,255,255,.28);
}

/* Bloques laterales */
.tl-office-system-block {
  background: #fff;
  border: 1px solid rgba(216,210,196,.8);
  border-radius: 16px;
  padding: clamp(20px, 2.5vw, 28px) clamp(20px, 2.5vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 12px;
  transition: box-shadow .2s, border-color .2s;
}

.tl-office-system-block:hover {
  box-shadow: 0 4px 20px rgba(23,32,51,.06);
  border-color: rgba(91,58,142,.2);
}

.tl-office-system-block__header {
  display: flex;
  align-items: center;
  gap: 14px;
}

.tl-office-system-block__num {
  font-size: clamp(1.5rem, 2.2vw, 2rem);
  font-weight: 900;
  letter-spacing: -.06em;
  color: #B9952E;
  opacity: .3;
  line-height: 1;
  flex-shrink: 0;
  min-width: 36px;
}

.tl-office-system-block__label {
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: #4B2E83;
  opacity: .5;
  margin: 0 0 2px;
}

.tl-office-system-block__title {
  margin: 0;
  font-size: clamp(.95rem, 1.2vw, 1.02rem);
  font-weight: 800;
  color: #172033;
  letter-spacing: -.02em;
}

/* Lista de capacidades — base container */
.tl-office-capability-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
/* .tl-office-system-block__desc and .tl-office-capability-list li
   defined below (premium versions override) */


/* ── RESPONSIVE ─────────────────────────────────────────────── */

/* Problema: stack a 1 columna en tablet */
@media (max-width: 860px) {
  .tl-office-problem-layout {
    grid-template-columns: 1fr;
  }
  .tl-office-manifest {
    min-height: 0;
  }
}

/* Antes/Después: conectar vertical en móvil */
@media (max-width: 680px) {
  .tl-office-transform-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto auto auto;
    gap: 2px;
  }
  .tl-office-before {
    border-radius: 16px 16px 0 0;
    border-bottom: none;
  }
  .tl-office-after {
    border-radius: 0 0 16px 16px;
    border-left: 1px solid rgba(74,111,89,.18);
    border-top: none;
  }
  .tl-office-transform-connector {
    padding: 8px 0;
    transform: rotate(90deg);
    justify-self: center;
  }

  /* Transform cards: stack vertical en móvil */
  .tl-office-transform-grid {
    grid-template-columns: 1fr;
    gap: 0;
  }
  .tl-office-transform-card--before {
    border-radius: 16px 16px 0 0;
    border-bottom: none;
  }
  .tl-office-transform-card--after {
    border-radius: 0 0 16px 16px;
    border-left: 1px solid rgba(74,111,89,.18);
    border-top: none;
  }
  .tl-office-transform-connector {
    justify-self: center;
    padding: 8px 0;
  }
  .tl-office-transform-connector svg {
    transform: rotate(90deg);
  }
}

/* Sistema includes: stack en tablet */
@media (max-width: 860px) {
  .tl-office-system-layout {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }
  .tl-office-system-main {
    grid-row: auto;
  }
}

/* Móvil general */
@media (max-width: 560px) {
  .tl-office-pain-card {
    flex-direction: column;
    gap: 8px;
  }
  .tl-office-pain-card__num {
    font-size: 1.8rem;
    min-width: auto;
    text-align: left;
  }
}


/* ============================================================
   TEIMA OFICINA — Clases nuevas v1 premium
   ============================================================ */

/* Número grande en tarjetas de problema */
.tl-problem-num {
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--purple, #5B3A8E);
  opacity: .35;
  margin: 0 0 4px;
}

/* Hero microcopy chips — sin SVG */
.tl-product-hero__trust-item {
  font-size: .78rem;
  color: rgba(255,255,255,.48);
  font-weight: 500;
}

/* I dorada dentro del hero brand */
.tl-product-hero__brand .teima-inline__i {
  color: #D4A017;
  margin-inline: 0;
}

/* Texto de lead en solución */
.tl-product-solution__lead {
  margin: 16px auto 0;
  font-size: clamp(.9rem, 1.3vw, 1rem);
  color: var(--text-secondary);
  line-height: 1.65;
  max-width: 600px;
  text-align: center;
}

/* Hero visual: centrar al colapsar a 1 col */
@media (max-width: 960px) {
  .tl-product-hero__visual {
    margin-inline: auto;
  }
  .tl-product-hero__actions .btn {
    flex: 1 1 auto;
    text-align: center;
    justify-content: center;
  }
}

/* Responsive: usecases y audiencia en móvil */
@media (max-width: 640px) {
  .tl-product-usecases__grid {
    grid-template-columns: 1fr;
  }
  .tl-product-audience__grid {
    grid-template-columns: 1fr;
  }
  .tl-product-hero__actions {
    flex-direction: column;
    align-items: stretch;
  }
  .tl-product-hero__actions .btn {
    text-align: center;
    justify-content: center;
  }
}

/* ============================================================
   HOME — Diagnosis CTA (reemplaza formulario inline)
   ============================================================ */

.tl-home-diagnosis-cta {
  padding: 96px 24px;
  text-align: center;
  background: var(--surface-2, #F6F4F0);
}

.tl-home-diagnosis-cta__inner {
  max-width: 560px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
}

.tl-home-diagnosis-cta__title {
  font-size: clamp(1.6rem, 4vw, 2.2rem);
  font-weight: 800;
  line-height: 1.2;
  color: var(--ink, #172033);
  margin: 0;
}

.tl-home-diagnosis-cta__lead {
  font-size: 1rem;
  color: var(--ink-muted, #64748b);
  line-height: 1.65;
  margin: 0;
  max-width: 480px;
}

.tl-home-diagnosis-cta__note {
  font-size: .78rem;
  color: var(--ink-muted, #64748b);
  opacity: .7;
  margin: 0;
  letter-spacing: .02em;
}

/* Dark mode */
body.dark-mode .tl-home-diagnosis-cta {
  background: rgba(255, 255, 255, 0.03);
}

body.dark-mode .tl-home-diagnosis-cta__title {
  color: rgba(255, 255, 255, .92);
}

body.dark-mode .tl-home-diagnosis-cta__lead,
body.dark-mode .tl-home-diagnosis-cta__note {
  color: rgba(255, 255, 255, .45);
}

/* ============================================================
   HOME — Próximas verticales (bloque compacto)
   ============================================================ */

.tl-next-compact {
  padding: 72px 24px;
  background: var(--bg, #FAFAF8);
  border-top: 1px solid rgba(23, 32, 51, .07);
}

.tl-next-compact__inner {
  max-width: 800px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

.tl-next-compact__body {
  flex: 1 1 340px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.tl-next-compact__title {
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  font-weight: 800;
  color: var(--ink, #172033);
  line-height: 1.2;
  margin: 0;
}

.tl-next-compact__lead {
  font-size: .95rem;
  color: var(--ink-muted, #64748b);
  line-height: 1.6;
  margin: 0;
}

.tl-next-compact__tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 4px;
}

.tl-next-compact__tag {
  display: inline-block;
  padding: 4px 12px;
  background: rgba(91, 58, 142, .08);
  border: 1px solid rgba(91, 58, 142, .18);
  border-radius: 999px;
  font-size: .78rem;
  font-weight: 600;
  color: var(--purple, #5B3A8E);
  letter-spacing: .02em;
}

.tl-next-compact__cta {
  flex: 0 0 auto;
  white-space: nowrap;
}

/* Dark mode */
body.dark-mode .tl-next-compact {
  background: rgba(255, 255, 255, .02);
  border-top-color: rgba(255, 255, 255, .06);
}

body.dark-mode .tl-next-compact__title {
  color: rgba(255, 255, 255, .88);
}

body.dark-mode .tl-next-compact__lead {
  color: rgba(255, 255, 255, .45);
}

body.dark-mode .tl-next-compact__tag {
  background: rgba(91, 58, 142, .2);
  border-color: rgba(91, 58, 142, .35);
  color: #c4a8f0;
}

@media (max-width: 640px) {
  .tl-next-compact__inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .tl-next-compact__cta {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}

/* ============================================================
   FOOTER — Badge "Próximamente"
   ============================================================ */

.footer-link-soon {
  display: inline-block;
  margin-left: 6px;
  padding: 2px 7px;
  background: rgba(91, 58, 142, .1);
  border: 1px solid rgba(91, 58, 142, .2);
  border-radius: 999px;
  font-size: .65rem;
  font-weight: 700;
  color: var(--purple, #5B3A8E);
  letter-spacing: .04em;
  text-transform: uppercase;
  vertical-align: middle;
  line-height: 1.4;
}

body.dark-mode .footer-link-soon {
  background: rgba(196, 168, 240, .1);
  border-color: rgba(196, 168, 240, .25);
  color: #c4a8f0;
}

/* ============================================================
   TEIMA OFICINA — Para quién es (premium, 3 perfiles)
   ============================================================ */

.tl-office-audience-premium {
  padding: 96px 24px;
  background: var(--bg, #FAFAF8);
}

.tl-office-audience-inner {
  max-width: 1100px;
  margin: 0 auto;
}

.tl-office-audience-header {
  max-width: 680px;
  margin: 0 auto 56px;
  text-align: center;
}

.tl-office-audience-title {
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  font-weight: 800;
  line-height: 1.2;
  color: var(--ink, #172033);
  margin: 8px 0 16px;
}

.tl-office-audience-lead {
  font-size: 1rem;
  color: var(--ink-muted, #64748b);
  line-height: 1.65;
  margin: 0;
}

.tl-office-audience-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 24px;
  align-items: stretch;
}

.tl-office-audience-card {
  background: #fff;
  border: 1px solid rgba(23, 32, 51, .07);
  border-radius: 20px;
  padding: 32px 28px 28px;
  display: flex;
  flex-direction: column;
  gap: 20px;
  position: relative;
  box-shadow: 0 2px 12px rgba(23, 32, 51, .05);
  transition: box-shadow .2s ease, transform .2s ease;
}

.tl-office-audience-card:hover {
  box-shadow: 0 8px 28px rgba(23, 32, 51, .1);
  transform: translateY(-2px);
}

.tl-office-audience-card__num {
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--purple, #5B3A8E);
  opacity: .4;
}

.tl-office-audience-card__title {
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--ink, #172033);
  line-height: 1.25;
  margin: 0;
}

/* Pain block */
.tl-office-audience-card__pain,
.tl-office-audience-card__help {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tl-office-audience-card__pain-label,
.tl-office-audience-card__help-label {
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0;
}

.tl-office-audience-card__pain-label { color: #9f3f3f; }
.tl-office-audience-card__help-label { color: var(--purple, #5B3A8E); }

.tl-office-audience-card__pain p,
.tl-office-audience-card__help p {
  font-size: .9rem;
  color: var(--ink-muted, #64748b);
  line-height: 1.6;
  margin: 0;
}

/* Result — highlight */
.tl-office-audience-card__result {
  background: rgba(20, 108, 67, .06);
  border-left: 3px solid rgba(20, 108, 67, .55);
  border-radius: 0 8px 8px 0;
  padding: 12px 14px;
  font-size: .88rem;
  font-weight: 600;
  color: #145838;
  line-height: 1.5;
}

/* Capabilities */
.tl-office-audience-card__caps {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  border-top: 1px solid rgba(23, 32, 51, .07);
  padding-top: 16px;
  margin-top: auto;
}

.tl-office-audience-card__caps li {
  display: inline-block;
  padding: 3px 10px;
  background: var(--surface-2, #F6F4F0);
  border-radius: 999px;
  font-size: .73rem;
  font-weight: 600;
  color: var(--ink-muted, #64748b);
  letter-spacing: .01em;
}

/* Dark mode */
body.dark-mode .tl-office-audience-premium {
  background: rgba(255, 255, 255, .02);
}

body.dark-mode .tl-office-audience-title {
  color: rgba(255, 255, 255, .88);
}

body.dark-mode .tl-office-audience-lead {
  color: rgba(255, 255, 255, .45);
}

body.dark-mode .tl-office-audience-card {
  background: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .08);
  box-shadow: none;
}

body.dark-mode .tl-office-audience-card:hover {
  background: rgba(255, 255, 255, .06);
  box-shadow: 0 8px 28px rgba(0, 0, 0, .3);
}

body.dark-mode .tl-office-audience-card__title {
  color: rgba(255, 255, 255, .88);
}

body.dark-mode .tl-office-audience-card__pain p,
body.dark-mode .tl-office-audience-card__help p {
  color: rgba(255, 255, 255, .45);
}

body.dark-mode .tl-office-audience-card__result {
  background: rgba(20, 108, 67, .12);
  border-left-color: rgba(20, 108, 67, .5);
  color: #6fcfa0;
}

body.dark-mode .tl-office-audience-card__caps {
  border-top-color: rgba(255, 255, 255, .07);
}

body.dark-mode .tl-office-audience-card__caps li {
  background: rgba(255, 255, 255, .06);
  color: rgba(255, 255, 255, .45);
}

/* Responsive */
@media (max-width: 900px) {
  .tl-office-audience-grid {
    grid-template-columns: 1fr;
    max-width: 560px;
    margin: 0 auto;
  }
}

/* ============================================================
   TEIMA OFICINA — Bloque benefit en "Qué incluye"
   ============================================================ */

.tl-office-system-block__desc {
  font-size: .88rem;
  color: var(--ink-muted, #64748b);
  line-height: 1.6;
  margin: 4px 0 0;
}
/* .tl-office-system-block__benefit defined below with span+strong structure */

/* ============================================================
   TEIMA OFICINA — Resultado en casos de uso (más presencia)
   Alineamos fondo y texto en verde para coherencia visual.
   Sobreescribe el fondo morado heredado del CSS base.
   ============================================================ */

.tl-product-usecase-row--result {
  background: rgba(20, 108, 67, .05);
  border-top-color: rgba(20, 108, 67, .2);
}

.tl-product-usecase-row--result .tl-product-usecase-row__label {
  color: #146c43;
}

.tl-product-usecase-row--result .tl-product-usecase-row__content {
  color: #172033;
  font-size: .9rem;
  line-height: 1.55;
  font-weight: 500;
}

.tl-product-usecase-row--result .tl-product-usecase-row__content strong {
  color: #145838;
}

body.dark-mode .tl-product-usecase-row--result {
  background: rgba(20, 108, 67, .1);
  border-top-color: rgba(20, 108, 67, .3);
}

body.dark-mode .tl-product-usecase-row--result .tl-product-usecase-row__label {
  color: #6fcfa0;
}

body.dark-mode .tl-product-usecase-row--result .tl-product-usecase-row__content {
  color: rgba(255, 255, 255, .82);
}

body.dark-mode .tl-product-usecase-row--result .tl-product-usecase-row__content strong {
  color: #6fcfa0;
}

/* ============================================================
   TEIMA OFICINA — Banda de transición antes de precios
   ============================================================ */

.tl-office-bridge {
  padding: 44px 24px;
  background: linear-gradient(135deg, rgba(91, 58, 142, .09) 0%, rgba(91, 58, 142, .04) 100%);
  border-top: 1px solid rgba(91, 58, 142, .18);
  border-bottom: 1px solid rgba(91, 58, 142, .18);
  text-align: center;
  position: relative;
}

.tl-office-bridge__text {
  max-width: 660px;
  margin: 0 auto;
  font-size: clamp(1.05rem, 2.4vw, 1.3rem);
  font-weight: 700;
  color: var(--ink, #172033);
  line-height: 1.4;
  letter-spacing: -.015em;
}

/* Acento tipográfico: la segunda mitad de la frase en morado */
.tl-office-bridge__text em {
  font-style: normal;
  color: var(--purple, #5B3A8E);
}

body.dark-mode .tl-office-bridge {
  background: linear-gradient(135deg, rgba(91, 58, 142, .18) 0%, rgba(91, 58, 142, .08) 100%);
  border-color: rgba(196, 168, 240, .2);
}

body.dark-mode .tl-office-bridge__text {
  color: rgba(255, 255, 255, .88);
}

body.dark-mode .tl-office-bridge__text em {
  color: #c4a8f0;
}

/* ============================================================
   TEIMA OFICINA — Casos de uso premium (editorial layout)
   ============================================================ */

.tl-office-usecases-premium {
  padding: 96px 24px;
  background: var(--surface-2, #F6F4F0);
}

.tl-office-usecases-premium__inner {
  max-width: 1100px;
  margin: 0 auto;
}

.tl-office-usecases-premium__header {
  max-width: 680px;
  margin: 0 auto 56px;
  text-align: center;
}

.tl-office-usecases-premium__title {
  font-size: clamp(1.6rem, 3.5vw, 2.2rem);
  font-weight: 800;
  line-height: 1.2;
  color: var(--ink, #172033);
  margin: 8px 0 16px;
}

.tl-office-usecases-premium__lead {
  font-size: 1rem;
  color: var(--ink-muted, #64748b);
  line-height: 1.65;
  margin: 0;
}

/* ── Layout: featured left + 3 compact right ── */
.tl-office-usecases-layout {
  display: grid;
  grid-template-columns: minmax(0, 1.1fr) minmax(320px, 0.9fr);
  gap: 28px;
  align-items: stretch;
}

.tl-office-usecases-secondary {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* ── Meta label ── */
.tl-office-usecase-meta {
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(185, 149, 46, .9);
  margin: 0 0 12px;
}

/* ── Featured card ── */
.tl-office-usecase-featured {
  padding: clamp(32px, 5vw, 52px);
  border-radius: 34px;
  background:
    radial-gradient(circle at top right, rgba(185, 149, 46, .16), transparent 34%),
    linear-gradient(135deg, #ffffff 0%, #f7f3eb 100%);
  border: 1px solid rgba(185, 149, 46, .24);
  box-shadow: 0 24px 70px rgba(23, 32, 51, .10);
  display: flex;
  flex-direction: column;
}

.tl-office-usecase-featured__title {
  font-size: clamp(1.25rem, 2.5vw, 1.6rem);
  font-weight: 800;
  color: var(--ink, #172033);
  line-height: 1.2;
  margin: 0 0 28px;
  letter-spacing: -.02em;
}

/* ── Compact card ── */
.tl-office-usecase-compact {
  padding: 24px 26px;
  border-radius: 26px;
  background: rgba(255, 255, 255, .82);
  border: 1px solid rgba(216, 210, 196, .85);
  box-shadow: 0 16px 42px rgba(23, 32, 51, .06);
  flex: 1;
  display: flex;
  flex-direction: column;
}

.tl-office-usecase-compact .tl-office-usecase-meta {
  margin-bottom: 14px;
  color: var(--purple, #5B3A8E);
  opacity: .75;
}

/* ── Flow items ── */
.tl-office-usecase-flow {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.tl-office-usecase-flow__item {
  padding: 14px 0;
  border-bottom: 1px solid rgba(23, 32, 51, .07);
}

.tl-office-usecase-flow__item:last-child {
  border-bottom: none;
}

.tl-office-usecase-flow--compact .tl-office-usecase-flow__item {
  padding: 10px 0;
}

.tl-office-usecase-flow__label {
  display: block;
  font-size: .67rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--ink-muted, #64748b);
  margin-bottom: 5px;
}

.tl-office-usecase-flow__label--system {
  color: var(--purple, #5B3A8E);
}

.tl-office-usecase-flow__text {
  margin: 0;
  font-size: .9rem;
  color: var(--ink, #172033);
  line-height: 1.55;
}

.tl-office-usecase-flow--compact .tl-office-usecase-flow__text {
  font-size: .84rem;
}

/* ── Arrow connector (featured only) ── */
.tl-office-usecase-flow__arrow {
  text-align: center;
  color: rgba(185, 149, 46, .6);
  font-size: 1.1rem;
  line-height: 1;
  padding: 4px 0;
}

/* ── Result block ── */
.tl-office-usecase-result {
  margin-top: 24px;
  padding: 20px 22px;
  border-radius: 20px;
  background: linear-gradient(135deg, rgba(20, 108, 67, .11), rgba(20, 108, 67, .045));
  border-left: 4px solid rgba(20, 108, 67, .65);
}

.tl-office-usecase-result span {
  display: block;
  margin-bottom: 8px;
  color: #146c43;
  font-size: .7rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.tl-office-usecase-result strong {
  display: block;
  color: #145838;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1.55;
}

.tl-office-usecase-result--compact {
  margin-top: 14px;
  padding: 14px 16px;
  border-radius: 14px;
}

.tl-office-usecase-result--compact strong {
  font-size: .88rem;
}

/* ── Before / After contrast ── */
.tl-office-usecase-before-after {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 14px;
  align-items: center;
  margin-top: 28px;
  padding-top: 28px;
  border-top: 1px solid rgba(185, 149, 46, .18);
}

.tl-office-usecase-before-after__before,
.tl-office-usecase-before-after__after {
  padding: 16px 18px;
  border-radius: 18px;
  background: rgba(255, 255, 255, .7);
  border: 1px solid rgba(216, 210, 196, .75);
}

.tl-office-usecase-before-after__before {
  opacity: .65;
}

.tl-office-usecase-before-after__tag {
  font-size: .65rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
  margin: 0 0 6px;
  color: var(--ink-muted, #64748b);
}

.tl-office-usecase-before-after__after .tl-office-usecase-before-after__tag {
  color: #146c43;
}

.tl-office-usecase-before-after__text {
  margin: 0;
  font-size: .86rem;
  font-weight: 600;
  color: var(--ink, #172033);
  line-height: 1.45;
}

.tl-office-usecase-before-after__sep {
  font-size: 1.3rem;
  color: rgba(185, 149, 46, .7);
  font-weight: 900;
  text-align: center;
}

/* ── Dark mode ── */
body.dark-mode .tl-office-usecases-premium {
  background: rgba(255, 255, 255, .02);
}

body.dark-mode .tl-office-usecases-premium__title {
  color: rgba(255, 255, 255, .88);
}

body.dark-mode .tl-office-usecases-premium__lead {
  color: rgba(255, 255, 255, .45);
}

body.dark-mode .tl-office-usecase-featured {
  background:
    radial-gradient(circle at top right, rgba(185, 149, 46, .12), transparent 34%),
    linear-gradient(135deg, rgba(255,255,255,.06) 0%, rgba(255,255,255,.03) 100%);
  border-color: rgba(185, 149, 46, .2);
  box-shadow: 0 24px 70px rgba(0, 0, 0, .3);
}

body.dark-mode .tl-office-usecase-featured__title {
  color: rgba(255, 255, 255, .88);
}

body.dark-mode .tl-office-usecase-compact {
  background: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .08);
  box-shadow: none;
}

body.dark-mode .tl-office-usecase-flow__item {
  border-bottom-color: rgba(255, 255, 255, .07);
}

body.dark-mode .tl-office-usecase-flow__text {
  color: rgba(255, 255, 255, .75);
}

body.dark-mode .tl-office-usecase-result {
  background: linear-gradient(135deg, rgba(20, 108, 67, .18), rgba(20, 108, 67, .08));
  border-left-color: rgba(20, 108, 67, .6);
}

body.dark-mode .tl-office-usecase-result strong {
  color: #6fcfa0;
}

body.dark-mode .tl-office-usecase-result span {
  color: #6fcfa0;
}

body.dark-mode .tl-office-usecase-before-after {
  border-top-color: rgba(185, 149, 46, .15);
}

body.dark-mode .tl-office-usecase-before-after__before,
body.dark-mode .tl-office-usecase-before-after__after {
  background: rgba(255, 255, 255, .05);
  border-color: rgba(255, 255, 255, .08);
}

body.dark-mode .tl-office-usecase-before-after__text {
  color: rgba(255, 255, 255, .75);
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .tl-office-usecases-layout {
    grid-template-columns: 1fr;
  }

  .tl-office-usecase-before-after {
    grid-template-columns: 1fr;
    gap: 10px;
  }

  .tl-office-usecase-before-after__sep {
    transform: rotate(90deg);
  }
}

/* ============================================================
   TEIMA OFICINA — Arquitectura del sistema (panel oscuro)
   ============================================================ */

.tl-office-system-core {
  display: grid;
  gap: 10px;
  margin-top: 28px;
}

.tl-office-system-core__item {
  display: grid;
  grid-template-columns: 42px minmax(0, 1fr);
  gap: 14px;
  align-items: start;
  padding: 14px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, .055);
  border: 1px solid rgba(255, 255, 255, .10);
  transition: background .2s;
}

.tl-office-system-core__item:hover {
  background: rgba(255, 255, 255, .08);
}

.tl-office-system-core__item > span {
  display: inline-grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 999px;
  background: rgba(185, 149, 46, .16);
  color: #d6b85a;
  font-weight: 900;
  font-size: .75rem;
  letter-spacing: .04em;
  flex-shrink: 0;
}

.tl-office-system-core__item > div {
  min-width: 0;
}

.tl-office-system-core__item strong {
  display: block;
  color: rgba(255, 255, 255, .9);
  font-weight: 800;
  font-size: .9rem;
  line-height: 1.3;
}

.tl-office-system-core__item p {
  margin: 4px 0 0;
  color: rgba(255, 255, 255, .5);
  font-size: .8rem;
  line-height: 1.5;
}

/* ============================================================
   TEIMA OFICINA — Benefit con etiqueta (en bloques derechos)
   ============================================================ */

/* Sobreescribe el <p> anterior — ahora es <div> con <span>+<strong> */
.tl-office-system-block__benefit {
  background: rgba(91, 58, 142, .06);
  border-left: 3px solid rgba(91, 58, 142, .4);
  border-radius: 0 8px 8px 0;
  padding: 12px 14px;
  margin: 4px 0 0;
}

.tl-office-system-block__benefit span {
  display: block;
  margin-bottom: 6px;
  color: var(--purple, #5B3A8E);
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .12em;
  text-transform: uppercase;
}

.tl-office-system-block__benefit strong {
  display: block;
  color: var(--purple, #5B3A8E);
  font-size: .88rem;
  font-weight: 600;
  line-height: 1.55;
}

body.dark-mode .tl-office-system-block__benefit {
  background: rgba(91, 58, 142, .15);
  border-left-color: rgba(196, 168, 240, .45);
}

body.dark-mode .tl-office-system-block__benefit span,
body.dark-mode .tl-office-system-block__benefit strong {
  color: #c4a8f0;
}

/* ============================================================
   TEIMA OFICINA — Chips de capacidades (premium)
   ============================================================ */

.tl-office-capability-list li {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 5px 12px;
  background: rgba(91, 58, 142, .06);
  border: 1px solid rgba(91, 58, 142, .15);
  border-radius: 999px;
  font-size: .76rem;
  font-weight: 700;
  color: var(--purple, #5B3A8E);
  letter-spacing: .01em;
}

.tl-office-capability-list li::before {
  content: "·";
  color: rgba(185, 149, 46, .8);
  font-weight: 900;
  font-size: .9rem;
  line-height: 1;
}

body.dark-mode .tl-office-capability-list li {
  background: rgba(196, 168, 240, .08);
  border-color: rgba(196, 168, 240, .2);
  color: #c4a8f0;
}

body.dark-mode .tl-office-system-core__item {
  background: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .08);
}

/* Responsive sistema core */
@media (max-width: 900px) {
  .tl-office-system-core {
    grid-template-columns: 1fr;
  }
}


/* ============================================================
   SPRINT 3 — NUEVAS SECCIONES
   P1: tl-office-deliverables  (Qué recibirás realmente)
   P2: tl-office-howto         (Cómo empezar, 3 pasos)
   P3: tl-trust-band           (Diseñado con criterio profesional)
   ============================================================ */


/* ── P1: ENTREGABLES ─────────────────────────────────────── */

.tl-office-deliverables {
  padding-block: clamp(80px, 10vw, 112px);
  background: var(--bg-secondary);
}

.tl-office-deliverables__inner {
  width: min(100% - 48px, 1100px);
  margin-inline: auto;
}

.tl-office-deliverables__header {
  text-align: center;
  max-width: 660px;
  margin: 0 auto clamp(48px, 6vw, 72px);
}

.tl-office-deliverables__title {
  font-size: clamp(1.8rem, 3.4vw, 2.6rem);
  font-weight: 900;
  letter-spacing: -.04em;
  color: var(--text-main);
  margin: 8px 0 0;
  line-height: 1.1;
}

.tl-office-deliverables__lead {
  margin: 14px 0 0;
  font-size: clamp(.9rem, 1.3vw, 1.02rem);
  color: var(--text-secondary);
  line-height: 1.7;
}

/* Layout: dark panel izquierdo + grid de tarjetas */
.tl-office-deliverables__layout {
  display: grid;
  grid-template-columns: 1fr 1.5fr;
  gap: clamp(36px, 5vw, 64px);
  align-items: center;
}

/* Panel visual: dark */
.tl-office-deliverables__mockup {
  background: linear-gradient(148deg, #1A1128 0%, #0F0B1A 55%, #1A1530 100%);
  border-radius: 24px;
  padding: clamp(36px, 5vw, 52px);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
  position: relative;
  overflow: hidden;
  box-shadow:
    0 2px 8px rgba(15,11,26,.12),
    0 20px 60px rgba(15,11,26,.22);
}

.tl-office-deliverables__mockup::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 60% 50% at 80% 10%, rgba(91,58,142,.22) 0%, transparent 65%),
    radial-gradient(ellipse 40% 40% at 10% 90%, rgba(185,149,46,.1) 0%, transparent 65%);
  pointer-events: none;
}

/* Document stack */
.tl-office-pack {
  position: relative;
  width: 190px;
  height: 210px;
  flex-shrink: 0;
}

.tl-office-pack__doc {
  position: absolute;
  border-radius: 12px;
}

.tl-office-pack__doc--back {
  width: 165px;
  height: 200px;
  top: 16px;
  left: 24px;
  transform: rotate(5deg);
  background: rgba(185,149,46,.1);
  border: 1px solid rgba(185,149,46,.22);
}

.tl-office-pack__doc--mid {
  width: 168px;
  height: 204px;
  top: 8px;
  left: 12px;
  transform: rotate(2deg);
  background: rgba(91,58,142,.1);
  border: 1px solid rgba(91,58,142,.22);
}

.tl-office-pack__doc--front {
  width: 175px;
  height: 208px;
  top: 0;
  left: 0;
  transform: rotate(0);
  background: rgba(255,255,255,.07);
  border: 1px solid rgba(255,255,255,.16);
  padding: 18px 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  overflow: hidden;
}

.tl-office-pack__doc-header {
  display: flex;
}

.tl-office-pack__doc-tag {
  background: rgba(185,149,46,.18);
  color: #d6b85a;
  font-size: .58rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 100px;
}

.tl-office-pack__doc-lines {
  display: flex;
  flex-direction: column;
  gap: 7px;
  flex: 1;
}

.tl-office-pack__doc-lines span {
  display: block;
  height: 5px;
  background: rgba(255,255,255,.13);
  border-radius: 3px;
  width: 100%;
}

.tl-office-pack__doc-line--short {
  width: 62% !important;
}

.tl-office-pack__doc-check {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .66rem;
  color: #6fcfa0;
  font-weight: 700;
  padding: 7px 10px;
  background: rgba(20,108,67,.15);
  border-radius: 8px;
  border: 1px solid rgba(20,108,67,.25);
}

/* Label bajo el mockup */
.tl-office-pack__label {
  font-size: .7rem;
  color: rgba(255,255,255,.32);
  text-align: center;
  letter-spacing: .05em;
  margin: 0;
  text-transform: uppercase;
}

/* Lista de contenidos del kit */
.tl-office-pack__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.tl-office-pack__list li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .8rem;
  color: rgba(255,255,255,.6);
  font-weight: 500;
}

.tl-office-pack__list li svg {
  color: #6fcfa0;
  flex-shrink: 0;
}

/* Grid de 4 tarjetas de entregable */
.tl-office-deliverables__grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

.tl-office-deliverable-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 16px;
  padding: 22px 20px;
  transition: box-shadow var(--t), transform var(--t), border-color var(--t);
}

.tl-office-deliverable-card:hover {
  border-color: rgba(91,58,142,.25);
  box-shadow: 0 4px 20px rgba(91,58,142,.07);
  transform: translateY(-2px);
}

.tl-office-deliverable-card__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(91,58,142,.08);
  border-radius: 10px;
  color: var(--purple, #5B3A8E);
  margin-bottom: 12px;
}

.tl-office-deliverable-card__title {
  font-size: .9rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 8px;
  letter-spacing: -.02em;
  line-height: 1.3;
}

.tl-office-deliverable-card__text {
  font-size: .83rem;
  color: var(--text-secondary);
  line-height: 1.65;
  margin: 0;
}

/* Dark mode overrides */
body.dark-mode .tl-office-deliverable-card {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.08);
}

body.dark-mode .tl-office-deliverable-card:hover {
  border-color: rgba(91,58,142,.35);
  background: rgba(91,58,142,.06);
}

/* Responsive */
@media (max-width: 900px) {
  .tl-office-deliverables__layout {
    grid-template-columns: 1fr;
  }
  .tl-office-deliverables__visual {
    max-width: 420px;
    margin: 0 auto;
  }
}

@media (max-width: 580px) {
  .tl-office-deliverables__grid {
    grid-template-columns: 1fr;
  }
}


/* ── P2: CÓMO EMPEZAR ────────────────────────────────────── */

.tl-office-howto {
  padding-block: clamp(72px, 9vw, 100px);
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.tl-office-howto__inner {
  width: min(100% - 48px, 980px);
  margin-inline: auto;
}

.tl-office-howto__header {
  text-align: center;
  margin-bottom: clamp(40px, 5vw, 56px);
}

.tl-office-howto__title {
  font-size: clamp(1.7rem, 3vw, 2.4rem);
  font-weight: 900;
  letter-spacing: -.04em;
  color: var(--text-main);
  margin: 8px 0 0;
  line-height: 1.15;
}

.tl-office-howto__steps {
  display: flex;
  align-items: flex-start;
  gap: 0;
}

.tl-office-howto-step {
  flex: 1;
  padding: 30px 26px;
  background: var(--bg-main);
  border: 1px solid var(--border);
  border-radius: 18px;
  display: flex;
  flex-direction: column;
}

.tl-office-howto-step__connector {
  display: flex;
  align-items: center;
  justify-content: center;
  color: rgba(185,149,46,.5);
  padding: 0 10px;
  min-width: 40px;
  flex-shrink: 0;
  margin-top: 50px;
}

.tl-office-howto-step__num {
  display: block;
  font-size: .6rem;
  font-weight: 900;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--purple, #5B3A8E);
  opacity: .65;
  margin-bottom: 10px;
}

.tl-office-howto-step__title {
  font-size: .95rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 10px;
  letter-spacing: -.02em;
  line-height: 1.3;
}

.tl-office-howto-step__text {
  font-size: .84rem;
  color: var(--text-secondary);
  line-height: 1.65;
  margin: 0;
}

/* .tl-office-howto__cta — overridden by Sprint 4 S4-6 (flex layout with dual CTAs) */

/* Dark mode */
body.dark-mode .tl-office-howto-step {
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.08);
}

/* Responsive */
@media (max-width: 680px) {
  .tl-office-howto__steps {
    flex-direction: column;
    gap: 0;
    align-items: stretch;
  }
  .tl-office-howto-step__connector {
    transform: rotate(90deg);
    margin: 8px auto;
    padding: 0;
    min-width: auto;
  }
}


/* ── P3: TRUST BAND ──────────────────────────────────────── */

.tl-trust-band {
  padding-block: clamp(40px, 5vw, 56px);
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.tl-trust-band__inner {
  width: min(100% - 48px, 1060px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 28px 40px;
}

.tl-trust-item {
  display: flex;
  gap: 14px;
  align-items: flex-start;
}

.tl-trust-item__icon {
  width: 34px;
  height: 34px;
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: rgba(91,58,142,.08);
  border-radius: 10px;
  color: var(--purple, #5B3A8E);
}

.tl-trust-item strong {
  display: block;
  font-size: .88rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 4px;
  letter-spacing: -.01em;
}

.tl-trust-item p {
  font-size: .82rem;
  color: var(--text-secondary);
  line-height: 1.62;
  margin: 0;
}

@media (max-width: 720px) {
  .tl-trust-band__inner {
    grid-template-columns: 1fr;
    gap: 22px;
  }
}


/* ============================================================
   SPRINT 4 — MUESTRA PÚBLICA & PRODUCTO TANGIBLE
   S4-1: tl-office-deliverables proof CTA (inline link in header)
   S4-2: tl-office-validation-band (honesta, antes de precios)
   S4-3: tl-offer CTA group (index.html — muestra badge + link)
   S4-4: tl-diagnosis-final-cta sample (diagnostico.html)
   S4-5: btn-outline-purple (nuevo estilo de botón)
   S4-6: tl-office-howto__cta dual buttons layout
   ============================================================ */


/* ── S4-1: Proof CTA en deliverables header ─────────────── */

.tl-office-deliverables__proof-cta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 16px;
  margin-top: 20px;
}

.tl-office-deliverables__proof-note {
  font-size: 0.8rem;
  color: var(--text-muted);
}


/* ── S4-2: Validation band ──────────────────────────────── */

.tl-office-validation-band {
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding: clamp(40px, 5vw, 64px) 0;
}

.tl-office-validation-band__inner {
  width: min(100% - 48px, 960px);
  margin-inline: auto;
}

.tl-office-validation-band__header {
  text-align: center;
  margin-bottom: clamp(28px, 4vw, 40px);
}

.tl-office-validation-band__title {
  font-size: clamp(1.1rem, 2vw, 1.35rem);
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 10px;
}

.tl-office-validation-band__lead {
  font-size: clamp(0.88rem, 1.3vw, 0.95rem);
  color: var(--text-secondary);
  line-height: 1.65;
  max-width: 620px;
  margin: 0 auto;
}

.tl-office-validation-band__items {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
}

.tl-office-validation-item {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 20px 22px;
}

.tl-office-validation-item__icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--purple-light);
  border: 1px solid rgba(75,46,131,.15);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--purple);
  margin-top: 2px;
}

.tl-office-validation-item strong {
  display: block;
  font-size: 0.88rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 5px;
}

.tl-office-validation-item p {
  font-size: 0.82rem;
  color: var(--text-secondary);
  line-height: 1.55;
  margin: 0;
}

@media (max-width: 720px) {
  .tl-office-validation-band__items {
    grid-template-columns: 1fr;
    gap: 14px;
  }
}


/* ── S4-3: Offer CTA group (index.html kit card) ─────────── */

.tl-offer__cta-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
  width: 100%;
}

.tl-offer__button--sample {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  color: var(--purple);
  background: transparent;
  border: 1px solid rgba(75,46,131,.25);
  border-radius: 6px;
  padding: 7px 14px;
  text-decoration: none;
  transition: background var(--t), border-color var(--t), color var(--t);
}

.tl-offer__button--sample:hover {
  background: var(--purple-light);
  border-color: rgba(75,46,131,.4);
  color: var(--purple-dark);
}

.tl-offer__sample-badge {
  display: inline-block;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--gold);
  background: rgba(185,149,46,.1);
  border: 1px solid rgba(185,149,46,.22);
  border-radius: 4px;
  padding: 2px 8px;
  margin-top: 6px;
}


/* ── S4-4: Diagnosis final CTA sample link ──────────────── */

.tl-diagnosis-final-cta__sample {
  margin-top: 28px;
  padding-top: 24px;
  border-top: 1px solid rgba(255,255,255,.08);
  text-align: center;
}

.tl-diagnosis-final-cta__sample-text {
  font-size: 0.85rem;
  color: rgba(255,255,255,.5);
  margin: 0 0 10px;
}

.tl-diagnosis-sample-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--gold);
  text-decoration: none;
  transition: opacity var(--t);
}

.tl-diagnosis-sample-link:hover {
  opacity: .8;
}

.tl-diagnosis-sample-note {
  display: block;
  font-size: 0.75rem;
  color: rgba(255,255,255,.3);
  margin-top: 8px;
}


/* ── S4-5: btn-outline-purple ───────────────────────────── */

.btn-outline-purple {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 0.88rem;
  font-weight: 600;
  color: var(--purple);
  background: transparent;
  border: 1.5px solid rgba(75,46,131,.30);
  border-radius: 7px;
  padding: 9px 18px;
  text-decoration: none;
  transition: background var(--t), border-color var(--t), color var(--t);
  cursor: pointer;
}

.btn-outline-purple:hover,
.btn-outline-purple:focus-visible {
  background: var(--purple-light);
  border-color: rgba(75,46,131,.5);
  color: var(--purple-dark);
}

.btn-outline-purple.btn-sm {
  font-size: 0.8rem;
  padding: 7px 14px;
}

.btn-outline-purple.btn-lg {
  font-size: 0.95rem;
  padding: 11px 22px;
}


/* ── S4-6: Howto dual CTA layout ────────────────────────── */

.tl-office-howto__cta {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 12px;
  margin-top: clamp(32px, 4vw, 48px);
}

@media (max-width: 480px) {
  .tl-office-howto__cta {
    flex-direction: column;
    align-items: center;
  }
  .tl-office-howto__cta .btn {
    width: 100%;
    justify-content: center;
    text-align: center;
  }
}


/* ============================================================
   SPRINT POLISH PREMIUM — Dirección artística global TEIMA Lab
   Objetivo: boutique premium editorial · sin sensación plantilla
   ============================================================ */


/* ── P1: EYEBROW — MARCA VISUAL GLOBAL ──────────────────── */

/* Override canónico: gana la última definición. Añade línea dorada. */
.tl-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
  margin: 0 0 12px;
  font-size: .67rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--gold, #B9952E);
  opacity: 1;
}

.tl-eyebrow::before {
  content: '';
  display: inline-block;
  flex-shrink: 0;
  width: 20px;
  height: 1.5px;
  background: currentColor;
  border-radius: 2px;
}

/* Eyebrow sobre fondos oscuros — más luminoso */
.tl-product-hero .tl-eyebrow,
.tl-office-manifest .tl-eyebrow,
.tl-product-cta .tl-eyebrow,
.tl-sample-cta .tl-eyebrow,
.tl-diagnosis-hero .tl-eyebrow {
  color: var(--gold-soft, #E8D8A8);
  opacity: .85;
}


/* ── P2: HERO DEPTH — GRADIENTES ATMOSFÉRICOS ───────────── */

/* Home hero: reforzar radial gradients ya existentes */
.hero::before {
  background:
    radial-gradient(ellipse 70% 65% at -5% -10%,
      rgba(91,58,142,.11) 0%, transparent 65%),
    radial-gradient(ellipse 50% 50% at 98% 108%,
      rgba(201,162,39,.09) 0%, transparent 68%);
}

/* Kits section: luz ambiental sutil */
.tl-offers {
  position: relative;
}
.tl-offers::before {
  content: '';
  position: absolute;
  top: -80px; right: -60px;
  width: 500px; height: 400px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(91,58,142,.04) 0%, transparent 70%);
  pointer-events: none;
}

/* TEIMA Oficina main offer card: fondo con gradiente muy suave */
.tl-offer--main {
  background: linear-gradient(
    155deg,
    var(--bg-card) 0%,
    rgba(91,58,142,.025) 50%,
    var(--bg-card) 100%
  );
  border-color: rgba(91,58,142,.18);
  box-shadow:
    0 2px 8px rgba(23,32,51,.04),
    0 12px 40px rgba(91,58,142,.07),
    0 0 0 1px rgba(91,58,142,.06);
}

/* Deliverables section atmospheric */
.tl-office-deliverables {
  position: relative;
}
.tl-office-deliverables::before {
  content: '';
  position: absolute;
  bottom: -60px; left: 0;
  width: 400px; height: 400px;
  background: radial-gradient(circle, rgba(185,149,46,.04) 0%, transparent 65%);
  pointer-events: none;
}


/* ── P3: CARD DIFFERENTIATION — IDENTIDAD POR POSICIÓN ──── */

/* Pain cards: acento lateral por posición */
.tl-office-pain-card:nth-child(1) {
  border-left: 3px solid var(--purple, #4B2E83);
  padding-left: calc(clamp(24px, 3vw, 32px) - 2px);
}
.tl-office-pain-card:nth-child(2) {
  border-left: 3px solid var(--gold, #B9952E);
  padding-left: calc(clamp(24px, 3vw, 32px) - 2px);
}
.tl-office-pain-card:nth-child(3) {
  border-left: 3px solid var(--olive, #6B7A3E);
  padding-left: calc(clamp(24px, 3vw, 32px) - 2px);
}

/* Pain card numbers: hacerlos más protagonistas */
.tl-office-pain-card__num {
  font-size: clamp(2rem, 3vw, 2.8rem);
  font-weight: 900;
  letter-spacing: -.06em;
  line-height: 1;
  min-width: 52px;
  opacity: .12;
  color: var(--purple, #4B2E83);
  user-select: none;
}
.tl-office-pain-card:nth-child(2) .tl-office-pain-card__num {
  color: var(--gold, #B9952E);
}
.tl-office-pain-card:nth-child(3) .tl-office-pain-card__num {
  color: var(--olive, #6B7A3E);
}

/* Audience cards: top border accent + fondo diferenciado */
.tl-office-audience-card:nth-child(1) {
  border-top: 3px solid var(--purple, #4B2E83);
}
.tl-office-audience-card:nth-child(2) {
  border-top: 3px solid rgba(75,46,131,.5);
  background: linear-gradient(180deg, rgba(91,58,142,.025) 0%, #fff 30%);
}
.tl-office-audience-card:nth-child(3) {
  border-top: 3px solid var(--gold, #B9952E);
}

/* Audience card nums: más visibles pero no dominantes */
.tl-office-audience-card__num {
  font-size: 1.8rem;
  font-weight: 900;
  letter-spacing: -.06em;
  opacity: .15;
  line-height: 1;
}
.tl-office-audience-card:nth-child(1) .tl-office-audience-card__num { color: var(--purple, #4B2E83); }
.tl-office-audience-card:nth-child(2) .tl-office-audience-card__num { color: var(--purple, #4B2E83); }
.tl-office-audience-card:nth-child(3) .tl-office-audience-card__num { color: var(--gold, #B9952E); }

/* Deliverable cards: fondos alternados muy sutiles */
.tl-office-deliverable-card:nth-child(1) {
  border-top: 2px solid var(--purple, #4B2E83);
}
.tl-office-deliverable-card:nth-child(2) {
  border-top: 2px solid var(--gold, #B9952E);
}
.tl-office-deliverable-card:nth-child(3) {
  border-top: 2px solid var(--purple, #4B2E83);
  background: linear-gradient(160deg, rgba(91,58,142,.025) 0%, var(--bg-card) 40%);
}
.tl-office-deliverable-card:nth-child(4) {
  border-top: 2px solid var(--gold, #B9952E);
  background: linear-gradient(160deg, rgba(185,149,46,.025) 0%, var(--bg-card) 40%);
}

/* Deliverable card icon: más presencia */
.tl-office-deliverable-card__icon {
  width: 38px;
  height: 38px;
  border-radius: 10px;
  background: var(--purple-light, rgba(75,46,131,.08));
  border: 1px solid rgba(75,46,131,.12);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--purple, #4B2E83);
  margin-bottom: 14px;
}
.tl-office-deliverable-card:nth-child(2) .tl-office-deliverable-card__icon,
.tl-office-deliverable-card:nth-child(4) .tl-office-deliverable-card__icon {
  background: var(--gold-pale, rgba(185,149,46,.10));
  border-color: rgba(185,149,46,.18);
  color: var(--gold, #B9952E);
}


/* ── P4: HOWTO STEPS — NÚMEROS IMPACTANTES ──────────────── */

.tl-office-howto-step__num {
  font-size: 2.4rem;
  font-weight: 900;
  letter-spacing: -.07em;
  line-height: 1;
  color: var(--purple, #4B2E83);
  opacity: .15;
  margin-bottom: 12px;
  display: block;
}

.tl-office-howto-step {
  position: relative;
  background: var(--bg-card, #FBFAF7);
}

/* Step accent: primer step morado, segundo neutral, tercero dorado */
.tl-office-howto__steps > .tl-office-howto-step:first-child {
  border-top: 2px solid var(--purple, #4B2E83);
}
.tl-office-howto__steps > .tl-office-howto-step:last-child {
  border-top: 2px solid var(--gold, #B9952E);
}


/* ── P5: PRICING — CARÁCTER VISUAL POR PLAN ─────────────── */

/* Basic: warm ivory gradient + gold top line */
.pricing-plan--basic {
  background: linear-gradient(165deg, var(--bg-card) 0%, #FAF8F4 100%);
  border-top: 3px solid var(--gold, #B9952E);
}

/* Featured: already strong — subtle refinement */
.pricing-plan--featured {
  border-top: 3px solid var(--purple, #4B2E83);
  background: linear-gradient(160deg, #FFFCFF 0%, rgba(91,58,142,.04) 60%, #FFFCFF 100%);
}

/* Custom: olive/amber warm tint — consultora, más sobria */
.pricing-plan--custom {
  background: linear-gradient(165deg, var(--bg-card) 0%, rgba(107,122,62,.03) 100%);
  border-top: 3px solid var(--olive, #6B7A3E);
  border-color: rgba(107,122,62,.22);
}

.pricing-plan--custom .pricing-plan__cta {
  border-color: rgba(107,122,62,.30);
  color: var(--olive, #6B7A3E);
}

.pricing-plan--custom .pricing-plan__cta:hover {
  background: rgba(107,122,62,.06);
  border-color: rgba(107,122,62,.50);
}


/* ── P6: BUTTONS — LIFT PREMIUM + ARROW ANIMATION ──────── */

@media (hover: hover) {
  .btn-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 22px rgba(61,37,102,.30);
  }

  .btn-secondary:hover {
    transform: translateY(-1px);
  }

  .btn-cta-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(23,32,51,.18);
  }

  .btn-outline-purple:hover {
    transform: translateY(-1px);
  }
}

/* Arrow in CTA primary: subtle slide animation */
.btn-cta-arrow {
  display: inline-block;
  transition: transform var(--t);
}
@media (hover: hover) {
  .btn-cta-primary:hover .btn-cta-arrow {
    transform: translateX(4px);
  }
}

/* btn-cta-primary: más presencia base */
.btn-cta-primary {
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .005em;
  padding: 14px 28px;
}

/* Hero primary button: más impacto */
.btn-hero-primary {
  font-size: .95rem;
  padding: 14px 28px;
  font-weight: 700;
}
@media (hover: hover) {
  .btn-hero-primary:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 28px rgba(61,37,102,.30);
  }
}


/* ── P7: SECTION RHYTHM — FONDOS CON INTENCIÓN ──────────── */

/* Audience section: fondo ligeramente más oscuro que el entorno */
.tl-office-audience-premium {
  background: linear-gradient(180deg, var(--bg-secondary) 0%, #EBE5DB 100%);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

/* Validation band: fondo blanco cálido, no ivory genérico */
.tl-office-validation-band {
  background: linear-gradient(160deg, #FAF7F2 0%, #F5EFE6 100%);
}

/* Validation items: border-left accent per position */
.tl-office-validation-band__items > .tl-office-validation-item:nth-child(1) {
  border-left: 3px solid var(--purple, #4B2E83);
}
.tl-office-validation-band__items > .tl-office-validation-item:nth-child(2) {
  border-left: 3px solid var(--gold, #B9952E);
}
.tl-office-validation-band__items > .tl-office-validation-item:nth-child(3) {
  border-left: 3px solid var(--olive, #6B7A3E);
}

/* Trust band items (index.html): consistent treatment */
.tl-trust-item {
  padding: 20px 24px;
  border-radius: 12px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  box-shadow: 0 1px 4px rgba(23,32,51,.04);
  transition: box-shadow var(--t), transform var(--t);
}
@media (hover: hover) {
  .tl-trust-item:hover {
    box-shadow: 0 4px 16px rgba(23,32,51,.07);
    transform: translateY(-2px);
  }
}

/* Howto section: fondo más limpio — papel blanco cálido */
.tl-office-howto {
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}


/* ── P8: DARK SECTIONS — ATMÓSFERA MEJORADA ─────────────── */

/* CTA final: reforzar glow ambiental */
.tl-product-cta {
  position: relative;
  overflow: hidden;
}
.tl-product-cta::before {
  content: '';
  position: absolute;
  top: -80px; left: 50%;
  transform: translateX(-50%);
  width: 600px; height: 400px;
  background: radial-gradient(ellipse at center,
    rgba(91,58,142,.18) 0%,
    rgba(185,149,46,.06) 35%,
    transparent 65%);
  pointer-events: none;
}

/* Muestra CTA: mismo tratamiento */
.tl-sample-cta {
  position: relative;
  overflow: hidden;
}
.tl-sample-cta::before {
  content: '';
  position: absolute;
  top: -80px; right: 10%;
  width: 400px; height: 360px;
  background: radial-gradient(circle,
    rgba(91,58,142,.14) 0%,
    transparent 65%);
  pointer-events: none;
}

/* Diagnosis hero: ambient purple */
.tl-diagnosis-hero::before {
  background:
    radial-gradient(ellipse 70% 60% at 15% 50%, rgba(91,58,142,.20) 0%, transparent 65%),
    radial-gradient(ellipse 40% 40% at 90% 20%, rgba(185,149,46,.09) 0%, transparent 60%);
}


/* ── P9: FORM INPUTS — FOCUS PREMIUM ───────────────────── */

.tl-form-input,
.tl-form-select,
.tl-form-textarea {
  transition: border-color .2s ease, box-shadow .2s ease;
}

.tl-form-input:focus,
.tl-form-select:focus,
.tl-form-textarea:focus {
  outline: none;
  border-color: var(--gold, #B9952E);
  box-shadow:
    0 0 0 3px rgba(185,149,46,.12),
    0 1px 4px rgba(23,32,51,.06);
}

.tl-form-fieldset legend,
.tl-form-section__legend {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--purple, #4B2E83);
}


/* ── P10: OFFER SECONDARY CARDS — VISUAL DISTINCTION ───── */

/* Local card: azul-petróleo muy suave */
.tl-offer--secondary:first-of-type,
.tl-offers__layout > .tl-offer--secondary:nth-child(2) {
  border-top: 3px solid var(--petrol, #0F4C5C);
}

/* Edu card: olive suave */
.tl-offers__layout > .tl-offer--secondary:nth-child(3) {
  border-top: 3px solid var(--olive, #6B7A3E);
}


/* ── P11: MOCKUP PACK — MÁS TANGIBLE ───────────────────── */

/* Pack de producto (deliverables visual): sombra más profunda */
.tl-office-deliverables__mockup {
  padding: clamp(28px, 4vw, 48px);
  background: linear-gradient(148deg, #1c1530 0%, #0f0d1a 60%, #161a28 100%);
  border-radius: 24px;
  box-shadow:
    0 2px 8px rgba(10,8,20,.18),
    0 24px 64px rgba(10,8,20,.28),
    0 0 0 1px rgba(255,255,255,.04);
}

/* Front doc: header más editorial */
.tl-office-pack__doc-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  background: rgba(91,58,142,.25);
  border-bottom: 1px solid rgba(255,255,255,.08);
}

/* Pack label: más visible */
.tl-office-pack__label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.45);
  margin: 16px 0 14px;
}


/* ── P12: MUESTRA — PROMPT COMO DOCUMENTO REAL ──────────── */

/* Prompt bar: línea de "dots" tipo editor */
.tl-sample-prompt__bar::before {
  content: '● ● ●';
  font-size: .4rem;
  letter-spacing: 4px;
  color: rgba(255,255,255,.2);
  margin-right: 8px;
}

/* Variable cards: acento por posición */
.tl-sample-var-card:nth-child(odd) {
  border-left: 2px solid rgba(75,46,131,.25);
}
.tl-sample-var-card:nth-child(even) {
  border-left: 2px solid rgba(185,149,46,.25);
}

/* Checklist icon: alternating accent */
.tl-sample-checklist li:nth-child(odd) .tl-sample-checklist__icon {
  background: rgba(75,46,131,.10);
  border-color: rgba(75,46,131,.20);
}
.tl-sample-checklist li:nth-child(even) .tl-sample-checklist__icon {
  background: rgba(185,149,46,.10);
  border-color: rgba(185,149,46,.20);
}
.tl-sample-checklist li:nth-child(even) .tl-sample-checklist__icon svg {
  color: var(--gold, #B9952E);
}

/* Example sections: more visual separation */
.tl-sample-example__label--output {
  background: linear-gradient(90deg, rgba(75,46,131,.07), transparent);
}


/* ── P13: MICROINTERACCIONES — REDUCIDA MOTION ──────────── */

@media (hover: hover) {
  .tl-office-audience-card:hover {
    box-shadow: 0 10px 36px rgba(23,32,51,.11);
    transform: translateY(-3px);
  }

  .tl-office-deliverable-card:hover {
    box-shadow: 0 6px 24px rgba(91,58,142,.10);
    transform: translateY(-3px);
  }

  .tl-office-pain-card:hover {
    box-shadow: 0 6px 24px rgba(23,32,51,.08);
    border-color: rgba(91,58,142,.20);
    transform: translateY(-2px);
  }

  .pricing-plan:hover {
    transform: translateY(-3px);
  }

  .tl-offer:hover {
    box-shadow: 0 12px 48px rgba(23,32,51,.11);
    transform: translateY(-3px);
  }
}

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


/* ── P14: DARK MODE FIXES ───────────────────────────────── */

body.dark-mode .tl-office-pain-card {
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.07);
}
body.dark-mode .tl-office-pain-card:nth-child(1) { border-left-color: rgba(91,58,142,.55); }
body.dark-mode .tl-office-pain-card:nth-child(2) { border-left-color: rgba(185,149,46,.55); }
body.dark-mode .tl-office-pain-card:nth-child(3) { border-left-color: rgba(107,122,62,.55); }

body.dark-mode .tl-office-audience-card {
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.07);
}
body.dark-mode .tl-office-audience-card:nth-child(2) {
  background: rgba(91,58,142,.06);
}

body.dark-mode .tl-office-howto-step {
  background: rgba(255,255,255,.03);
}

body.dark-mode .pricing-plan--basic,
body.dark-mode .pricing-plan--custom {
  background: rgba(255,255,255,.03);
}

body.dark-mode .tl-trust-item {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.07);
}

body.dark-mode .tl-office-validation-band {
  background: rgba(20,16,34,.6);
}
body.dark-mode .tl-office-validation-item {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.07);
}

body.dark-mode .tl-offer--main {
  background: rgba(91,58,142,.04);
  border-color: rgba(91,58,142,.25);
}


/* ── P15: HERO EYEBROW — CONSISTENCIA GLOBAL ────────────── */

/* home hero usa .hero-eyebrow — añadir línea dorada como .tl-eyebrow */
.hero-eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}
.hero-eyebrow::before {
  content: '';
  display: inline-block;
  flex-shrink: 0;
  width: 20px;
  height: 1.5px;
  background: var(--gold);
  border-radius: 2px;
}


/* ── P16: TEIMA OFICINA — SYSTEM SECTION DEPTH ──────────── */

/* "Qué incluye" dark panel: stronger glow */
.tl-office-system-panel {
  position: relative;
  overflow: hidden;
}
.tl-office-system-panel::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 70% 50% at 80% 20%, rgba(91,58,142,.22) 0%, transparent 60%),
    radial-gradient(ellipse 40% 35% at 20% 80%, rgba(185,149,46,.07) 0%, transparent 55%);
  pointer-events: none;
}

/* Transformation section: fondo diferenciado */
.tl-office-transformation {
  background: var(--bg-card);
  border-top: 1px solid var(--border);
}

/* Problem section: fondo cálido fuerte */
.tl-office-problem-premium {
  background: linear-gradient(170deg, #FDFCF9 0%, #FAF6F0 100%);
}


/* ── P17: DIAGNOSIS PAGE — CTA FINAL IMPROVEMENT ────────── */

.tl-diagnosis-final-cta {
  position: relative;
  overflow: hidden;
}
.tl-diagnosis-final-cta::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--border) 30%, var(--border) 70%, transparent);
}


/* ── P18: RESPONSIVE POLISH FIXES ───────────────────────── */

@media (max-width: 720px) {
  /* Trust items don't need card treatment on small screens */
  .tl-trust-item {
    padding: 16px 18px;
  }
  /* Validation items compact on mobile */
  .tl-office-validation-item {
    padding: 16px 18px;
  }
  /* Pain card numbers back to smaller on mobile */
  .tl-office-pain-card__num {
    font-size: 1.8rem;
    min-width: auto;
  }
}

@media (max-width: 480px) {
  .hero-eyebrow::before,
  .tl-eyebrow::before {
    display: none;
  }
  .hero-eyebrow,
  .tl-eyebrow {
    gap: 0;
  }
  /* Deliverable card icon: compact on small screens */
  .tl-office-deliverable-card__icon {
    width: 32px;
    height: 32px;
  }
}


/* ═══════════════════════════════════════════════════════════
   SPRINT CORRECCIÓN POST-POLISH — Cambios estructurales
   Secciones: narrativa transformación, casos de uso,
   mockup de producto, bloque de envío diagnóstico.
   No decoración: sólo estructura y copy.
═══════════════════════════════════════════════════════════ */


/* ── NARRATIVA TRANSFORMACIÓN — 3 momentos editoriales ─── */

.tl-office-narrative {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0 clamp(24px, 4vw, 48px);
  align-items: start;
  margin-top: clamp(48px, 7vw, 72px);
}

/* Momento izquierdo y derecho */
.tl-office-narrative__moment {
  padding: clamp(28px, 4vw, 40px);
  border-radius: 16px;
  background: var(--bg-card);
  border: 1px solid var(--border);
}

.tl-office-narrative__moment--before {
  border-top: 3px solid rgba(185, 64, 64, .35);
}

.tl-office-narrative__moment--after {
  border-top: 3px solid var(--purple, #4B2E83);
}

/* Etiqueta del momento */
.tl-office-narrative__tag {
  display: inline-block;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 16px;
}

.tl-office-narrative__tag--after {
  color: var(--purple, #4B2E83);
}

/* Quote editorial — el corazón de cada momento */
.tl-office-narrative__quote {
  font-size: clamp(1.05rem, 2vw, 1.25rem);
  font-weight: 700;
  line-height: 1.4;
  color: var(--text-main);
  margin: 0 0 16px;
  padding: 0;
  font-style: normal;
  quotes: none;
  /* Reset blockquote browser default */
  margin-left: 0;
  margin-right: 0;
}

.tl-office-narrative__quote--after {
  color: var(--purple-dark, #3A2266);
}

.tl-office-narrative__desc {
  font-size: .9rem;
  line-height: 1.7;
  color: var(--text-secondary);
  margin: 0;
}

/* Columna central — flujo editorial vertical */
.tl-office-narrative__flow {
  display: flex;
  align-items: center;
  justify-content: center;
  padding-top: clamp(28px, 4vw, 40px);
}

.tl-office-narrative__flow-track {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
}

.tl-office-narrative__flow-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 10px 16px;
  border-radius: 10px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  text-align: center;
  min-width: 120px;
}

.tl-office-narrative__flow-node--result {
  background: rgba(75,46,131,.06);
  border-color: rgba(75,46,131,.18);
}

.tl-office-narrative__flow-label {
  font-size: .75rem;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: .04em;
}

.tl-office-narrative__flow-sub {
  font-size: .68rem;
  color: var(--text-muted);
}

.tl-office-narrative__flow-arrow {
  color: var(--border);
  line-height: 1;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Sistema TEIMA en el flujo: más presencia */
.tl-office-narrative__flow-system {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 14px 18px;
  border-radius: 12px;
  background: var(--purple, #4B2E83);
  color: #fff;
  text-align: center;
  min-width: 140px;
  box-shadow: 0 4px 16px rgba(75,46,131,.25);
}

.tl-office-narrative__flow-system strong {
  font-size: .8rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: #fff;
}

.tl-office-narrative__flow-system span {
  font-size: .65rem;
  color: rgba(255,255,255,.65);
  letter-spacing: .06em;
}

/* Responsive: colapsar a vertical en ≤860px */
@media (max-width: 860px) {
  .tl-office-narrative {
    grid-template-columns: 1fr;
    gap: clamp(20px, 3vw, 32px) 0;
  }

  .tl-office-narrative__flow {
    padding-top: 0;
  }

  .tl-office-narrative__flow-track {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    gap: 8px;
  }

  .tl-office-narrative__flow-node {
    min-width: auto;
    padding: 8px 14px;
  }

  .tl-office-narrative__flow-system {
    min-width: auto;
    padding: 10px 16px;
  }

  /* Rotar arrows para dirección horizontal */
  .tl-office-narrative__flow-arrow svg {
    transform: rotate(-90deg);
    width: 20px;
    height: 20px;
  }
}

/* Dark mode */
body.dark-mode .tl-office-narrative__moment {
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.07);
}

body.dark-mode .tl-office-narrative__quote--after {
  color: rgba(185,149,46,.85);
}

body.dark-mode .tl-office-narrative__flow-node {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.09);
}


/* ── USECASE STORY — caso destacado narrativo ──────────── */

.tl-office-usecase-story {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-top: 20px;
}

.tl-office-usecase-story__item {
  padding: 14px 0;
  border-bottom: 1px solid var(--border);
}

.tl-office-usecase-story__item:last-child {
  border-bottom: none;
}

.tl-office-usecase-story__label {
  display: block;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 6px;
}

.tl-office-usecase-story__label--system {
  color: var(--purple, #4B2E83);
}

.tl-office-usecase-story__label--result {
  color: var(--gold, #B9952E);
}

.tl-office-usecase-story__text {
  font-size: .9rem;
  line-height: 1.65;
  color: var(--text-secondary);
  margin: 0;
}

.tl-office-usecase-story__item--risk .tl-office-usecase-story__text {
  color: #7a4a3a;
}

.tl-office-usecase-story__item--system .tl-office-usecase-story__text {
  color: var(--text-main);
}

.tl-office-usecase-story__item--result .tl-office-usecase-story__text {
  font-weight: 600;
  color: var(--text-main);
}

/* Dark mode usecase story */
body.dark-mode .tl-office-usecase-story__item {
  border-color: rgba(255,255,255,.07);
}

body.dark-mode .tl-office-usecase-story__item--risk .tl-office-usecase-story__text {
  color: rgba(220,130,100,.75);
}


/* ── USECASE COMPACT — Problema → Resultado directo ──── */

/* Anular estilos del flow interno que ya no existe */
.tl-office-usecase-compact .tl-office-usecase-flow,
.tl-office-usecase-compact .tl-office-usecase-result {
  display: none;
}

.tl-office-usecase-compact__title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--text-main);
  margin: 0 0 10px;
  line-height: 1.3;
}

.tl-office-usecase-compact__flow {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  margin: 0;
  font-size: .88rem;
  line-height: 1.5;
}

.tl-office-usecase-compact__from {
  font-weight: 600;
  color: var(--text-secondary);
}

.tl-office-usecase-compact__arrow {
  color: var(--purple, #4B2E83);
  font-weight: 700;
  font-size: 1rem;
}

.tl-office-usecase-compact__to {
  color: var(--text-secondary);
}


/* ── MOCKUP DOC — contenido real de prompt ─────────────── */

.tl-office-pack__doc-prompt {
  display: flex;
  flex-direction: column;
  gap: 5px;
  padding: 10px 14px;
  flex: 1;
  overflow: hidden;
}

.tl-office-pack__doc-prompt-line {
  display: block;
  font-size: .62rem;
  line-height: 1.5;
  color: rgba(255,255,255,.55);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tl-office-pack__doc-prompt-line em {
  font-style: normal;
  color: rgba(185,149,46,.75);
}

.tl-office-pack__doc-prompt-line--muted {
  color: rgba(255,255,255,.3);
}

.tl-office-pack__doc-prompt-var {
  display: block;
  font-size: .62rem;
  font-weight: 700;
  color: rgba(185,149,46,.85);
  letter-spacing: .02em;
}

/* Eliminar el bloque de líneas placeholder — ya no se usa */
.tl-office-pack__doc-lines {
  display: none;
}


/* ── BLOQUE ENVÍO DIAGNÓSTICO — proceso, no disculpa ───── */

.tl-form-submit-block {
  margin-top: 36px;
  border-top: 1px solid var(--border);
  padding-top: 32px;
}

/* Pasos del proceso — mini horizontal */
.tl-form-submit-block__what-happens {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 28px;
  padding: 18px 20px;
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: 12px;
}

.tl-form-submit-block__step {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tl-form-submit-block__step-num {
  font-size: .65rem;
  font-weight: 800;
  color: var(--purple, #4B2E83);
  letter-spacing: .08em;
  opacity: .6;
}

.tl-form-submit-block__step-text {
  font-size: .82rem;
  font-weight: 500;
  color: var(--text-secondary);
}

.tl-form-submit-block__sep {
  color: var(--border);
  font-size: .9rem;
  flex-shrink: 0;
}

/* Nota técnica: más discreta y como parte del proceso */
.tl-form-submit__process-note {
  font-size: .78rem;
  color: var(--text-muted);
  line-height: 1.6;
  margin: 12px 0 0;
}

.tl-form-submit__process-note a {
  color: var(--purple, #4B2E83);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* Responsive: pasos en columna en móvil */
@media (max-width: 600px) {
  .tl-form-submit-block__what-happens {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
  .tl-form-submit-block__sep {
    display: none;
  }
}

/* Dark mode */
body.dark-mode .tl-form-submit-block__what-happens {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.08);
}


/* ═══════════════════════════════════════════════════════════
   SPRINT INDEX — Elevar home 8,7 → 9,2+
   Clases nuevas: hero product badge/card · tl-sol-sequence
   tl-evidence-band · tl-home-cta · btn-ghost-light
═══════════════════════════════════════════════════════════ */


/* ── HERO PRODUCT BADGE ────────────────────────────────── */

.hero-product-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 5px 12px 5px 8px;
  margin-bottom: 20px;
  background: rgba(75,46,131,.08);
  border: 1px solid rgba(75,46,131,.18);
  border-radius: 100px;
  font-size: .75rem;
  font-weight: 600;
  color: var(--text-secondary);
  line-height: 1;
}

.hero-product-badge__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--purple, #4B2E83);
  flex-shrink: 0;
  box-shadow: 0 0 0 2px rgba(75,46,131,.18);
}

.hero-product-badge__link {
  font-weight: 700;
  color: var(--purple, #4B2E83);
  text-decoration: none;
  transition: color var(--t);
}
.hero-product-badge__link:hover {
  color: var(--purple-dark, #3A2266);
}


/* ── HERO PRODUCT CARD ────────────────────────────────── */

.hero-product-card {
  background: var(--bg-card, #FBFAF7);
  border: 1px solid rgba(75,46,131,.18);
  border-top: 2px solid var(--purple, #4B2E83);
  border-radius: 20px;
  overflow: hidden;
  box-shadow:
    0 2px 8px rgba(23,32,51,.05),
    0 16px 48px rgba(23,32,51,.10),
    0 0 0 1px rgba(75,46,131,.06) inset;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: 420px;
}

.hero-product-card__header {
  padding: 28px 28px 20px;
  border-bottom: 1px solid var(--border);
}

.hero-product-card__title-row {
  margin-bottom: 10px;
}

.hero-product-card__available {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--purple, #4B2E83);
  background: rgba(75,46,131,.07);
  border: 1px solid rgba(75,46,131,.15);
  border-radius: 100px;
  padding: 3px 10px;
}

.hero-product-card__name {
  margin: 0 0 8px;
  font-size: clamp(1.3rem, 2.2vw, 1.65rem);
  font-weight: 900;
  letter-spacing: -.04em;
  color: var(--text-main);
  line-height: 1.15;
  display: flex;
  align-items: baseline;
  gap: 4px;
  flex-wrap: wrap;
}

.hero-product-card__desc {
  margin: 0;
  font-size: .85rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

/* System steps inside the card */
.hero-product-card__system {
  padding: 20px 28px;
  display: flex;
  flex-direction: column;
  gap: 0;
  border-bottom: 1px solid var(--border);
  flex: 1;
}

.hero-product-card__step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 12px 0;
  border-bottom: 1px solid var(--border);
}

.hero-product-card__step:last-child {
  border-bottom: none;
}

.hero-product-card__step-num {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--purple-light, rgba(75,46,131,.08));
  border: 1px solid rgba(75,46,131,.14);
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .04em;
  color: var(--purple, #4B2E83);
  margin-top: 1px;
}

.hero-product-card__step div {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hero-product-card__step strong {
  display: block;
  font-size: .86rem;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: -.01em;
}

.hero-product-card__step span {
  display: block;
  font-size: .77rem;
  color: var(--text-muted);
  line-height: 1.4;
}

/* Card footer: link + price */
.hero-product-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 18px 28px;
  background: linear-gradient(155deg, rgba(75,46,131,.04) 0%, rgba(75,46,131,.01) 100%);
}

.hero-product-card__sample-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: .81rem;
  font-weight: 600;
  color: var(--purple, #4B2E83);
  text-decoration: none;
  transition: color var(--t), gap var(--t);
}

.hero-product-card__sample-link:hover {
  color: var(--purple-dark, #3A2266);
  gap: 8px;
}

.hero-product-card__price {
  font-size: .82rem;
  font-weight: 700;
  color: var(--text-secondary);
  white-space: nowrap;
  flex-shrink: 0;
}

/* teima-inline on dark card variant */
.teima-inline--light {
  color: var(--bg-card, #FBFAF7);
}
.teima-inline--light .teima-inline__i {
  color: var(--gold-soft, #E8D8A8);
}

/* Dark mode card */
body.dark-mode .hero-product-card {
  background: rgba(255,255,255,.04);
  border-color: rgba(75,46,131,.28);
  border-top-color: rgba(185,149,46,.6);
}

body.dark-mode .hero-product-card__header,
body.dark-mode .hero-product-card__step,
body.dark-mode .hero-product-card__system {
  border-color: rgba(255,255,255,.07);
}

body.dark-mode .hero-product-card__footer {
  background: rgba(75,46,131,.06);
}

/* Responsive: card below 900px */
@media (max-width: 900px) {
  .hero-product-card {
    max-width: 100%;
  }
}


/* ── SOL-SEQUENCE — método 4 pasos editorial ───────────── */

/* La sección ya tiene .tl-sol con padding. Layout: manifest izquierda, secuencia derecha. */

.tl-sol {
  padding-block: clamp(80px, 10vw, 128px);
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
}

.tl-sol__inner {
  width: min(100% - 48px, 1140px);
  margin-inline: auto;
}

.tl-sol__header {
  max-width: 660px;
  margin-bottom: clamp(48px, 6vw, 72px);
}

.tl-sol__title {
  margin: 8px 0 16px;
  font-size: clamp(1.8rem, 3.2vw, 2.6rem);
  font-weight: 900;
  letter-spacing: -.04em;
  color: var(--text-main);
  line-height: 1.15;
}

.tl-sol__lead {
  margin: 0;
  font-size: clamp(.9rem, 1.3vw, 1rem);
  color: var(--text-secondary);
  line-height: 1.7;
}

/* 2-column layout: manifest card + steps sequence */
.tl-sol__layout {
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: clamp(24px, 4vw, 48px);
  align-items: start;
}

/* Manifest card (left) */
.tl-sol-manifest {
  background: linear-gradient(148deg, #1A1128 0%, #0F0B1A 65%, #1A1530 100%);
  border-radius: 20px;
  padding: clamp(32px, 5vw, 44px);
  position: relative;
  overflow: hidden;
}

.tl-sol-manifest::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse 70% 55% at 80% 20%, rgba(91,58,142,.22) 0%, transparent 65%);
  pointer-events: none;
}

.tl-sol-manifest__badge {
  display: inline-block;
  font-size: .62rem;
  font-weight: 800;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: rgba(185,149,46,.75);
  margin-bottom: 20px;
  position: relative;
}

.tl-sol-manifest__title {
  font-size: clamp(1.1rem, 2vw, 1.4rem);
  font-weight: 800;
  color: #F6F2EA;
  letter-spacing: -.03em;
  line-height: 1.28;
  margin: 0 0 14px;
  position: relative;
}

.tl-sol-manifest__text {
  font-size: .86rem;
  color: rgba(246,242,234,.52);
  line-height: 1.7;
  margin: 0 0 24px;
  position: relative;
}

.tl-sol-manifest__pillars {
  display: flex;
  flex-direction: column;
  gap: 8px;
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}

.tl-sol-manifest__pillars li {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .8rem;
  font-weight: 600;
  color: rgba(246,242,234,.68);
}

.tl-sol-manifest__pillars li::before {
  content: '';
  display: inline-block;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: rgba(185,149,46,.6);
  flex-shrink: 0;
}

/* 4-step sequence (right) */
.tl-sol-sequence {
  display: flex;
  flex-direction: column;
  gap: 0;
}

/* Each step */
.tl-sol-seq-step {
  display: grid;
  grid-template-columns: 40px 1fr;
  gap: 0 18px;
  align-items: stretch;
  padding-bottom: clamp(20px, 3vw, 28px);
}

.tl-sol-seq-step--last {
  padding-bottom: 0;
}

/* Marker column: number + vertical line */
.tl-sol-seq-step__marker {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0;
}

.tl-sol-seq-step__num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--bg-card, #FBFAF7);
  border: 1.5px solid var(--border);
  font-size: .65rem;
  font-weight: 900;
  letter-spacing: .06em;
  color: var(--purple, #4B2E83);
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}

.tl-sol-seq-step__line {
  flex: 1;
  width: 1px;
  background: linear-gradient(to bottom, var(--border) 0%, var(--border) 85%, transparent 100%);
  margin-top: 4px;
  align-self: stretch;
}

/* Body column: title + text + tag */
.tl-sol-seq-step__body {
  padding-bottom: clamp(18px, 2.5vw, 24px);
  border-bottom: 1px solid var(--border);
  padding-top: 4px;
}

.tl-sol-seq-step--last .tl-sol-seq-step__body {
  border-bottom: none;
  padding-bottom: 0;
}

.tl-sol-seq-step__title {
  margin: 0 0 8px;
  font-size: clamp(.95rem, 1.4vw, 1.08rem);
  font-weight: 800;
  color: var(--text-main);
  letter-spacing: -.02em;
  line-height: 1.3;
}

.tl-sol-seq-step__text {
  margin: 0 0 12px;
  font-size: .87rem;
  color: var(--text-secondary);
  line-height: 1.68;
}

.tl-sol-seq-step__tag {
  display: inline-block;
  font-size: .65rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--purple, #4B2E83);
  background: rgba(75,46,131,.07);
  border: 1px solid rgba(75,46,131,.15);
  border-radius: 4px;
  padding: 3px 9px;
}

/* Sequence layout responsive */
@media (max-width: 860px) {
  .tl-sol__layout {
    grid-template-columns: 1fr;
    gap: 32px;
  }
  .tl-sol-manifest {
    max-width: 480px;
  }
}

@media (max-width: 480px) {
  .tl-sol-seq-step__num {
    width: 30px;
    height: 30px;
    font-size: .6rem;
  }
}

/* Dark mode */
body.dark-mode .tl-sol {
  background: var(--bg-secondary);
}

body.dark-mode .tl-sol-seq-step__num {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.12);
}

body.dark-mode .tl-sol-seq-step__body {
  border-color: rgba(255,255,255,.07);
}


/* ── EVIDENCE BAND — Muestra pública como prueba ────────── */

.tl-evidence-band {
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
  padding-block: clamp(28px, 4vw, 40px);
}

.tl-evidence-band__inner {
  width: min(100% - 48px, 1100px);
  margin-inline: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: clamp(24px, 4vw, 48px);
  flex-wrap: wrap;
}

.tl-evidence-band__content {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  flex: 1;
  min-width: 260px;
}

.tl-evidence-band__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: rgba(75,46,131,.08);
  border: 1px solid rgba(75,46,131,.14);
  border-radius: 10px;
  color: var(--purple, #4B2E83);
  margin-top: 2px;
}

.tl-evidence-band__text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tl-evidence-band__text strong {
  display: block;
  font-size: clamp(.9rem, 1.3vw, 1rem);
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: -.01em;
  line-height: 1.4;
}

.tl-evidence-band__text span {
  font-size: .83rem;
  color: var(--text-secondary);
  line-height: 1.6;
}

.tl-evidence-band__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 11px 22px;
  border-radius: 100px;
  background: var(--purple, #4B2E83);
  color: #fff;
  font-size: .86rem;
  font-weight: 700;
  letter-spacing: -.01em;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
  transition: background var(--t), box-shadow var(--t), transform var(--t), gap var(--t);
  box-shadow: 0 2px 12px rgba(75,46,131,.22);
}

.tl-evidence-band__cta:hover {
  background: var(--purple-dark, #3A2266);
  box-shadow: 0 4px 20px rgba(75,46,131,.34);
  transform: translateY(-1px);
  gap: 10px;
}

/* Responsive */
@media (max-width: 720px) {
  .tl-evidence-band__inner {
    flex-direction: column;
    align-items: flex-start;
  }
  .tl-evidence-band__cta {
    width: 100%;
    justify-content: center;
  }
}

/* Dark mode */
body.dark-mode .tl-evidence-band {
  background: rgba(75,46,131,.06);
  border-color: rgba(75,46,131,.18);
}

body.dark-mode .tl-evidence-band__icon {
  background: rgba(75,46,131,.15);
  border-color: rgba(75,46,131,.25);
}


/* ── HOME CTA — sección final oscura, TEIMA Oficina ─────── */

.tl-home-cta {
  padding-block: clamp(88px, 11vw, 140px);
  background: linear-gradient(160deg, #1A1128 0%, #0F0B1A 55%, #0D1520 100%);
  position: relative;
  overflow: hidden;
}

.tl-home-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 65% 60% at 50% 50%, rgba(91,58,142,.18) 0%, transparent 65%),
    radial-gradient(ellipse 35% 30% at 20% 100%, rgba(185,149,46,.07) 0%, transparent 60%);
  pointer-events: none;
}

.tl-home-cta__inner {
  position: relative;
  width: min(100% - 48px, 780px);
  margin-inline: auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0;
}

.tl-home-cta__title {
  margin: 12px 0 20px;
  font-size: clamp(1.8rem, 3.6vw, 3rem);
  font-weight: 900;
  letter-spacing: -.04em;
  color: #F6F2EA;
  line-height: 1.1;
}

.tl-home-cta__title-em {
  display: block;
  font-style: italic;
  font-weight: 800;
  color: rgba(196,168,240,.85);
}

.tl-home-cta__lead {
  margin: 0 0 36px;
  font-size: clamp(.92rem, 1.4vw, 1.05rem);
  color: rgba(246,242,234,.52);
  line-height: 1.72;
  max-width: 540px;
}

.tl-home-cta__actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 20px;
}

.tl-home-cta__note {
  font-size: .78rem;
  color: rgba(246,242,234,.28);
  line-height: 1.6;
  margin: 0;
  max-width: 420px;
}

/* Responsive */
@media (max-width: 540px) {
  .tl-home-cta__actions {
    flex-direction: column;
    align-items: stretch;
    width: 100%;
  }
  .tl-home-cta__actions .btn {
    text-align: center;
    justify-content: center;
  }
}


/* ── BTN-GHOST-LIGHT — ghost button for dark backgrounds ── */

.btn-ghost-light {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 22px;
  border-radius: 100px;
  font-size: .9rem;
  font-weight: 600;
  letter-spacing: -.01em;
  color: rgba(246,242,234,.72);
  background: transparent;
  border: 1px solid rgba(246,242,234,.18);
  text-decoration: none;
  transition: color var(--t), border-color var(--t), background var(--t);
  cursor: pointer;
}

.btn-ghost-light:hover {
  color: #F6F2EA;
  border-color: rgba(246,242,234,.38);
  background: rgba(246,242,234,.06);
}

/* btn-cta-primary on dark CTA — always white */
.tl-home-cta .btn-cta-primary,
.tl-product-cta .btn-cta-primary {
  background: #fff;
  color: var(--purple-dark, #3A2266);
  box-shadow: 0 2px 14px rgba(0,0,0,.25), 0 8px 30px rgba(0,0,0,.18);
}

.tl-home-cta .btn-cta-primary:hover,
.tl-product-cta .btn-cta-primary:hover {
  background: #F6F2EA;
  box-shadow: 0 4px 20px rgba(0,0,0,.30), 0 14px 40px rgba(0,0,0,.22);
  transform: translateY(-2px);
}

/* btn-lg dimensions */
.btn-lg {
  padding: 14px 28px;
  font-size: .97rem;
}


/* ── SOLUCIÓN — layout duo: manifiesto + bloques de valor ───── */

/* La clase --solo ya no se usa; el manifiesto vive dentro del duo grid */
.tl-sol-manifest--solo { max-width: none; margin-inline: 0; position: relative; }

/* Padding compacto: el duo ya tiene suficiente peso visual */
.tl-sol {
  padding-block: clamp(64px, 8vw, 96px);
}

/* Grid 2 columnas: manifiesto izquierda, valores derecha */
.tl-sol__duo {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: stretch;
  margin-top: clamp(40px, 6vw, 60px);
}

/* La tarjeta manifiesto en el duo no necesita sticky */
.tl-sol__duo .tl-sol-manifest {
  position: relative;
}

/* Columna derecha: 3 bloques editoriales en columna */
.tl-sol__values {
  display: flex;
  flex-direction: column;
  gap: clamp(28px, 4vw, 40px);
  padding-top: 4px;
}

.tl-sol__value {
  padding-left: 20px;
  border-left: 2px solid rgba(75,46,131,.2);
}

.tl-sol__value-title {
  font-size: 1rem;
  font-weight: 700;
  color: var(--purple, #4B2E83);
  margin: 0 0 9px;
  letter-spacing: -.02em;
  line-height: 1.25;
}

.tl-sol__value-text {
  font-size: .92rem;
  color: var(--text-secondary, #4B5563);
  line-height: 1.65;
  margin: 0;
}

@media (max-width: 720px) {
  .tl-sol__duo {
    grid-template-columns: 1fr;
  }
}

/* ── AUDIENCE — layout editorial: 1 principal + 2 secundarios ── */

.audience-editorial {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(18px, 2.5vw, 28px);
  margin-top: clamp(40px, 6vw, 60px);
  align-items: start;
  max-width: 1180px;
  margin-inline: auto;
}

/* Perfil principal: oscuro, protagonista */
.audience-profile--main {
  background: linear-gradient(148deg, #2e1558 0%, #4d2c85 58%, #6e4aaa 100%);
  border-radius: 22px;
  padding: clamp(28px, 4vw, 44px);
  color: white;
}

/* Perfiles secundarios: claros, de apoyo */
.audience-secondary {
  display: flex;
  flex-direction: column;
  gap: clamp(14px, 2vw, 20px);
  height: auto;
}

.audience-profile--secondary {
  background: var(--bg-card, #FBFAF7);
  border: 1px solid rgba(216,210,196,.9);
  border-radius: 18px;
  padding: clamp(24px, 3vw, 36px);
}

/* Etiqueta discreta (tipo + sector) */
.audience-profile__label {
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.55);
  margin: 0 0 14px;
  display: block;
}

.audience-profile--secondary .audience-profile__label {
  color: var(--text-muted, #9CA3AF);
}

/* Título = el dolor real */
.audience-profile__title {
  font-size: clamp(1.05rem, 2vw, 1.2rem);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -.02em;
  color: white;
  margin: 0 0 18px;
}

.audience-profile--secondary .audience-profile__title {
  color: var(--text-main, #111827);
  font-size: 1rem;
}

/* Cómo ayuda */
.audience-profile__help {
  font-size: .9rem;
  line-height: 1.65;
  color: rgba(255,255,255,.82);
  margin: 0 0 24px;
}

.audience-profile--secondary .audience-profile__help {
  color: var(--text-secondary, #4B5563);
  margin-bottom: 16px;
}

/* Resultado — destacado */
.audience-profile__result {
  font-size: .85rem;
  font-weight: 700;
  color: #e8d8a8;
  padding-top: 18px;
  border-top: 1px solid rgba(255,255,255,.12);
  margin: 0;
  line-height: 1.4;
}

.audience-profile--secondary .audience-profile__result {
  color: var(--purple, #4B2E83);
  border-top-color: rgba(216,210,196,.7);
  padding-top: 14px;
  font-size: .82rem;
}

/* Responsive */
@media (max-width: 720px) {
  .audience-editorial {
    grid-template-columns: 1fr;
  }
}

/* ── KITS SECUNDARIOS — bajo solicitud, visualmente atenuados ── */

/* Reducir peso visual de kits no disponibles */
.tl-offer--pending {
  opacity: .88;
}

.tl-offer--pending .tl-offer__title {
  font-size: clamp(1.2rem, 2.2vw, 1.55rem);
}

.tl-offer--pending .tl-offer__label {
  color: var(--text-muted, #9CA3AF);
  letter-spacing: .04em;
}

/* Texto de disponibilidad — sustituye al precio */
.tl-offer__availability {
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted, #9CA3AF);
  margin: 0 0 12px;
}

/* ── HERO VISUAL — imagen limpia, sin texto encima ──────── */

.hero-visual {
  position: relative;
  min-width: 0;
  width: 100%;
}

.hero-visual__frame {
  position: relative;
  overflow: hidden;
  border-radius: 34px;
  min-height: clamp(420px, 48vw, 620px);
  background: #f7f3eb;
  border: 1px solid rgba(216, 210, 196, 0.9);
  box-shadow: 0 34px 100px rgba(23, 32, 51, 0.14);
}

/* Velo muy sutil para integrar la imagen con la paleta cálida */
.hero-visual__frame::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(180deg, rgba(255,255,255,.02), rgba(23,32,51,.08));
  pointer-events: none;
}

.hero-visual__image {
  width: 100%;
  height: 100%;
  min-height: inherit;
  object-fit: cover;
  display: block;
  filter: saturate(.92) contrast(1.02);
}

/* ── HERO H1 — más aire, sin aplastamiento ───────────────── */

.hero-title {
  max-width: 780px;
  font-size: clamp(2.4rem, 5.6vw, 5.2rem);
  line-height: .97;
  letter-spacing: -.06em;
}

/* ── HERO COMPACTO — sobreescribe snap-section min-height ─── */
/* snap-section fuerza calc(100svh - header-height); aquí lo reducimos
   para que el hero ocupe ~80vh y no toda la pantalla.              */

section.hero {
  min-height: clamp(480px, 82vh, 700px);
  padding: clamp(2.8rem, 5vw, 4.5rem) 0 clamp(2.8rem, 5vw, 4.5rem);
}

/* Imagen: altura proporcional al nuevo hero más compacto */
.hero-visual__frame {
  min-height: clamp(380px, 42vw, 560px);
}

/* Responsive hero-visual */
@media (max-width: 980px) {
  .hero-visual__frame {
    min-height: 380px;
  }
}

/* En móvil: anular el display:none heredado — la imagen sí se muestra */
@media (max-width: 560px) {
  .hero__panel {
    display: flex !important;
    opacity: 1;
    margin-top: 28px;
    width: 100%;
  }
  .hero-visual {
    width: 100%;
  }
  .hero-visual__frame {
    min-height: 260px;
    border-radius: 22px;
  }
  .hero-title {
    font-size: clamp(2rem, 9vw, 3rem);
  }
  section.hero {
    min-height: auto;
    padding: clamp(2rem, 6vw, 3rem) 0;
  }
}


/* ═══════════════════════════════════════════════════════════
   SPRINT WEB — Selector de categorías TEIMA Lab
   Clases: .tl-cats · tabs · panels · metodo steps
   No modifica hero, branding, paleta ni secciones existentes.
═══════════════════════════════════════════════════════════ */


/* ── SECTION WRAPPER ─────────────────────────────────────── */

.tl-cats {
  background: var(--bg-card, #FBFAF7);
  border-top: 1px solid var(--border, #DDD0BF);
  padding-block: clamp(72px, 9vw, 112px);
  position: relative;
}

/* Gold accent strip — top-left corner */
.tl-cats::before {
  content: '';
  position: absolute;
  top: 0;
  left: clamp(24px, 4vw, 48px);
  width: 48px;
  height: 3px;
  background: var(--gold, #B9952E);
  border-radius: 0 0 2px 2px;
}


/* ── INNER CONTAINER ─────────────────────────────────────── */

.tl-cats__inner {
  width: min(100% - 48px, 1100px);
  margin-inline: auto;
}


/* ── HEADER ──────────────────────────────────────────────── */

.tl-cats__header {
  max-width: 680px;
  margin-bottom: clamp(36px, 5vw, 56px);
}

.tl-cats__title {
  margin: 8px 0 14px;
  font-size: clamp(1.55rem, 3vw, 2.1rem);
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--text-main, #111827);
  line-height: 1.22;
}

.tl-cats__lead {
  margin: 0;
  font-size: .95rem;
  color: var(--text-secondary, #4B5563);
  line-height: 1.68;
}


/* ── TABS ────────────────────────────────────────────────── */

.tl-cats__tabs {
  display: flex;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  border-bottom: 1.5px solid var(--border, #DDD0BF);
  margin-bottom: clamp(32px, 4vw, 48px);
  gap: 0;
}

.tl-cats__tabs::-webkit-scrollbar {
  display: none;
}

.tl-cats__tab {
  flex-shrink: 0;
  background: transparent;
  border: none;
  border-bottom: 2.5px solid transparent;
  margin-bottom: -1.5px;
  padding: 12px 22px 10px;
  font-family: inherit;
  font-size: .82rem;
  font-weight: 500;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted, #9CA3AF);
  cursor: pointer;
  white-space: nowrap;
  transition: color .18s ease, border-color .18s ease;
}

.tl-cats__tab:hover {
  color: var(--text-secondary, #4B5563);
}

.tl-cats__tab--active {
  color: var(--text-main, #111827);
  border-bottom-color: var(--gold, #B9952E);
  font-weight: 700;
}


/* ── PANELS ──────────────────────────────────────────────── */

@keyframes cats-panel-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.tl-cats__panels {
  min-height: 300px;
}

.tl-cats__panel {
  display: none;
}

.tl-cats__panel--active {
  display: block;
  animation: cats-panel-in .22s ease;
}


/* ── PANEL GRID (2 cols: main + side) ────────────────────── */

.tl-cats__panel-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(28px, 4vw, 56px);
  align-items: start;
}


/* ── PANEL MAIN COLUMN ───────────────────────────────────── */

.tl-cats__panel-badge {
  display: inline-block;
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  padding: 4px 10px;
  border-radius: 3px;
  margin-bottom: 14px;
}

.tl-cats__panel-badge--available {
  background: var(--olive-pale, rgba(107,122,62,.10));
  color: var(--olive, #6B7A3E);
}

.tl-cats__panel-badge--request {
  background: var(--gold-pale, rgba(185,149,46,.10));
  color: var(--gold, #B9952E);
}

.tl-cats__panel-badge--design {
  background: rgba(156,163,175,.12);
  color: var(--text-muted, #9CA3AF);
}

.tl-cats__panel-badge--soon {
  background: rgba(156,163,175,.12);
  color: var(--text-muted, #9CA3AF);
}

.tl-cats__panel-title {
  margin: 0 0 14px;
  font-size: clamp(1.35rem, 2.5vw, 1.8rem);
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--text-main, #111827);
  line-height: 1.2;
}

.tl-cats__panel-text {
  font-size: .93rem;
  color: var(--text-secondary, #4B5563);
  line-height: 1.7;
  margin: 0 0 18px;
}

.tl-cats__panel-for {
  font-size: .87rem;
  color: var(--text-secondary, #4B5563);
  line-height: 1.6;
  background: var(--bg-main, #F7F2EA);
  border-left: 2px solid var(--border, #DDD0BF);
  padding: 10px 14px;
  border-radius: 0 4px 4px 0;
  margin: 0 0 14px;
}

.tl-cats__panel-note {
  font-size: .83rem;
  color: var(--text-muted, #9CA3AF);
  font-style: italic;
  line-height: 1.6;
  margin: 0;
}


/* ── PANEL SIDE COLUMN ───────────────────────────────────── */

.tl-cats__panel-side {
  background: var(--bg-main, #F7F2EA);
  border: 1px solid var(--border, #DDD0BF);
  border-radius: 8px;
  padding: clamp(20px, 2.5vw, 32px);
}

.tl-cats__panel-includes-label {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-muted, #9CA3AF);
  margin: 0 0 12px;
  display: block;
}

.tl-cats__panel-list {
  list-style: none;
  padding: 0;
  margin: 0 0 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tl-cats__panel-list li {
  display: flex;
  align-items: baseline;
  gap: 8px;
  font-size: .88rem;
  color: var(--text-secondary, #4B5563);
  line-height: 1.5;
}

.tl-cats__panel-list li::before {
  content: '→';
  color: var(--gold, #B9952E);
  font-weight: 700;
  flex-shrink: 0;
  font-size: .8rem;
}

.tl-cats__panel-price {
  font-size: 1.35rem;
  font-weight: 800;
  color: var(--text-main, #111827);
  letter-spacing: -.03em;
  margin: 0 0 4px;
  line-height: 1;
}

.tl-cats__panel-price span {
  font-size: .78rem;
  font-weight: 500;
  color: var(--text-muted, #9CA3AF);
  letter-spacing: 0;
  margin-right: 3px;
}

.tl-cats__panel-availability {
  font-size: .8rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-muted, #9CA3AF);
  margin: 0 0 20px;
}

.tl-cats__panel-ctas {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin-top: 4px;
}

.tl-cats__panel-ctas--spaced {
  margin-top: 28px;
}

.tl-cats__panel-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 11px 20px;
  border-radius: 6px;
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: -.01em;
  text-decoration: none;
  text-align: center;
  transition: background .18s ease, box-shadow .18s ease, transform .18s ease;
  cursor: pointer;
}

.tl-cats__panel-cta--primary {
  background: var(--purple, #4B2E83);
  color: #fff;
  border: 1px solid var(--purple, #4B2E83);
  box-shadow: 0 2px 10px rgba(75,46,131,.20);
}

.tl-cats__panel-cta--primary:hover {
  background: var(--purple-dark, #3A2266);
  box-shadow: 0 4px 18px rgba(75,46,131,.32);
  transform: translateY(-1px);
}

.tl-cats__panel-cta--secondary {
  background: transparent;
  color: var(--text-secondary, #4B5563);
  border: 1px solid var(--border, #DDD0BF);
}

.tl-cats__panel-cta--secondary:hover {
  background: var(--bg-card, #FBFAF7);
  border-color: var(--text-muted, #9CA3AF);
}


/* ── MÉTODO TEIMA PANEL — 4-step grid ────────────────────── */

.tl-cats__panel-metodo {
  display: flex;
  flex-direction: column;
  gap: clamp(24px, 3vw, 36px);
}

.tl-cats__metodo-header {
  max-width: 640px;
}

.tl-cats__metodo-header .tl-cats__panel-title {
  font-size: clamp(1.2rem, 2.2vw, 1.55rem);
}

.tl-cats__metodo-steps {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: clamp(16px, 2vw, 28px);
}

.tl-cats__metodo-step {
  background: var(--bg-main, #F7F2EA);
  border: 1px solid var(--border, #DDD0BF);
  border-radius: 8px;
  padding: clamp(18px, 2.5vw, 28px);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.tl-cats__metodo-num {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .1em;
  color: var(--gold, #B9952E);
  display: block;
}

.tl-cats__metodo-step h4 {
  margin: 0;
  font-size: .95rem;
  font-weight: 700;
  color: var(--text-main, #111827);
  line-height: 1.3;
  letter-spacing: -.02em;
}

.tl-cats__metodo-step p {
  margin: 0;
  font-size: .83rem;
  color: var(--text-secondary, #4B5563);
  line-height: 1.6;
}


/* ── RESPONSIVE ──────────────────────────────────────────── */

/* 900px: metodo steps → 2 cols */
@media (max-width: 900px) {
  .tl-cats__metodo-steps {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* 680px: panel grid → 1 col */
@media (max-width: 680px) {
  .tl-cats__panel-grid {
    grid-template-columns: 1fr;
  }

  .tl-cats__panel-side {
    .pricing-plan--basic {   order: 1; }  .pricing-plan--featured {   order: 2; }  .pricing-plan--custom {   order: 3; }: -1; /* side card on top in mobile */
  }
}

/* 420px: metodo steps → 1 col */
@media (max-width: 420px) {
  .tl-cats__metodo-steps {
    grid-template-columns: 1fr;
  }

  .tl-cats__tab {
    padding: 10px 16px 8px;
    font-size: .76rem;
  }
}


/* ── DARK MODE ───────────────────────────────────────────── */

body.dark-mode .tl-cats {
  background: rgba(255,255,255,.02);
  border-top-color: rgba(255,255,255,.07);
}

body.dark-mode .tl-cats__tab {
  color: rgba(255,255,255,.35);
}

body.dark-mode .tl-cats__tab:hover {
  color: rgba(255,255,255,.6);
}

body.dark-mode .tl-cats__tab--active {
  color: rgba(255,255,255,.88);
}

body.dark-mode .tl-cats__tabs {
  border-bottom-color: rgba(255,255,255,.08);
}

body.dark-mode .tl-cats__panel-for {
  background: rgba(255,255,255,.04);
  border-left-color: rgba(255,255,255,.12);
}

body.dark-mode .tl-cats__panel-side {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.08);
}

body.dark-mode .tl-cats__metodo-step {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.08);
}

body.dark-mode .tl-cats__panel-cta--secondary {
  border-color: rgba(255,255,255,.15);
  color: rgba(255,255,255,.65);
}

body.dark-mode .tl-cats__panel-cta--secondary:hover {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.28);
}


/* ═══════════════════════════════════════════════════════════
   SPRINT WEB PREMIUM — Selector editorial + pricing home
   Sobreescribe el selector de tabs plano anterior.
   Clases nuevas: .tl-cats__card · .tl-cats__pill-bar · .tl-cats__pill
   .tl-cats__see-pricing · section-pricing en home
═══════════════════════════════════════════════════════════ */


/* ── CATS SECTION — fondo ligeramente diferenciado del hero ─ */

.tl-cats {
  background: var(--bg-main, #F7F2EA);
  border-top: 1px solid var(--border, #DDD0BF);
  padding-block: clamp(64px, 8vw, 100px);
  position: relative;
}

.tl-cats::before {
  content: '';
  position: absolute;
  top: 0;
  left: clamp(24px, 4vw, 48px);
  width: 48px;
  height: 3px;
  background: var(--gold, #B9952E);
  border-radius: 0 0 2px 2px;
}

.tl-cats__inner {
  width: min(100% - 48px, 1100px);
  margin-inline: auto;
}

/* Header de sección más compacto */
.tl-cats__header {
  max-width: 620px;
  margin-bottom: clamp(28px, 4vw, 40px);
}

.tl-cats__title {
  margin: 8px 0 12px;
  font-size: clamp(1.45rem, 2.6vw, 1.9rem);
  font-weight: 700;
  letter-spacing: -.03em;
  color: var(--text-main, #111827);
  line-height: 1.22;
}

.tl-cats__lead {
  margin: 0;
  font-size: .92rem;
  color: var(--text-secondary, #4B5563);
  line-height: 1.66;
}


/* ── CARD PREMIUM — envuelve tabs + panel ────────────────── */

.tl-cats__card {
  background: var(--bg-card, #FBFAF7);
  border: 1px solid var(--border, #DDD0BF);
  border-radius: 20px;
  box-shadow:
    0 2px 8px rgba(23,32,51,.04),
    0 12px 40px rgba(23,32,51,.07),
    0 0 0 0.5px rgba(185,149,46,.06);
  overflow: hidden;
}


/* ── PILL BAR — la barra de navegación de categorías ─────── */

.tl-cats__pill-bar {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  scrollbar-width: none;
  -ms-overflow-style: none;
  gap: 6px;
  padding: 16px 20px;
  background: var(--bg-main, #F7F2EA);
  border-bottom: 1px solid var(--border, #DDD0BF);
}

.tl-cats__pill-bar::-webkit-scrollbar {
  display: none;
}


/* ── PILLS — cada botón de categoría ─────────────────────── */

.tl-cats__pill {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 8px 18px;
  border-radius: 100px;
  background: transparent;
  border: 1px solid transparent;
  font-family: inherit;
  font-size: .82rem;
  font-weight: 500;
  color: var(--text-secondary, #4B5563);
  cursor: pointer;
  white-space: nowrap;
  transition: background .18s ease, color .18s ease, border-color .18s ease, box-shadow .18s ease;
}

.tl-cats__pill:hover {
  background: var(--bg-card, #FBFAF7);
  border-color: var(--border, #DDD0BF);
  color: var(--text-main, #111827);
}

/* Pill activa: fondo oscuro premium */
.tl-cats__pill--active {
  background: var(--bg-dark, #111827);
  border-color: var(--bg-dark, #111827);
  color: #F6F2EA;
  font-weight: 700;
  box-shadow: 0 2px 10px rgba(17,24,39,.22);
}

.tl-cats__pill--active .teima-inline__i {
  color: var(--gold-soft, #E8D8A8);
}

.tl-cats__pill--active:hover {
  background: #1c2533;
  border-color: #1c2533;
  color: #F6F2EA;
}


/* ── PANELS dentro de la card ────────────────────────────── */

.tl-cats__panels {
  padding: clamp(24px, 3.5vw, 40px);
  min-height: 280px;
}


/* ── PANEL GRID — ajustar dentro de la card ──────────────── */

.tl-cats__panel-grid {
  display: grid;
  grid-template-columns: 1.05fr 0.95fr;
  gap: clamp(24px, 3.5vw, 48px);
  align-items: start;
}

/* CTAs en la columna principal (no en el lado) */
.tl-cats__panel-main .tl-cats__panel-ctas {
  margin-top: 20px;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 10px;
}

.tl-cats__panel-main .tl-cats__panel-cta {
  flex: none;
}


/* ── PANEL SIDE — caja interior más limpia ───────────────── */

.tl-cats__panel-side {
  background: var(--bg-main, #F7F2EA);
  border: 1px solid var(--border, #DDD0BF);
  border-radius: 12px;
  padding: clamp(18px, 2.5vw, 28px);
}


/* ── VER PRECIOS — link sutil bajo el precio ─────────────── */

.tl-cats__see-pricing {
  display: inline-block;
  margin-top: 12px;
  font-size: .78rem;
  color: var(--purple, #4B2E83);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
  transition: opacity .15s ease;
}

.tl-cats__see-pricing:hover {
  opacity: .72;
}


/* ── SECCIÓN PRICING EN HOME ─────────────────────────────── */

/* La sección ya tiene .section-pricing con CSS propio.
   Solo sobrescribimos el fondo para que contraste con cats */
.section-pricing {
  background: var(--bg-card, #FBFAF7);
  border-top: 1px solid var(--border, #DDD0BF);
  padding-block: clamp(72px, 9vw, 112px);
}

/* Eyebrow dentro de pricing-heading (ya tiene estilo vía .section-pricing .section-eyebrow) */
.section-pricing .tl-eyebrow {
  color: var(--purple, #4B2E83);
  opacity: 1;
}

/* Dark mode: plan básico y custom */
body.dark-mode .pricing-plan--basic,
body.dark-mode .pricing-plan--custom {
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.08);
}


/* ── DARK MODE — card y pills ────────────────────────────── */

body.dark-mode .tl-cats {
  background: rgba(255,255,255,.01);
}

body.dark-mode .tl-cats__card {
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.07);
  box-shadow:
    0 2px 8px rgba(0,0,0,.18),
    0 12px 40px rgba(0,0,0,.22);
}

body.dark-mode .tl-cats__pill-bar {
  background: rgba(255,255,255,.03);
  border-bottom-color: rgba(255,255,255,.07);
}

body.dark-mode .tl-cats__pill {
  color: rgba(255,255,255,.5);
}

body.dark-mode .tl-cats__pill:hover {
  background: rgba(255,255,255,.06);
  border-color: rgba(255,255,255,.12);
  color: rgba(255,255,255,.8);
}

body.dark-mode .tl-cats__pill--active {
  background: rgba(255,255,255,.10);
  border-color: rgba(255,255,255,.20);
  color: rgba(255,255,255,.92);
}

body.dark-mode .tl-cats__panel-side {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.08);
}

body.dark-mode .section-pricing {
  background: rgba(255,255,255,.02);
  border-top-color: rgba(255,255,255,.07);
}


/* ── RESPONSIVE PILLS ────────────────────────────────────── */

@media (max-width: 680px) {
  .tl-cats__panel-grid {
    grid-template-columns: 1fr;
  }

  /* Side va debajo en móvil */
  .tl-cats__panel-side {
    .pricing-plan--basic {   order: 1; }  .pricing-plan--featured {   order: 2; }  .pricing-plan--custom {   order: 3; }: 2;
  }

  .tl-cats__panel-main {
    .pricing-plan--basic {   order: 1; }  .pricing-plan--featured {   order: 2; }  .pricing-plan--custom {   order: 3; }: 1;
  }

  /* CTAs principales en columna en móvil */
  .tl-cats__panel-main .tl-cats__panel-ctas {
    flex-direction: column;
  }

  .tl-cats__panel-main .tl-cats__panel-cta {
    width: 100%;
    text-align: center;
    justify-content: center;
  }
}

@media (max-width: 420px) {
  .tl-cats__pill {
    padding: 7px 14px;
    font-size: .76rem;
  }

  .tl-cats__card {
    border-radius: 14px;
  }
}


/* ═══════════════════════════════════════════════════════════
   SPRINT PREMIUM DEFINITIVO — Método TEIMA + Muestra elevada
   Clases nuevas:
   .tl-metodo-preview (sección standalone Método)
   .tl-compare--elevated (muestra visual mejorada)
   .tl-compare__card--after-premium (borde dorado)
   .tl-compare__cta-btn (botón premium muestra)
   .tl-compare__flow-indicator (flow Prompt→Revisión→Resultado)
   .tl-compare__result--premium (resultado destacado)
═══════════════════════════════════════════════════════════ */


/* ╔══════════════════════════════════════════════════════════
   SECCIÓN MÉTODO TEIMA — Layout 2 columnas editorial
   ══════════════════════════════════════════════════════════╗ */

.tl-metodo-preview {
  background: var(--bg-card, #FBFAF7);
  border-top: 1px solid var(--border, #DDD0BF);
  border-bottom: 1px solid var(--border, #DDD0BF);
  padding-block: clamp(72px, 9vw, 108px);
  position: relative;
  overflow: hidden;
}

/* Halo ambiental cálido detrás de la sección */
.tl-metodo-preview::after {
  content: '';
  position: absolute;
  top: -120px;
  right: -80px;
  width: 560px;
  height: 480px;
  background: radial-gradient(ellipse at center,
    rgba(185,149,46,.07) 0%,
    transparent 65%);
  pointer-events: none;
}

/* Línea dorada superior izquierda */
.tl-metodo-preview::before {
  content: '';
  position: absolute;
  top: 0;
  left: clamp(24px, 4vw, 48px);
  width: 56px;
  height: 3px;
  background: var(--gold, #B9952E);
  border-radius: 0 0 2px 2px;
}

/* ── Inner container ─────────────────────────────────── */

.tl-metodo-preview__inner {
  width: min(100% - 48px, 1100px);
  margin-inline: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
  position: relative;
  z-index: 1;
}

/* ── Columna izquierda: copy ─────────────────────────── */

.tl-metodo-preview__copy {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.tl-metodo-preview__title {
  margin: 10px 0 18px;
  font-size: clamp(1.6rem, 3.2vw, 2.35rem);
  font-weight: 800;
  letter-spacing: -.04em;
  color: var(--text-main, #111827);
  line-height: 1.16;
}

.tl-metodo-preview__text {
  font-size: clamp(.9rem, 1.3vw, .98rem);
  color: var(--text-secondary, #4B5563);
  line-height: 1.72;
  margin: 0 0 14px;
}

.tl-metodo-preview__claim {
  display: inline-block;
  font-size: .82rem;
  font-weight: 700;
  letter-spacing: .04em;
  color: var(--gold, #B9952E);
  text-transform: uppercase;
  margin: 0 0 28px;
}

.tl-metodo-preview__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

/* ── Columna derecha: tarjeta oscura premium ─────────── */

.tl-metodo-preview__card {
  background: linear-gradient(148deg, #1A1128 0%, #0F0B1A 60%, #161A28 100%);
  border-radius: 20px;
  padding: clamp(28px, 4vw, 44px);
  position: relative;
  overflow: hidden;
  box-shadow:
    0 4px 16px rgba(10,8,20,.16),
    0 24px 64px rgba(10,8,20,.24),
    0 0 0 1px rgba(185,149,46,.08);
}

/* Glow ambiental dentro de la card */
.tl-metodo-preview__card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(
    ellipse 70% 55% at 80% 15%,
    rgba(91,58,142,.22) 0%,
    transparent 60%
  );
  pointer-events: none;
}

/* Franja dorada superior de la card */
.tl-metodo-preview__card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 2px;
  background: linear-gradient(90deg,
    var(--gold, #B9952E) 0%,
    rgba(185,149,46,.4) 60%,
    transparent 100%);
}

/* Card header */
.tl-metodo-preview__card-header {
  margin-bottom: clamp(20px, 2.5vw, 28px);
  position: relative;
}

.tl-metodo-preview__card-eyebrow {
  display: block;
  font-size: .65rem;
  font-weight: 800;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: rgba(185,149,46,.72);
  margin-bottom: 6px;
}

.tl-metodo-preview__card-title {
  font-size: clamp(1.05rem, 1.8vw, 1.28rem);
  font-weight: 800;
  color: #F6F2EA;
  letter-spacing: -.03em;
  line-height: 1.25;
  margin: 0;
}

/* Lista de pasos */
.tl-metodo-preview__steps {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
  position: relative;
}

/* Línea vertical conectora entre pasos */
.tl-metodo-preview__steps::before {
  content: '';
  position: absolute;
  top: 22px;
  bottom: 22px;
  left: 18px;
  width: 1px;
  background: linear-gradient(to bottom,
    rgba(185,149,46,.35) 0%,
    rgba(185,149,46,.12) 70%,
    transparent 100%);
}

/* Cada paso */
.tl-metodo-preview__step {
  display: flex;
  gap: 16px;
  align-items: flex-start;
  padding: clamp(12px, 1.5vw, 16px) 0;
  border-bottom: 1px solid rgba(255,255,255,.06);
}

.tl-metodo-preview__step:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.tl-metodo-preview__step-num {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(185,149,46,.12);
  border: 1px solid rgba(185,149,46,.28);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: .62rem;
  font-weight: 900;
  letter-spacing: .05em;
  color: rgba(185,149,46,.85);
  position: relative;
  z-index: 1;
}

.tl-metodo-preview__step-body {
  flex: 1;
  padding-top: 6px;
}

.tl-metodo-preview__step-title {
  display: block;
  font-size: .88rem;
  font-weight: 700;
  color: rgba(246,242,234,.88);
  letter-spacing: -.02em;
  line-height: 1.3;
  margin-bottom: 4px;
}

.tl-metodo-preview__step-text {
  font-size: .78rem;
  color: rgba(246,242,234,.46);
  line-height: 1.6;
  margin: 0;
}

/* ── Responsive Método Preview ───────────────────────── */

@media (max-width: 860px) {
  .tl-metodo-preview__inner {
    grid-template-columns: 1fr;
    gap: clamp(32px, 5vw, 48px);
  }

  .tl-metodo-preview__card {
    max-width: 560px;
  }
}

@media (max-width: 480px) {
  .tl-metodo-preview__actions {
    flex-direction: column;
  }

  .tl-metodo-preview__actions .btn {
    text-align: center;
    justify-content: center;
  }
}

/* Dark mode: ya tiene fondo oscuro — ajustar borde y card */
body.dark-mode .tl-metodo-preview {
  background: rgba(255,255,255,.015);
}

body.dark-mode .tl-metodo-preview__card {
  box-shadow:
    0 4px 16px rgba(0,0,0,.35),
    0 24px 64px rgba(0,0,0,.45),
    0 0 0 1px rgba(185,149,46,.12);
}


/* ╔══════════════════════════════════════════════════════════
   MUESTRA DEL MÉTODO — versión elevada (.tl-compare--elevated)
   ══════════════════════════════════════════════════════════╗ */

/* Fondo con degradado cálido y halo dorado suave */
.tl-compare--elevated {
  background:
    radial-gradient(ellipse 60% 40% at 80% 60%, rgba(185,149,46,.05) 0%, transparent 65%),
    radial-gradient(ellipse 50% 35% at 15% 30%, rgba(91,58,142,.04) 0%, transparent 60%),
    var(--bg-main, #F7F2EA);
}

/* Tarjeta "Después" con acento dorado visible */
.tl-compare__card--after-premium {
  border-top: 3px solid var(--gold, #B9952E) !important;
  box-shadow:
    0 2px 8px rgba(23,32,51,.06),
    0 12px 36px rgba(185,149,46,.10),
    0 0 0 1px rgba(185,149,46,.10);
}

/* Badge inferior dentro de la tarjeta Después */
.tl-compare__card-badge-bottom {
  display: inline-flex;
  align-items: center;
  margin-top: 16px;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--olive, #6B7A3E);
  background: var(--olive-pale, rgba(107,122,62,.10));
  border: 1px solid rgba(107,122,62,.20);
  border-radius: 4px;
  padding: 4px 10px;
}

/* Evidencia premium — el bloque visual fuerte */
.tl-compare__evidence--premium {
  background: var(--bg-card, #FBFAF7);
  border: 1px solid var(--border, #DDD0BF);
  border-top: 2px solid var(--gold, #B9952E);
  border-radius: 16px;
  box-shadow:
    0 2px 8px rgba(23,32,51,.04),
    0 16px 44px rgba(23,32,51,.07);
  padding: clamp(28px, 4vw, 44px);
}

/* Subtítulo de la evidencia */
.tl-compare__evidence-subtitle {
  font-size: .86rem;
  color: var(--text-muted, #9CA3AF);
  margin: 4px 0 0;
  line-height: 1.5;
}

/* Flow indicator: Prompt → Revisión → Resultado */
.tl-compare__flow-indicator {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0 24px;
  flex-wrap: wrap;
}

.tl-compare__flow-step {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-muted, #9CA3AF);
  background: var(--bg-main, #F7F2EA);
  border: 1px solid var(--border, #DDD0BF);
  border-radius: 4px;
  padding: 4px 10px;
}

.tl-compare__flow-step--final {
  color: var(--olive, #6B7A3E);
  background: var(--olive-pale, rgba(107,122,62,.10));
  border-color: rgba(107,122,62,.22);
}

.tl-compare__flow-arrow {
  color: var(--gold, #B9952E);
  font-weight: 700;
  font-size: .88rem;
  flex-shrink: 0;
}

/* Resultado tras revisión — premium */
.tl-compare__result--premium {
  background: rgba(185,149,46,.04);
  border-left: 3px solid var(--gold, #B9952E);
  border-radius: 0 8px 8px 0;
  padding: 14px 16px;
}

.tl-compare__result--premium .tl-compare__result-label {
  font-weight: 800;
  color: var(--gold, #B9952E);
}

.tl-compare__result--premium .tl-compare__result-text {
  border-left: none;
  padding-left: 0;
  font-style: italic;
  color: var(--text-main, #111827);
  font-size: .88rem;
}

/* CTA como botón premium con borde dorado */
.tl-compare__cta-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 20px;
  border-radius: 6px;
  background: transparent;
  border: 1.5px solid var(--gold, #B9952E);
  color: var(--text-main, #111827);
  font-size: .88rem;
  font-weight: 600;
  letter-spacing: -.01em;
  text-decoration: none;
  transition: background .18s ease, color .18s ease, box-shadow .18s ease;
}

.tl-compare__cta-btn:hover {
  background: rgba(185,149,46,.06);
  box-shadow: 0 2px 12px rgba(185,149,46,.18);
  color: var(--text-main, #111827);
}

/* Dark mode para evidencia y CTA */
body.dark-mode .tl-compare--elevated {
  background:
    radial-gradient(ellipse 60% 40% at 80% 60%, rgba(185,149,46,.06) 0%, transparent 65%),
    var(--bg-dark, #111827);
}

body.dark-mode .tl-compare__evidence--premium {
  background: rgba(255,255,255,.03);
  border-color: rgba(255,255,255,.08);
  border-top-color: rgba(185,149,46,.45);
}

body.dark-mode .tl-compare__flow-step {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.10);
  color: rgba(255,255,255,.45);
}

body.dark-mode .tl-compare__result--premium {
  background: rgba(185,149,46,.06);
  border-left-color: rgba(185,149,46,.45);
}

body.dark-mode .tl-compare__cta-btn {
  border-color: rgba(185,149,46,.45);
  color: rgba(246,242,234,.82);
}

body.dark-mode .tl-compare__cta-btn:hover {
  background: rgba(185,149,46,.08);
  box-shadow: 0 2px 12px rgba(185,149,46,.12);
  color: rgba(246,242,234,.95);
}


/* ═══════════════════════════════════════════════════════════
   SPRINT CORRECCIONES PREMIUM FINALES
   T1 — Legibilidad .teima-inline en pill activa (dark bg)
   T2 — Tarjeta "Adaptación personalizada" lingot dorado
═══════════════════════════════════════════════════════════ */


/* ── T1: .teima-inline sobre pill oscura ─────────────────────
   Problema: .teima-inline hereda color: #111827 (oscuro) y
   en la pill activa el fondo también es #111827 → ilegible.
   Fix: forzar ivory en el wrapper + todos sus span hijos,
   y restaurar el tono gold-suave para el span __i (la I).
──────────────────────────────────────────────────────────── */

.tl-cats__pill--active .teima-inline,
.tl-cats__pill[aria-selected="true"] .teima-inline {
  color: #F7F2EA;
}

/* Los <span> individuales (T, E, M, A) heredan del padre,
   pero en algunos navegadores color se aplica directo al span;
   forzamos ivory en todos los hijos para garantía cross-browser */
.tl-cats__pill--active .teima-inline span,
.tl-cats__pill[aria-selected="true"] .teima-inline span {
  color: #F7F2EA;
}

/* La I recibe gold suave sobre oscuro (no el gold puro, muy bajo contraste) */
.tl-cats__pill--active .teima-inline .teima-inline__i,
.tl-cats__pill[aria-selected="true"] .teima-inline .teima-inline__i {
  color: var(--gold-soft, #E8D8A8);
}

/* Dark mode: pill activa en modo oscuro — misma corrección */
body.dark-mode .tl-cats__pill--active .teima-inline,
body.dark-mode .tl-cats__pill[aria-selected="true"] .teima-inline,
body.dark-mode .tl-cats__pill--active .teima-inline span,
body.dark-mode .tl-cats__pill[aria-selected="true"] .teima-inline span {
  color: rgba(246,242,234,.90);
}

body.dark-mode .tl-cats__pill--active .teima-inline .teima-inline__i,
body.dark-mode .tl-cats__pill[aria-selected="true"] .teima-inline .teima-inline__i {
  color: #C9A844;
}


/* ── T2: .pricing-plan--custom — tratamiento lingot dorado ───
   Sobreescribe el antiguo tinte olive de líneas ~14672.
   Objetivo: sensación de oro cálido, sobrio, premium.
   Diferenciado del --featured (purple) y del --basic (neutro).
──────────────────────────────────────────────────────────── */

.pricing-plan--custom {
  background: linear-gradient(
    160deg,
    rgba(201,162,39,.07) 0%,
    var(--bg-card, #FBFAF7) 55%,
    rgba(185,149,46,.04) 100%
  );
  border-color: rgba(185,149,46,.35);
  border-top: 3px solid var(--gold, #B9952E);
  position: relative;
  overflow: hidden;
}

/* Brillo ambiental dorado — esquina superior derecha */
.pricing-plan--custom::before {
  content: '';
  position: absolute;
  top: -40px;
  right: -40px;
  width: 160px;
  height: 160px;
  background: radial-gradient(ellipse at center,
    rgba(201,162,39,.14) 0%,
    transparent 68%);
  pointer-events: none;
}

/* Precio en gold */
.pricing-plan--custom .pricing-plan__amount {
  color: var(--gold, #B9952E);
}

/* CTA gold */
.pricing-plan--custom .pricing-plan__cta {
  border-color: rgba(185,149,46,.50);
  color: #7A5800;
}

.pricing-plan--custom .pricing-plan__cta:hover {
  background: rgba(185,149,46,.08);
  border-color: var(--gold, #B9952E);
  color: #5A4000;
}

/* Bullets gold */
.pricing-plan--custom .pricing-plan__features li::before {
  color: var(--gold, #B9952E);
}

/* Dark mode: lingot sobre oscuro */
body.dark-mode .pricing-plan--custom {
  background: linear-gradient(
    160deg,
    rgba(185,149,46,.10) 0%,
    rgba(255,255,255,.03) 55%,
    rgba(185,149,46,.06) 100%
  );
  border-color: rgba(185,149,46,.30);
  border-top-color: rgba(185,149,46,.55);
}

body.dark-mode .pricing-plan--custom .pricing-plan__amount {
  color: var(--gold-soft, #E8D8A8);
}

body.dark-mode .pricing-plan--custom .pricing-plan__cta {
  border-color: rgba(185,149,46,.35);
  color: var(--gold-soft, #E8D8A8);
}

body.dark-mode .pricing-plan--custom .pricing-plan__cta:hover {
  background: rgba(185,149,46,.10);
  border-color: rgba(185,149,46,.55);
  color: #F0D882;
}


/* ═══════════════════════════════════════════════════════════
   LINGOT UPGRADE — "Adaptación personalizada" tarjeta premium
   Upgrade completo: fondo dorado cálido tipo lingote, shimmer,
   gloss, profundidad, texto oscuro sobre oro, CTA exclusivo.
═══════════════════════════════════════════════════════════ */

/* ── Tarjeta principal: gradiente lingot + sombra joyería ── */

.pricing-plan--custom {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(circle at 16% 8%,  rgba(255,255,255,.72) 0%, transparent 26%),
    radial-gradient(circle at 86% 18%, rgba(255,228,140,.50) 0%, transparent 30%),
    linear-gradient(148deg,
      #fdf3d0 0%,
      #e8c45a 28%,
      #c9972a 60%,
      #9e6d18 100%
    );
  border: 1px solid rgba(138,92,14,.50);
  border-top: 4px solid #c9972a;
  box-shadow:
    0 28px 72px rgba(120,80,10,.26),
    0 8px 22px rgba(120,80,10,.14),
    inset 0 1px 0 rgba(255,255,255,.55),
    inset 0 -1px 0 rgba(90,55,8,.16);
}

/* ── ::before — capa de gloss diagonal ─────────────────── */

.pricing-plan--custom::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(
    118deg,
    rgba(255,255,255,.40) 0%,
    rgba(255,255,255,.10) 36%,
    rgba(90,55,8,.08) 100%
  );
  pointer-events: none;
  z-index: 0;
}

/* ── ::after — punto de luz alta esquina superior derecha ─ */

.pricing-plan--custom::after {
  content: '';
  position: absolute;
  top: -28%;
  right: -18%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(255,255,255,.44), transparent 60%);
  transform: rotate(18deg);
  pointer-events: none;
  z-index: 0;
}

/* ── Hijos directos sobre los pseudo-elementos ──────────── */

.pricing-plan--custom > * {
  position: relative;
  z-index: 1;
}

/* ── Textos: oscuros cálidos sobre oro ──────────────────── */

.pricing-plan--custom .pricing-plan__title {
  color: #181208;
}

.pricing-plan--custom .pricing-plan__from {
  color: rgba(70,45,8,.65);
}

.pricing-plan--custom .pricing-plan__amount {
  color: #5a3c00;
  text-shadow:
    0 1px 0 rgba(255,255,255,.42),
    0 6px 16px rgba(90,55,8,.16);
}

.pricing-plan--custom .pricing-plan__desc {
  color: #2e2410;
}

/* ── Lista de features: texto oscuro + check dorado oscuro ─ */

.pricing-plan--custom .pricing-plan__features,
.pricing-plan--custom .pricing-plan__features li {
  color: #211a0c;
}

.pricing-plan--custom .pricing-plan__features li::before {
  color: #7a5200;
}

/* ── CTA: botón oscuro con borde crema — exclusivo ───────── */

.pricing-plan--custom .pricing-plan__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    135deg,
    rgba(40,28,8,.92) 0%,
    rgba(90,58,10,.94) 100%
  );
  border: 1px solid rgba(255,232,160,.62);
  color: #fff8e0;
  box-shadow:
    0 12px 28px rgba(80,52,8,.26),
    inset 0 1px 0 rgba(255,255,255,.20);
  font-weight: 600;
  letter-spacing: -.01em;
  transition: background .18s ease, border-color .18s ease,
              box-shadow .18s ease, transform .14s ease;
}

.pricing-plan--custom .pricing-plan__cta:hover {
  background: linear-gradient(
    135deg,
    rgba(60,42,10,.96) 0%,
    rgba(116,78,12,.98) 100%
  );
  border-color: rgba(255,238,184,.82);
  box-shadow:
    0 16px 36px rgba(80,52,8,.30),
    inset 0 1px 0 rgba(255,255,255,.22);
  color: #fff8e0;
  transform: translateY(-1px);
}

/* ── Separador de features: tono acorde al fondo ────────── */

.pricing-plan--custom .pricing-plan__features {
  border-top-color: rgba(138,92,14,.22);
}


/* ── DARK MODE — lingot oscuro, calidez intacta ─────────── */

body.dark-mode .pricing-plan--custom {
  background:
    radial-gradient(circle at 16% 8%, rgba(255,255,255,.06) 0%, transparent 26%),
    linear-gradient(148deg,
      rgba(185,149,46,.22) 0%,
      rgba(150,110,28,.14) 50%,
      rgba(100,68,12,.16) 100%
    );
  border: 1px solid rgba(185,149,46,.32);
  border-top: 4px solid rgba(185,149,46,.55);
  box-shadow:
    0 20px 56px rgba(0,0,0,.40),
    0 6px 18px rgba(0,0,0,.22),
    inset 0 1px 0 rgba(255,255,255,.06);
}

body.dark-mode .pricing-plan--custom::before {
  background: linear-gradient(
    118deg,
    rgba(255,255,255,.06) 0%,
    transparent 50%,
    rgba(0,0,0,.10) 100%
  );
}

body.dark-mode .pricing-plan--custom::after {
  background: radial-gradient(circle, rgba(255,255,255,.06), transparent 60%);
}

body.dark-mode .pricing-plan--custom .pricing-plan__title {
  color: rgba(246,238,212,.92);
}

body.dark-mode .pricing-plan--custom .pricing-plan__from {
  color: rgba(220,190,120,.55);
}

body.dark-mode .pricing-plan--custom .pricing-plan__amount {
  color: var(--gold-soft, #E8D8A8);
  text-shadow: none;
}

body.dark-mode .pricing-plan--custom .pricing-plan__desc {
  color: rgba(220,195,140,.72);
}

body.dark-mode .pricing-plan--custom .pricing-plan__features,
body.dark-mode .pricing-plan--custom .pricing-plan__features li {
  color: rgba(230,210,160,.80);
}

body.dark-mode .pricing-plan--custom .pricing-plan__features li::before {
  color: rgba(185,149,46,.80);
}

body.dark-mode .pricing-plan--custom .pricing-plan__features {
  border-top-color: rgba(185,149,46,.18);
}

body.dark-mode .pricing-plan--custom .pricing-plan__cta {
  background: linear-gradient(
    135deg,
    rgba(185,149,46,.22) 0%,
    rgba(150,110,28,.18) 100%
  );
  border-color: rgba(185,149,46,.40);
  color: var(--gold-soft, #E8D8A8);
  box-shadow: none;
}

body.dark-mode .pricing-plan--custom .pricing-plan__cta:hover {
  background: linear-gradient(
    135deg,
    rgba(185,149,46,.32) 0%,
    rgba(150,110,28,.28) 100%
  );
  border-color: rgba(185,149,46,.58);
  color: #F2E4B0;
  transform: translateY(-1px);
}


/* ═══════════════════════════════════════════════════════════
   PACK PREMIUM — "Qué incluye este sistema"
   Dossier de producto en 3 niveles: cabecera / bloques / cierre
   Clases principales:
   .tl-cats__includes · -header · -header-text · -badge
   .tl-cats__includes-sections · .tl-cats__include-group · -group-title
   .tl-cats__include-list · .tl-cats__include-item · -number · -title · -text
   .tl-cats__includes-value · .tl-cats__includes-price · -price-note
═══════════════════════════════════════════════════════════ */


/* ── Contenedor: dossier premium ──────────────────────────── */

.tl-cats__panel-side,
.tl-cats__includes {
  position: relative;
  overflow: hidden;
  padding: clamp(22px, 3vw, 30px);
  border-radius: 26px;
  background:
    radial-gradient(circle at 90% 0%, rgba(198,162,74,.22) 0%, transparent 34%),
    radial-gradient(circle at 6% 92%, rgba(198,162,74,.07) 0%, transparent 40%),
    linear-gradient(145deg, rgba(255,255,255,.96), rgba(250,244,231,.98));
  border: 1px solid rgba(198,162,74,.34);
  border-top: 4px solid rgba(198,162,74,.76);
  box-shadow:
    0 28px 80px rgba(40,28,8,.12),
    0 4px 16px rgba(40,28,8,.06),
    inset 0 1px 0 rgba(255,255,255,.82);
}

/* Halo decorativo esquina superior derecha */
.tl-cats__panel-side::before,
.tl-cats__includes::before {
  content: '';
  position: absolute;
  top: -80px;
  right: -80px;
  width: 220px;
  height: 220px;
  background: radial-gradient(circle, rgba(198,162,74,.18), transparent 60%);
  pointer-events: none;
  z-index: 0;
}


/* ── Cabecera: título + badge en fila ─────────────────────── */

.tl-cats__includes-header {
  position: relative;
  z-index: 1;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 14px;
  padding-bottom: 18px;
  border-bottom: 1px solid rgba(198,162,74,.26);
  margin-bottom: 20px;
}

.tl-cats__includes-header-text {
  flex: 1;
  min-width: 0;
}

.tl-cats__includes-title {
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: #111827;
  margin: 0 0 7px;
}

.tl-cats__includes-subtitle {
  font-size: .80rem;
  color: #5B6472;
  line-height: 1.55;
  margin: 0;
}

/* Badge tipo sello */
.tl-cats__includes-badge {
  flex: 0 0 auto;
  padding: 7px 11px;
  border-radius: 999px;
  background: rgba(198,162,74,.12);
  border: 1px solid rgba(198,162,74,.28);
  color: #7A5810;
  font-weight: 700;
  font-size: .68rem;
  letter-spacing: .07em;
  text-transform: uppercase;
  white-space: nowrap;
}


/* ── Bloques internos: dos secciones diferenciadas ────────── */

.tl-cats__includes-sections {
  position: relative;
  z-index: 1;
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
}

.tl-cats__include-group {
  padding: 16px 16px 14px;
  border-radius: 18px;
  background: linear-gradient(145deg, rgba(255,255,255,.88), rgba(252,248,238,.96));
  border: 1px solid rgba(198,162,74,.20);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.84),
    0 10px 26px rgba(33,24,8,.046);
}

.tl-cats__include-group-title {
  margin: 0 0 13px;
  color: #4B2E83;
  font-weight: 700;
  font-size: .70rem;
  letter-spacing: .09em;
  text-transform: uppercase;
}

.tl-cats__include-list {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
}

/* Para grupos de 2 entregables */
.tl-cats__include-list--pair {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}


/* ── Ítem individual ─────────────────────────────────────── */

.tl-cats__include-item {
  padding: 11px 11px 10px;
  border-radius: 12px;
  background: rgba(255,255,255,.74);
  border: 1px solid rgba(198,162,74,.16);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.80);
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}

.tl-cats__include-item:hover {
  border-color: rgba(185,149,46,.32);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.80),
    0 6px 16px rgba(33,24,8,.07);
  transform: translateY(-1px);
}

.tl-cats__include-number {
  display: inline-block;
  font-size: .60rem;
  font-weight: 900;
  letter-spacing: .09em;
  color: #9A7418;
  background: rgba(198,162,74,.12);
  border-radius: 4px;
  padding: 2px 5px 2px 4px;
  margin-bottom: 7px;
  line-height: 1;
}

.tl-cats__include-title {
  font-size: .77rem;
  font-weight: 700;
  color: #111827;
  margin: 0 0 4px;
  line-height: 1.28;
}

.tl-cats__include-text {
  font-size: .72rem;
  color: #5B6472;
  line-height: 1.48;
  margin: 0;
}


/* ── Nota de valor: frase de sistema en cursiva ──────────── */

.tl-cats__includes-value {
  position: relative;
  z-index: 1;
  margin: 0 0 16px;
  padding: 12px 15px;
  border-radius: 12px;
  background: linear-gradient(135deg, rgba(198,162,74,.11), rgba(255,255,255,.60));
  border: 1px solid rgba(198,162,74,.22);
  color: #6B6040;
  font-size: .78rem;
  line-height: 1.52;
  font-style: italic;
}


/* ── Cierre comercial: precio + link ─────────────────────── */

.tl-cats__includes-price {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 14px;
  padding-top: 16px;
  border-top: 1px solid rgba(198,162,74,.26);
}

.tl-cats__includes-price-note {
  margin: 4px 0 0;
  font-size: .72rem;
  color: #9CA3AF;
  line-height: 1.4;
}


/* ── DARK MODE ───────────────────────────────────────────── */

body.dark-mode .tl-cats__panel-side,
body.dark-mode .tl-cats__includes {
  background:
    radial-gradient(circle at 90% 0%, rgba(185,149,46,.09) 0%, transparent 34%),
    linear-gradient(145deg, rgba(26,20,40,.97), rgba(15,11,24,.99));
  border-color: rgba(185,149,46,.18);
  border-top-color: rgba(185,149,46,.42);
  box-shadow:
    0 28px 80px rgba(0,0,0,.38),
    0 4px 16px rgba(0,0,0,.22);
}

body.dark-mode .tl-cats__includes-header {
  border-bottom-color: rgba(185,149,46,.14);
}

body.dark-mode .tl-cats__includes-title {
  color: rgba(246,242,234,.88);
}

body.dark-mode .tl-cats__includes-subtitle {
  color: rgba(255,255,255,.36);
}

body.dark-mode .tl-cats__includes-badge {
  background: rgba(185,149,46,.10);
  border-color: rgba(185,149,46,.20);
  color: rgba(185,149,46,.78);
}

body.dark-mode .tl-cats__include-group {
  background: rgba(255,255,255,.03);
  border-color: rgba(185,149,46,.12);
  box-shadow: none;
}

body.dark-mode .tl-cats__include-group-title {
  color: rgba(166,136,214,.78);
}

body.dark-mode .tl-cats__include-item {
  background: rgba(255,255,255,.04);
  border-color: rgba(185,149,46,.12);
  box-shadow: none;
}

body.dark-mode .tl-cats__include-item:hover {
  border-color: rgba(185,149,46,.26);
  box-shadow: 0 6px 16px rgba(0,0,0,.20);
  transform: translateY(-1px);
}

body.dark-mode .tl-cats__include-number {
  color: rgba(185,149,46,.80);
  background: rgba(185,149,46,.10);
}

body.dark-mode .tl-cats__include-title {
  color: rgba(246,242,234,.82);
}

body.dark-mode .tl-cats__include-text {
  color: rgba(255,255,255,.36);
}

body.dark-mode .tl-cats__includes-value {
  background: rgba(185,149,46,.07);
  border-color: rgba(185,149,46,.14);
  color: rgba(198,162,74,.62);
}

body.dark-mode .tl-cats__includes-price {
  border-top-color: rgba(185,149,46,.14);
}

body.dark-mode .tl-cats__includes-price-note {
  color: rgba(255,255,255,.28);
}


/* ── RESPONSIVE ──────────────────────────────────────────── */

@media (max-width: 820px) {
  .tl-cats__include-list {
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
  }
}

@media (max-width: 480px) {
  .tl-cats__panel-side,
  .tl-cats__includes {
    padding: 18px 16px;
    border-radius: 18px;
  }

  .tl-cats__includes-header {
    flex-direction: column;
    gap: 10px;
  }

  .tl-cats__include-group {
    padding: 13px 12px 12px;
  }

  .tl-cats__include-list,
  .tl-cats__include-list--pair {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .tl-cats__includes-price {
    flex-direction: column;
    align-items: flex-start;
    gap: 10px;
  }
}


/* ═══════════════════════════════════════════════════════════
   SPRINT MUESTRA PREMIUM — .tl-method-preview
   Reemplaza .tl-compare--elevated en la home.
   Layout 2-col editorial: copy+pasos (izq) · tarjeta resultado (der)
   .tl-compare sigue en styles para muestra-teima-oficina.html
═══════════════════════════════════════════════════════════ */


/* ── Sección: fondo cálido editorial ────────────────────── */

.tl-method-preview {
  background: var(--bg-card, #FBFAF7);
  border-top: 1px solid var(--border, #DDD0BF);
  border-bottom: 1px solid var(--border, #DDD0BF);
  padding-block: clamp(72px, 9vw, 112px);
  position: relative;
  overflow: hidden;
}

/* Halo dorado ambiental — fondo derecho */
.tl-method-preview::before {
  content: '';
  position: absolute;
  top: -60px;
  right: -60px;
  width: 480px;
  height: 420px;
  background: radial-gradient(ellipse at center,
    rgba(185,149,46,.06) 0%,
    transparent 65%);
  pointer-events: none;
}


/* ── Inner container ─────────────────────────────────────── */

.tl-method-preview__inner {
  width: min(100% - 48px, 1100px);
  margin-inline: auto;
  position: relative;
  z-index: 1;
}

.tl-method-preview__inner > .tl-eyebrow {
  margin-bottom: clamp(28px, 3.5vw, 40px);
}


/* ── Grid 2 columnas ─────────────────────────────────────── */

.tl-method-preview__grid {
  display: grid;
  grid-template-columns: 1.1fr 0.9fr;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}


/* ── Columna izquierda ───────────────────────────────────── */

.tl-method-preview__title {
  font-size: clamp(1.55rem, 3.2vw, 2.3rem);
  font-weight: 800;
  letter-spacing: -.035em;
  line-height: 1.15;
  color: var(--teima-ink, #111827);
  margin: 0 0 18px;
}

.tl-method-preview__lead {
  font-size: .95rem;
  color: var(--text-secondary, #4B5563);
  line-height: 1.68;
  margin: 0 0 36px;
  max-width: 44ch;
}


/* ── Pasos del método ────────────────────────────────────── */

.tl-method-preview__steps {
  list-style: none;
  margin: 0 0 38px;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

.tl-method-preview__step {
  display: flex;
  gap: 18px;
  align-items: flex-start;
}

.tl-method-preview__step-num {
  font-size: .68rem;
  font-weight: 900;
  letter-spacing: .06em;
  color: var(--gold, #B9952E);
  flex-shrink: 0;
  padding-top: 2px;
  min-width: 20px;
}

.tl-method-preview__step-title {
  display: block;
  font-size: .88rem;
  font-weight: 700;
  color: var(--teima-ink, #111827);
  margin-bottom: 4px;
  line-height: 1.3;
}

.tl-method-preview__step-text {
  font-size: .80rem;
  color: var(--text-secondary, #4B5563);
  line-height: 1.58;
  margin: 0;
}


/* ── CTAs bajo los pasos ─────────────────────────────────── */

.tl-method-preview__actions {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
}

.tl-method-preview__cta {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 11px 22px;
  background: var(--teima-ink, #111827);
  color: #F7F2EA;
  border-radius: 6px;
  font-size: .87rem;
  font-weight: 600;
  letter-spacing: -.01em;
  text-decoration: none;
  transition: background .16s ease, box-shadow .16s ease;
}

.tl-method-preview__cta:hover {
  background: #1c2533;
  box-shadow: 0 4px 18px rgba(17,24,39,.22);
  color: #F7F2EA;
}

.tl-method-preview__cta-sec {
  font-size: .83rem;
  color: var(--text-secondary, #4B5563);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  transition: color .15s ease;
}

.tl-method-preview__cta-sec:hover {
  color: var(--teima-ink, #111827);
}


/* ── Tarjeta derecha: resultado premium ──────────────────── */

.tl-method-preview__card {
  background:
    radial-gradient(circle at 88% 8%, rgba(185,149,46,.10) 0%, transparent 44%),
    var(--bg-card, #FBFAF7);
  border: 1px solid rgba(185,149,46,.28);
  border-top: 3px solid rgba(185,149,46,.58);
  border-radius: 16px;
  padding: clamp(24px, 3.5vw, 36px);
  box-shadow:
    0 24px 60px rgba(36,25,8,.08),
    0 4px 14px rgba(36,25,8,.05),
    inset 0 1px 0 rgba(255,255,255,.80);
}

.tl-method-preview__card-eyebrow {
  display: block;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .10em;
  text-transform: uppercase;
  color: #9A7418;
  margin-bottom: 18px;
}

.tl-method-preview__quote {
  font-size: clamp(.90rem, 1.4vw, 1.02rem);
  font-style: italic;
  color: var(--teima-ink, #111827);
  line-height: 1.70;
  border-left: 3px solid var(--gold, #B9952E);
  padding-left: 16px;
  margin: 0 0 14px;
}

.tl-method-preview__card-note {
  font-size: .77rem;
  color: var(--text-secondary, #4B5563);
  line-height: 1.52;
  margin: 0 0 22px;
}


/* ── Flow chips: Prompt → Revisión → Resultado ───────────── */

.tl-method-preview__flow {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.tl-method-preview__flow-chip {
  font-size: .64rem;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-muted, #9CA3AF);
  background: rgba(17,24,39,.04);
  border: 1px solid var(--border, #DDD0BF);
  border-radius: 4px;
  padding: 3px 8px;
}

.tl-method-preview__flow-chip--final {
  color: var(--olive, #6B7A3E);
  background: rgba(107,122,62,.08);
  border-color: rgba(107,122,62,.22);
}

.tl-method-preview__flow-arrow {
  color: var(--gold, #B9952E);
  font-weight: 700;
  font-size: .80rem;
  flex-shrink: 0;
}


/* ── Nota de referencia ──────────────────────────────────── */

.tl-method-preview__card-ref {
  font-size: .68rem;
  color: var(--text-muted, #9CA3AF);
  letter-spacing: .03em;
  margin: 0;
  border-top: 1px solid var(--border, #DDD0BF);
  padding-top: 14px;
}


/* ── DARK MODE ───────────────────────────────────────────── */

body.dark-mode .tl-method-preview {
  background: rgba(255,255,255,.015);
  border-top-color: rgba(255,255,255,.07);
  border-bottom-color: rgba(255,255,255,.07);
}

body.dark-mode .tl-method-preview__title {
  color: rgba(246,242,234,.92);
}

body.dark-mode .tl-method-preview__lead,
body.dark-mode .tl-method-preview__step-text {
  color: rgba(255,255,255,.45);
}

body.dark-mode .tl-method-preview__step-title {
  color: rgba(246,242,234,.82);
}

body.dark-mode .tl-method-preview__cta {
  background: rgba(255,255,255,.08);
  color: rgba(246,242,234,.90);
}

body.dark-mode .tl-method-preview__cta:hover {
  background: rgba(255,255,255,.13);
  box-shadow: 0 4px 18px rgba(0,0,0,.25);
}

body.dark-mode .tl-method-preview__cta-sec {
  color: rgba(255,255,255,.38);
}

body.dark-mode .tl-method-preview__cta-sec:hover {
  color: rgba(255,255,255,.72);
}

body.dark-mode .tl-method-preview__card {
  background:
    radial-gradient(circle at 88% 8%, rgba(185,149,46,.08) 0%, transparent 44%),
    rgba(255,255,255,.03);
  border-color: rgba(185,149,46,.24);
  border-top-color: rgba(185,149,46,.42);
  box-shadow:
    0 20px 56px rgba(0,0,0,.32),
    0 4px 12px rgba(0,0,0,.18);
}

body.dark-mode .tl-method-preview__card-eyebrow {
  color: rgba(185,149,46,.70);
}

body.dark-mode .tl-method-preview__quote {
  color: rgba(246,242,234,.80);
  border-left-color: rgba(185,149,46,.44);
}

body.dark-mode .tl-method-preview__card-note {
  color: rgba(255,255,255,.36);
}

body.dark-mode .tl-method-preview__flow-chip {
  background: rgba(255,255,255,.05);
  border-color: rgba(255,255,255,.10);
  color: rgba(255,255,255,.32);
}

body.dark-mode .tl-method-preview__flow-chip--final {
  background: rgba(107,122,62,.12);
  border-color: rgba(107,122,62,.28);
  color: rgba(107,180,62,.65);
}

body.dark-mode .tl-method-preview__card-ref {
  border-top-color: rgba(255,255,255,.08);
  color: rgba(255,255,255,.26);
}


/* ── RESPONSIVE ──────────────────────────────────────────── */

@media (max-width: 860px) {
  .tl-method-preview__grid {
    grid-template-columns: 1fr;
    gap: clamp(32px, 5vw, 48px);
  }

  .tl-method-preview__lead {
    max-width: none;
  }
}

@media (max-width: 480px) {
  .tl-method-preview__actions {
    flex-direction: column;
    align-items: flex-start;
    gap: 14px;
  }

  .tl-method-preview__cta {
    width: 100%;
    justify-content: center;
  }

  .tl-method-preview__flow {
    gap: 5px;
  }
}


/* ═══════════════════════════════════════════════════════════════
   BRAND CONSISTENCY — .teima-inline__ext
   Extensiones de producto: Oficina · Local · Renovables · Agents · Lab
   Regla: violeta en fondo claro · ivory en fondo oscuro · I siempre dorada
═══════════════════════════════════════════════════════════════ */

/* Fondo claro: extensión en violeta */
.teima-inline__ext {
  color: var(--teima-violet, #4B2E83);
  font-weight: 700;
  letter-spacing: 0.01em;
}

/* Pills activas (fondo #111827): extensión ivory */
.tl-cats__pill--active .teima-inline__ext,
.tl-cats__pill[aria-selected="true"] .teima-inline__ext {
  color: #F7F2EA;
}

/* Secciones con fondo oscuro (CTA, etc.): extensión ivory */
.tl-home-cta .teima-inline__ext,
.has-dark-bg .teima-inline__ext {
  color: #F7F2EA;
}

/* Dark mode general: extensión ivory suave */
body.dark-mode .teima-inline__ext {
  color: rgba(246,242,234,.72);
}

/* Dark mode + pill activa: ivory pleno */
body.dark-mode .tl-cats__pill--active .teima-inline__ext,
body.dark-mode .tl-cats__pill[aria-selected="true"] .teima-inline__ext {
  color: #F7F2EA;
}

/* Variante explícita de fondo oscuro (teima-inline--light hermano) */
.teima-inline--light ~ .teima-inline__ext {
  color: rgba(246,242,234,.72);
}


/* ═══════════════════════════════════════════════════════════════
   SISTEMA DE MARCA — .teima-mark
   Reemplaza teima-inline + teima-inline__ext para todas las
   apariciones de producto (tabs, paneles, títulos, footer).
   TEIMA con más peso · extensión al 0.78em · I siempre dorada.
═══════════════════════════════════════════════════════════════ */

.teima-mark {
  display: inline-flex;
  align-items: baseline;
  gap: 0.34em;
  line-height: 1;
  white-space: nowrap;
}

/* La palabra TEIMA — compacta, como el logo principal */
.teima-mark__word {
  color: #111827;
  font-weight: 800;
  letter-spacing: 0.035em;
  text-transform: uppercase;
}

/* La I siempre dorada */
.teima-mark__i {
  color: #C6A24A;
}

/* Extensión: subordinada visualmente, sin exceso de tracking */
.teima-mark__extension {
  color: #4B2E83;
  font-weight: 700;
  letter-spacing: 0.015em;
  text-transform: none;
  font-size: 0.72em;
  position: relative;
  top: -0.01em;
}

/* ── Tamaños proporcionales ───────────────────────────────── */

.teima-mark--xs { font-size: 0.82rem; }
.teima-mark--sm { font-size: 0.98rem; }
.teima-mark--md { font-size: 1.45rem; }
.teima-mark--lg { font-size: 2rem; }

/* ── Tabs/Pills ───────────────────────────────────────────── */

.tl-cats__pill .teima-mark {
  font-size: 1rem;
}
.tl-cats__pill .teima-mark__word {
  letter-spacing: 0.035em;
}
.tl-cats__pill .teima-mark__extension {
  font-size: 0.72em;
}

/* ── Estado activo de pill (fondo #111827) ────────────────── */

.tl-cats__pill--active .teima-mark__word,
.tl-cats__pill[aria-selected="true"] .teima-mark__word {
  color: #F7F2EA;
}
.tl-cats__pill--active .teima-mark__i,
.tl-cats__pill[aria-selected="true"] .teima-mark__i {
  color: #C6A24A;
}
.tl-cats__pill--active .teima-mark__extension,
.tl-cats__pill[aria-selected="true"] .teima-mark__extension {
  color: #F7F2EA;
  opacity: 0.92;
}

/* ── Variante para fondos oscuros (CTA, secciones dark) ────── */

.teima-mark--light .teima-mark__word {
  color: #F7F2EA;
}
.teima-mark--light .teima-mark__i {
  color: #C6A24A;
}
.teima-mark--light .teima-mark__extension {
  color: rgba(246,242,234,.72);
  opacity: 1;
}

/* ── Dark mode global ─────────────────────────────────────── */

body.dark-mode .teima-mark__word {
  color: rgba(246,242,234,.92);
}
body.dark-mode .teima-mark__i {
  color: #C6A24A;
}
body.dark-mode .teima-mark__extension {
  color: rgba(246,242,234,.58);
}

/* Dark mode + pill activa */
body.dark-mode .tl-cats__pill--active .teima-mark__word,
body.dark-mode .tl-cats__pill[aria-selected="true"] .teima-mark__word {
  color: #F7F2EA;
}
body.dark-mode .tl-cats__pill--active .teima-mark__i,
body.dark-mode .tl-cats__pill[aria-selected="true"] .teima-mark__i {
  color: #C6A24A;
}
body.dark-mode .tl-cats__pill--active .teima-mark__extension,
body.dark-mode .tl-cats__pill[aria-selected="true"] .teima-mark__extension {
  color: #F7F2EA;
  opacity: 0.88;
}


/* ╔══════════════════════════════════════════════════════════
   FLOW DIAGRAM — Método TEIMA (.tl-flow)
   Reemplaza la tarjeta oscura .tl-metodo-preview__card
   ══════════════════════════════════════════════════════════╗ */

.tl-flow {
  position: relative;
  padding: clamp(24px, 3.5vw, 40px);
  border-radius: 24px;
  background:
    radial-gradient(circle at 88% 10%, rgba(198,162,74,0.16) 0%, transparent 38%),
    radial-gradient(circle at 8% 82%, rgba(198,162,74,0.07) 0%, transparent 42%),
    linear-gradient(148deg, rgba(255,255,255,0.93), rgba(251,247,238,0.98));
  border: 1px solid rgba(198,162,74,0.28);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.72),
    0 20px 60px rgba(33,24,8,0.09),
    0 4px 16px rgba(33,24,8,0.05);
}

.tl-flow__header {
  margin-bottom: clamp(18px, 2.5vw, 26px);
}

.tl-flow__eyebrow {
  display: block;
  font-size: .66rem;
  font-weight: 800;
  letter-spacing: .13em;
  text-transform: uppercase;
  color: #9A7418;
  margin-bottom: 8px;
}

.tl-flow__subtitle {
  font-size: .82rem;
  color: #4B5563;
  line-height: 1.55;
  margin: 0;
  max-width: 40ch;
}

/* Grid de 4 nodos */
.tl-flow__grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
  align-items: stretch;
}

/* Nodo base */
.tl-flow__node {
  position: relative;
  padding: 18px 14px;
  border-radius: 16px;
  background: rgba(255,255,255,0.80);
  border: 1px solid rgba(198,162,74,0.20);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.80),
    0 6px 20px rgba(45,32,10,0.06);
}

/* Flecha conectora entre nodos */
.tl-flow__node:not(:last-child)::after {
  content: "→";
  position: absolute;
  right: -11px;
  top: 50%;
  transform: translateY(-50%);
  color: rgba(184,138,29,0.60);
  font-size: .74rem;
  font-weight: 900;
  z-index: 2;
  pointer-events: none;
  line-height: 1;
}

/* Numeración dorada */
.tl-flow__number {
  display: inline-flex;
  width: 30px;
  height: 30px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  margin-bottom: 11px;
  color: #6F4E00;
  background: linear-gradient(145deg, #fff3bf, #d4a02b);
  border: 1px solid rgba(111,78,0,0.18);
  font-weight: 800;
  font-size: .70rem;
  letter-spacing: .02em;
  flex-shrink: 0;
}

.tl-flow__node-title {
  display: block;
  color: #111827;
  font-weight: 700;
  font-size: .84rem;
  letter-spacing: -.018em;
  margin-bottom: 6px;
  line-height: 1.3;
}

.tl-flow__node-text {
  color: #4B5563;
  line-height: 1.55;
  font-size: .77rem;
  margin: 0;
}

/* Paso 03 — énfasis criterio humano (violeta discreto) */
.tl-flow__node--highlight {
  border-color: rgba(75,46,131,0.18);
  background: rgba(255,255,255,0.88);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.80),
    0 10px 28px rgba(75,46,131,0.08),
    0 2px 8px rgba(75,46,131,0.04);
}

/* ── Responsive .tl-flow ─────────────────────────────── */

@media (max-width: 860px) {
  .tl-flow {
    max-width: 560px;
  }

  .tl-flow__grid {
    grid-template-columns: repeat(2, 1fr);
    gap: 10px;
  }

  .tl-flow__node:not(:last-child)::after {
    display: none;
  }
}

@media (max-width: 480px) {
  .tl-flow__grid {
    grid-template-columns: 1fr;
    gap: 8px;
  }

  .tl-flow__subtitle {
    max-width: 100%;
    font-size: .80rem;
  }
}

/* Dark mode */
body.dark-mode .tl-flow {
  background:
    radial-gradient(circle at 88% 10%, rgba(198,162,74,0.10) 0%, transparent 38%),
    linear-gradient(148deg, rgba(30,24,44,0.96), rgba(18,14,28,0.99));
  border-color: rgba(198,162,74,0.18);
  box-shadow:
    0 20px 60px rgba(0,0,0,0.35),
    0 4px 16px rgba(0,0,0,0.20);
}

body.dark-mode .tl-flow__eyebrow {
  color: rgba(198,162,74,0.72);
}

body.dark-mode .tl-flow__subtitle {
  color: rgba(246,242,234,0.52);
}

body.dark-mode .tl-flow__node {
  background: rgba(255,255,255,0.04);
  border-color: rgba(198,162,74,0.14);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.05),
    0 8px 24px rgba(0,0,0,0.22);
}

body.dark-mode .tl-flow__node-title {
  color: rgba(246,242,234,0.88);
}

body.dark-mode .tl-flow__node-text {
  color: rgba(246,242,234,0.46);
}

body.dark-mode .tl-flow__node--highlight {
  border-color: rgba(75,46,131,0.28);
  background: rgba(75,46,131,0.08);
}


/* ╔══════════════════════════════════════════════════════════
   METHOD FLOW PANEL — Flujo editorial premium
   Reemplaza .tl-flow (cuatro cajitas estrechas)
   ══════════════════════════════════════════════════════════╗ */

.tl-method-flow__panel {
  position: relative;
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 28px;
  padding: clamp(36px, 4.5vw, 52px) clamp(32px, 4vw, 46px);
  border-radius: 28px;
  background:
    radial-gradient(circle at 82% 10%, rgba(198,162,74,0.17) 0%, transparent 36%),
    radial-gradient(circle at 8%  88%, rgba(198,162,74,0.07) 0%, transparent 44%),
    linear-gradient(148deg, rgba(255,255,255,0.94), rgba(251,247,238,0.98));
  border: 1px solid rgba(198,162,74,0.26);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.76),
    0 28px 80px rgba(33,24,8,0.10),
    0 4px 20px rgba(33,24,8,0.06);
}

/* Línea conectora horizontal dorada */
.tl-method-flow__line {
  position: absolute;
  left: clamp(60px, 6.5vw, 80px);
  right: clamp(60px, 6.5vw, 80px);
  top: clamp(56px, 6vw, 72px);
  height: 1px;
  background: linear-gradient(90deg,
    transparent 0%,
    rgba(198,162,74,0.40) 15%,
    rgba(198,162,74,0.55) 50%,
    rgba(198,162,74,0.40) 85%,
    transparent 100%);
  pointer-events: none;
}

/* Cada paso */
.tl-method-step {
  position: relative;
  z-index: 1;
  min-width: 0;
}

/* Número dorado */
.tl-method-step__number {
  display: flex;
  width: 42px;
  height: 42px;
  align-items: center;
  justify-content: center;
  border-radius: 999px;
  margin-bottom: 22px;
  color: #6F4E00;
  background: linear-gradient(145deg, #fff3bf, #d6a12f);
  border: 1px solid rgba(111,78,0,0.22);
  font-weight: 800;
  font-size: .80rem;
  letter-spacing: .02em;
  box-shadow: 0 6px 18px rgba(111,78,0,0.18);
  flex-shrink: 0;
}

.tl-method-step__title {
  margin: 0 0 10px;
  color: #111827;
  font-size: clamp(.96rem, 1.2vw, 1.06rem);
  font-weight: 700;
  letter-spacing: -.02em;
  line-height: 1.25;
}

.tl-method-step__text {
  margin: 0;
  color: #4B5563;
  font-size: clamp(.86rem, 1vw, .95rem);
  line-height: 1.62;
}

/* Paso 03 — énfasis criterio humano */
.tl-method-step--focus .tl-method-step__title {
  color: #4B2E83;
}

/* ── Responsive ───────────────────────────────────────────── */

@media (max-width: 820px) {
  .tl-method-flow__panel {
    grid-template-columns: 1fr;
    gap: 28px;
    padding: clamp(28px, 4vw, 36px) clamp(22px, 4vw, 30px);
  }

  /* Línea vertical en móvil */
  .tl-method-flow__line {
    left: clamp(36px, 5vw, 48px);
    right: auto;
    top: clamp(40px, 5vw, 52px);
    bottom: clamp(40px, 5vw, 52px);
    width: 1px;
    height: auto;
    background: linear-gradient(180deg,
      transparent 0%,
      rgba(198,162,74,0.40) 15%,
      rgba(198,162,74,0.55) 55%,
      rgba(198,162,74,0.40) 85%,
      transparent 100%);
  }

  /* Layout horizontal: número | contenido */
  .tl-method-step {
    display: grid;
    grid-template-columns: 50px 1fr;
    column-gap: 18px;
    align-items: start;
  }

  .tl-method-step__number {
    margin-bottom: 0;
    width: 38px;
    height: 38px;
  }

  .tl-method-step__body {
    padding-top: 3px;
  }
}

@media (max-width: 480px) {
  .tl-method-flow__panel {
    gap: 22px;
    padding: 24px 20px;
  }

  .tl-method-step {
    grid-template-columns: 44px 1fr;
    column-gap: 14px;
  }

  .tl-method-step__number {
    width: 34px;
    height: 34px;
    font-size: .74rem;
  }

  .tl-method-step__title {
    font-size: .94rem;
  }

  .tl-method-step__text {
    font-size: .84rem;
  }
}

/* Dark mode */
body.dark-mode .tl-method-flow__panel {
  background:
    radial-gradient(circle at 82% 10%, rgba(198,162,74,0.10) 0%, transparent 36%),
    linear-gradient(148deg, rgba(26,20,40,0.97), rgba(15,11,24,0.99));
  border-color: rgba(198,162,74,0.16);
  box-shadow:
    0 28px 80px rgba(0,0,0,0.40),
    0 4px 20px rgba(0,0,0,0.24);
}

body.dark-mode .tl-method-step__title {
  color: rgba(246,242,234,0.90);
}

body.dark-mode .tl-method-step__text {
  color: rgba(246,242,234,0.50);
}

body.dark-mode .tl-method-step--focus .tl-method-step__title {
  color: rgba(166,136,214,0.85);
}


/* ╔══════════════════════════════════════════════════════════
   DIAGONAL DIAGRAM — Método TEIMA (.tl-diagram)
   Staircase ascendente: 01 abajo-izq → 04 arriba-der
   Reemplaza .tl-method-flow__panel
   ══════════════════════════════════════════════════════════╗ */

.tl-diagram {
  position: relative;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  gap: 0;
  padding: clamp(40px, 5vw, 56px) clamp(28px, 3.5vw, 44px) clamp(36px, 4.5vw, 52px);
  border-radius: 28px;
  background:
    radial-gradient(circle at 84% 10%, rgba(198,162,74,0.18) 0%, transparent 38%),
    radial-gradient(circle at 6%  88%, rgba(198,162,74,0.07) 0%, transparent 44%),
    linear-gradient(148deg, rgba(255,255,255,0.95), rgba(251,247,238,0.98));
  border: 1px solid rgba(198,162,74,0.26);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.78),
    0 28px 80px rgba(33,24,8,0.10),
    0 4px 20px rgba(33,24,8,0.06);
}

/* SVG diagonal line — full-size, behind everything */
.tl-diagram__connector {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 0;
}

/* Cada paso */
.tl-diagram__step {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  z-index: 1;
  padding-left: 10px;
  padding-right: 10px;
}

/* Staircase ascending: 01 lowest → 04 highest */
.tl-diagram__step:nth-child(2) { padding-top: 136px; }
.tl-diagram__step:nth-child(3) { padding-top: 90px;  }
.tl-diagram__step:nth-child(4) { padding-top: 46px;  }
.tl-diagram__step:nth-child(5) { padding-top: 0;     }

/* Número — moneda dorada con relieve */
.tl-diagram__num {
  display: flex;
  width: 46px;
  height: 46px;
  border-radius: 999px;
  align-items: center;
  justify-content: center;
  color: #5f3f00;
  font-weight: 900;
  font-size: .82rem;
  letter-spacing: .02em;
  background:
    radial-gradient(circle at 32% 24%, rgba(255,255,255,.86) 0%, transparent 28%),
    linear-gradient(145deg, #fff1a8 0%, #d7a83a 46%, #8f6416 100%);
  border: 1px solid rgba(92,58,8,.36);
  box-shadow:
    0 14px 30px rgba(92,58,8,.22),
    inset 0 1px 0 rgba(255,255,255,.66),
    inset 0 -2px 4px rgba(92,58,8,.22);
  flex-shrink: 0;
  margin-bottom: 18px;
}

.tl-diagram__title {
  margin: 0 0 10px;
  color: #111827;
  font-size: clamp(.98rem, 1.2vw, 1.06rem);
  font-weight: 700;
  letter-spacing: -.022em;
  line-height: 1.25;
}

.tl-diagram__text {
  margin: 0;
  color: #4B5563;
  font-size: clamp(.86rem, 1vw, .92rem);
  line-height: 1.62;
  max-width: 17ch;
}

/* Paso 03 — criterio humano, énfasis violeta */
.tl-diagram__step--focus .tl-diagram__title {
  color: #4B2E83;
}

/* ── Responsive ───────────────────────────────────────────── */

@media (max-width: 820px) {
  .tl-diagram {
    display: block;
    padding: clamp(24px, 4vw, 34px) clamp(20px, 4vw, 28px);
  }

  /* Eliminar stagger */
  .tl-diagram__step:nth-child(2),
  .tl-diagram__step:nth-child(3),
  .tl-diagram__step:nth-child(4),
  .tl-diagram__step:nth-child(5) {
    padding-top: 0;
  }

  /* Ocultar SVG diagonal */
  .tl-diagram__connector {
    display: none;
  }

  /* Línea vertical con pseudo-elemento */
  .tl-diagram::before {
    content: '';
    position: absolute;
    left: clamp(33px, 5vw, 46px);
    top: clamp(34px, 4.5vw, 46px);
    bottom: clamp(34px, 4.5vw, 46px);
    width: 1px;
    background: linear-gradient(180deg,
      transparent 0%,
      rgba(198,162,74,0.42) 10%,
      rgba(198,162,74,0.52) 55%,
      rgba(198,162,74,0.42) 90%,
      transparent 100%);
  }

  /* Horizontal: número | contenido */
  .tl-diagram__step {
    display: grid;
    grid-template-columns: 52px 1fr;
    column-gap: 18px;
    align-items: start;
    text-align: left;
    padding: 0 0 28px;
  }

  .tl-diagram__step:last-child {
    padding-bottom: 0;
  }

  .tl-diagram__num {
    margin-bottom: 0;
    width: 38px;
    height: 38px;
    font-size: .76rem;
  }

  .tl-diagram__info {
    padding-top: 3px;
  }

  .tl-diagram__title {
    font-size: 1rem;
    margin-bottom: 6px;
  }

  .tl-diagram__text {
    max-width: 100%;
  }
}

@media (max-width: 480px) {
  .tl-diagram {
    padding: 22px 18px;
  }

  .tl-diagram__step {
    grid-template-columns: 44px 1fr;
    column-gap: 14px;
    padding-bottom: 22px;
  }

  .tl-diagram__num {
    width: 34px;
    height: 34px;
    font-size: .72rem;
  }

  .tl-diagram__title {
    font-size: .95rem;
  }

  .tl-diagram__text {
    font-size: .84rem;
  }
}

/* Dark mode */
body.dark-mode .tl-diagram {
  background:
    radial-gradient(circle at 84% 10%, rgba(198,162,74,0.10) 0%, transparent 38%),
    linear-gradient(148deg, rgba(26,20,40,0.97), rgba(15,11,24,0.99));
  border-color: rgba(198,162,74,0.16);
  box-shadow:
    0 28px 80px rgba(0,0,0,0.40),
    0 4px 20px rgba(0,0,0,0.24);
}

body.dark-mode .tl-diagram__title {
  color: rgba(246,242,234,0.90);
}

body.dark-mode .tl-diagram__text {
  color: rgba(246,242,234,0.50);
}

body.dark-mode .tl-diagram__step--focus .tl-diagram__title {
  color: rgba(166,136,214,0.85);
}

body.dark-mode .tl-diagram::before {
  background: linear-gradient(180deg,
    transparent 0%,
    rgba(198,162,74,0.35) 10%,
    rgba(198,162,74,0.42) 55%,
    rgba(198,162,74,0.35) 90%,
    transparent 100%);
}


/* ╔══════════════════════════════════════════════════════════
   TEIMA MARK — Variante heading
   Integrada como marca dentro del titular, no como etiqueta
   ══════════════════════════════════════════════════════════╗ */

.teima-mark--heading {
  display: inline-flex;
  align-items: baseline;
  gap: 0.26em;
  font-size: 1em;
  line-height: 1;
  margin-left: 0.08em;
  vertical-align: baseline;
  transform: translateY(0.01em);
}

.teima-mark--heading .teima-mark__word {
  font-size: 1em;
  font-weight: 800;
  letter-spacing: 0.025em;
  color: #111827;
  text-transform: uppercase;
}

.teima-mark--heading .teima-mark__i {
  color: #C6A24A;
}

.teima-mark--heading .teima-mark__extension {
  font-size: 0.48em;
  font-weight: 700;
  letter-spacing: 0.01em;
  color: #4B2E83;
  position: relative;
  top: -0.08em;
}

/* Dark mode */
body.dark-mode .teima-mark--heading .teima-mark__word {
  color: rgba(246,242,234,.90);
}

body.dark-mode .teima-mark--heading .teima-mark__extension {
  color: rgba(166,136,214,.88);
}


/* ╔══════════════════════════════════════════════════════════
   IMAGEN EDITORIAL — Tarjeta visual bajo el CTA de categoría
   .tl-cats__visual + .tl-cats__visual-caption
   ══════════════════════════════════════════════════════════╗ */

.tl-cats__visual {
  margin: 30px 0 26px;
  position: relative;
  overflow: hidden;
  border-radius: 26px;
  border: 1px solid rgba(198,162,74,.26);
  background: rgba(250,246,236,.60);
  box-shadow:
    0 20px 52px rgba(33,24,8,.10),
    inset 0 1px 0 rgba(255,255,255,.72);
}

.tl-cats__visual img {
  display: block;
  width: 100%;
  height: clamp(260px, 30vw, 360px);
  object-fit: cover;
  object-position: center;
  image-rendering: auto;
  filter: saturate(0.96) contrast(1.02);
  transition: transform .4s ease;
}

.tl-cats__visual:hover img {
  transform: scale(1.025);
}

/* Overlay dual: gradiente oscuro inferior + halo dorado esquina */
.tl-cats__visual::after {
  content: '';
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg, transparent 44%, rgba(17,24,39,.46) 100%),
    radial-gradient(circle at 84% 10%, rgba(198,162,74,.20), transparent 38%);
  pointer-events: none;
}

/* .tl-cats__visual-caption — eliminado del HTML, regla retenida para posible uso futuro */
/* .tl-cats__visual-caption { position: absolute; left: 20px; right: 20px; bottom: 18px; z-index: 1; } */

/* Dark mode */
body.dark-mode .tl-cats__visual {
  border-color: rgba(185,149,46,.18);
  box-shadow: 0 20px 52px rgba(0,0,0,.28);
}


/* ╔══════════════════════════════════════════════════════════
   MÉTODO TEIMA — Camino en S (reemplaza .tl-metodo-preview)
   .tl-method-path + hijos
   ══════════════════════════════════════════════════════════╗ */

.tl-method-path {
  background:
    radial-gradient(ellipse 68% 55% at 28% 42%, rgba(198,162,74,.06), transparent),
    linear-gradient(180deg, #FFFEF9 0%, #FAF7F0 100%);
  padding: 96px 0 80px;
  overflow: hidden;
}

.tl-method-path__inner {
  max-width: 1120px;
  margin: 0 auto;
  padding: 0 40px;
}

/* ── Cabecera centrada ── */
.tl-method-path__header {
  text-align: center;
  max-width: 640px;
  margin: 0 auto 52px;
}

.tl-method-path__title {
  font-size: clamp(1.50rem, 2.4vw, 2.05rem);
  font-weight: 700;
  color: #111827;
  line-height: 1.32;
  margin-top: 12px;
  letter-spacing: -0.01em;
}

/* ── Canvas: la pizarra donde vive la S ── */
.tl-method-path__canvas {
  position: relative;
  min-height: 480px;
}

/* ── SVG curva ── */
.tl-method-path__curve {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  overflow: visible;
  pointer-events: none; /* la curva/glow no captura eventos */
}
/* Curva: solo decorativa — sin pointer-events */

.tl-method-path__curve-glow {
  fill: none;
  stroke: rgba(198,162,74,.18);
  stroke-width: 10;
  stroke-linecap: round;
  filter: blur(6px);
}

.tl-method-path__curve-line {
  fill: none;
  stroke: rgba(198,162,74,.48);
  stroke-width: 1.5;
  stroke-linecap: round;
}

/* ── Tarjetas de paso ── */
.tl-method-path__step {
  position: absolute;
  z-index: 1;
  width: min(252px, 24%);
  padding: 24px 24px 22px;
  border-radius: 24px;
  background:
    radial-gradient(circle at 94% 4%, rgba(198,162,74,.09), transparent 38%),
    linear-gradient(150deg, #ffffff 0%, #fdf9f0 100%);
  border: 1px solid rgba(198,162,74,.26);
  box-shadow:
    0 18px 48px rgba(33,24,8,.09),
    0 4px 12px rgba(33,24,8,.05),
    inset 0 1px 0 rgba(255,255,255,.90);
  transition:
    transform .55s cubic-bezier(.16,1,.3,1),
    background .65s cubic-bezier(.16,1,.3,1),
    border-color .55s ease,
    box-shadow .65s cubic-bezier(.16,1,.3,1);
}

/* Posiciones alternantes: bajo → alto → bajo → alto */
.tl-method-path__step--one   { left: 5%;   top: 170px; }
.tl-method-path__step--two   { left: 28%;  top: 70px;  }
.tl-method-path__step--three { left: 52%;  top: 175px; }
.tl-method-path__step--four  { right: 5%;  top: 62px;  }

/* Paso 03 — acento violeta base */
.tl-method-path__step--three {
  border-color: rgba(75,46,131,.20);
  background:
    radial-gradient(circle at 94% 4%, rgba(75,46,131,.07), transparent 38%),
    linear-gradient(150deg, #ffffff 0%, #f9f6ff 100%);
}

/* ── HOVER — inversión dramática a oscuro ── */
.tl-method-path__step:hover {
  transform: translateY(-7px) scale(1.015);
  background: linear-gradient(150deg, #201608 0%, #2E1C08 100%);
  border-color: rgba(198,162,74,.70);
  box-shadow:
    0 34px 72px rgba(33,24,8,.26),
    0 8px 18px rgba(33,24,8,.14),
    inset 0 1px 0 rgba(198,162,74,.20);
}

.tl-method-path__step--three:hover {
  background: linear-gradient(150deg, #170E2C 0%, #221440 100%);
  border-color: rgba(75,46,131,.72);
  box-shadow:
    0 34px 72px rgba(20,8,44,.28),
    0 8px 18px rgba(20,8,44,.16),
    inset 0 1px 0 rgba(75,46,131,.24);
}

/* ── Esfera numérica — círculo perfecto garantizado ── */
.tl-method-path__num {
  /* Dimensiones fijas — nunca dependientes del contenido */
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  box-sizing: border-box;
  padding: 0;
  flex-shrink: 0;
  margin-bottom: 14px;

  /* Esfera dorada con volumen: luz desde arriba-izquierda */
  background: radial-gradient(circle at 36% 32%,
    rgba(255,248,210,.92)  0%,
    rgba(198,162,74, 1.0) 42%,
    rgba(152,115,28, .96) 78%,
    rgba(128, 92,16, .92) 100%
  );

  /* Tipografía */
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .10em;
  color: rgba(255,250,228,.96);
  text-shadow: 0 1px 3px rgba(90,60,0,.35);

  /* Sombra 3D: proyección + brillo interior + sombra interior */
  box-shadow:
    0  4px 14px rgba(198,162,74,.46),
    inset 0  2px 3px rgba(255,250,215,.68),
    inset 0 -2px 3px rgba(110, 78, 8,.32);

  transition:
    transform .55s cubic-bezier(.16,1,.3,1),
    background .65s ease,
    box-shadow .65s cubic-bezier(.16,1,.3,1),
    filter .55s ease;
}

/* Paso 03 — esfera violeta */
.tl-method-path__step--three .tl-method-path__num {
  background: radial-gradient(circle at 36% 32%,
    rgba(210,195,255,.88)  0%,
    rgba( 75, 46,131,1.0) 42%,
    rgba( 48, 28, 96,.96) 78%,
    rgba( 36, 18, 76,.92) 100%
  );
  box-shadow:
    0  4px 14px rgba(75,46,131,.44),
    inset 0  2px 3px rgba(210,195,255,.65),
    inset 0 -2px 3px rgba(24,  8, 58,.34);
}

/* Esfera en hover — más luminosa, más grande */
.tl-method-path__step:hover .tl-method-path__num {
  transform: scale(1.12);
  background: radial-gradient(circle at 36% 32%,
    rgba(255,253,232,1.0)  0%,
    rgba(220,182, 76,1.0) 42%,
    rgba(168,128, 28,.96) 80%
  );
  box-shadow:
    0  6px 22px rgba(198,162,74,.75),
    inset 0  2px 4px rgba(255,253,235,.85),
    inset 0 -2px 4px rgba(110, 78, 8,.42);
}

.tl-method-path__step--three:hover .tl-method-path__num {
  background: radial-gradient(circle at 36% 32%,
    rgba(230,220,255,1.0)  0%,
    rgba( 95, 62,160,1.0) 42%,
    rgba( 52, 30,108,.96) 80%
  );
  box-shadow:
    0  6px 22px rgba(75,46,131,.72),
    inset 0  2px 4px rgba(230,218,255,.82),
    inset 0 -2px 4px rgba(24,  8, 60,.44);
}

/* ── Título ── */
.tl-method-path__step-title {
  font-size: 1.04rem;
  font-weight: 700;
  color: #111827;
  margin: 0 0 8px;
  line-height: 1.20;
  letter-spacing: -.01em;
  transition: color .55s ease, opacity .55s ease;
}

.tl-method-path__step:hover .tl-method-path__step-title {
  color: rgba(252,246,228,.96);
}

.tl-method-path__step--three:hover .tl-method-path__step-title {
  color: rgba(238,232,255,.96);
}

/* ── Texto descriptivo ── */
.tl-method-path__step-text {
  font-size: .82rem;
  color: #4B5563;
  line-height: 1.60;
  margin: 0;
  transition: color .55s ease, opacity .55s ease;
}

.tl-method-path__step:hover .tl-method-path__step-text {
  color: rgba(210,198,170,.82);
}

.tl-method-path__step--three:hover .tl-method-path__step-text {
  color: rgba(198,186,228,.80);
}

/* ── Footer CTAs ── */
.tl-method-path__footer {
  display: flex;
  gap: 14px;
  justify-content: center;
  margin-top: 44px;
  flex-wrap: wrap;
}

/* ── Dark mode ── */
body.dark-mode .tl-method-path {
  background:
    radial-gradient(ellipse 68% 55% at 28% 42%, rgba(198,162,74,.04), transparent),
    linear-gradient(180deg, #1C1710 0%, #141210 100%);
}

body.dark-mode .tl-method-path__title { color: rgba(246,242,234,.90); }

body.dark-mode .tl-method-path__step {
  background:
    radial-gradient(circle at 94% 4%, rgba(198,162,74,.06), transparent 38%),
    linear-gradient(150deg, rgba(30,24,14,.92), rgba(22,16,8,.96));
  border-color: rgba(198,162,74,.18);
  box-shadow:
    0 18px 48px rgba(0,0,0,.28),
    inset 0 1px 0 rgba(198,162,74,.10);
}

body.dark-mode .tl-method-path__step:hover {
  background: linear-gradient(150deg, #0E0A04 0%, #180E02 100%);
  border-color: rgba(198,162,74,.75);
  box-shadow:
    0 34px 72px rgba(0,0,0,.44),
    inset 0 1px 0 rgba(198,162,74,.22);
}

body.dark-mode .tl-method-path__step--three {
  background:
    radial-gradient(circle at 94% 4%, rgba(75,46,131,.08), transparent 38%),
    linear-gradient(150deg, rgba(28,18,44,.92), rgba(20,12,34,.96));
  border-color: rgba(75,46,131,.26);
}

body.dark-mode .tl-method-path__step--three:hover {
  background: linear-gradient(150deg, #0A0618 0%, #110828 100%);
  border-color: rgba(75,46,131,.76);
}

body.dark-mode .tl-method-path__step-title { color: rgba(246,242,234,.88); }
body.dark-mode .tl-method-path__step-text  { color: rgba(175,168,154,.76); }

/* Dark mode hover text — override (same dark→light inversion still applies) */
body.dark-mode .tl-method-path__step:hover .tl-method-path__step-title  { color: rgba(252,246,228,.96); }
body.dark-mode .tl-method-path__step:hover .tl-method-path__step-text   { color: rgba(210,198,170,.80); }

body.dark-mode .tl-method-path__curve-glow { stroke: rgba(198,162,74,.10); }
body.dark-mode .tl-method-path__curve-line  { stroke: rgba(198,162,74,.34); }

/* ── Responsive ── */
@media (max-width: 920px) {
  .tl-method-path { padding: 72px 0 56px; }
  .tl-method-path__inner { padding: 0 28px; }
  .tl-method-path__canvas {
    min-height: 0;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }
  .tl-method-path__curve { display: none; }
  .tl-method-path__step {
    position: static;
    width: 100%;
    border-radius: 20px;
  }
}

@media (max-width: 600px) {
  .tl-method-path { padding: 56px 0 44px; }
  .tl-method-path__inner  { padding: 0 20px; }
  .tl-method-path__header { margin-bottom: 28px; }
  .tl-method-path__footer { gap: 10px; margin-top: 32px; }
  .tl-method-path__step { border-radius: 18px; }
  .tl-method-path__num  { width: 40px; height: 40px; font-size: .64rem; }
}


/* ============================================================
   TEIMA OFICINA · KIT BÁSICO — Página de producto
   Prefijo: kb-*
   ============================================================ */

/* ── Hero de producto ──────────────────────────────────────── */
.kb-hero {
  padding: clamp(4rem, 8vw, 6rem) 0 clamp(3rem, 6vw, 5rem);
  background: var(--bg-main);
  position: relative;
  overflow: hidden;
}
.kb-hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    radial-gradient(ellipse 55% 50% at -5% -10%, rgba(75,46,131,.07) 0%, transparent 65%),
    radial-gradient(ellipse 40% 40% at 98% 105%, rgba(185,149,46,.06) 0%, transparent 68%);
  pointer-events: none;
}
.kb-hero::after {
  content: "";
  position: absolute;
  top: 0;
  left: clamp(20px, 4vw, 56px);
  width: 1px;
  height: 56px;
  background: linear-gradient(to bottom, var(--gold), transparent);
}

.kb-hero__inner {
  display: grid;
  grid-template-columns: 1fr 420px;
  gap: clamp(40px, 6vw, 80px);
  align-items: center;
}

.kb-hero__title {
  font-size: clamp(2.1rem, 4.8vw, 3.6rem);
  font-weight: 900;
  color: var(--text-main);
  line-height: 1.08;
  letter-spacing: -.045em;
  margin: 0 0 18px;
}

.kb-hero__subtitle {
  font-size: clamp(.97rem, 1.7vw, 1.1rem);
  color: var(--text-secondary);
  max-width: 520px;
  margin: 0 0 28px;
  line-height: 1.72;
}

.kb-hero__price-row {
  display: flex;
  align-items: baseline;
  gap: 14px;
  margin-bottom: 32px;
  flex-wrap: wrap;
}
.kb-hero__price {
  font-size: 1.85rem;
  font-weight: 800;
  color: var(--purple-dark);
  letter-spacing: -.04em;
}
.kb-hero__price-note {
  font-size: .8rem;
  color: var(--text-muted);
  letter-spacing: .02em;
}

.kb-hero__actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

/* Tarjeta visual del hero */
.kb-visual-card {
  background: linear-gradient(148deg, var(--purple-dark) 0%, var(--purple) 100%);
  border-radius: var(--radius-xl);
  padding: 36px 32px;
  color: #fff;
  box-shadow: var(--shadow-lg);
  position: relative;
  overflow: hidden;
}
.kb-visual-card::before {
  content: "";
  position: absolute;
  bottom: -50px; right: -50px;
  width: 220px; height: 220px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(185,149,46,.18) 0%, transparent 70%);
}
.kb-visual-card::after {
  content: "";
  position: absolute;
  top: 0; left: 32px; right: 32px;
  height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.kb-visual-card__header { margin-bottom: 22px; }
.kb-visual-card__eyebrow {
  font-size: .67rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--gold-soft);
  opacity: .8;
  display: block;
  margin-bottom: 10px;
}
.kb-visual-card__line {
  width: 32px;
  height: 1.5px;
  background: linear-gradient(90deg, var(--gold), transparent);
}

.kb-visual-card__list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 11px;
  margin-bottom: 24px;
  position: relative;
  z-index: 1;
}
.kb-visual-card__list li {
  display: flex;
  align-items: center;
  gap: 9px;
  font-size: .83rem;
  color: rgba(246,242,234,.88);
  line-height: 1.4;
}

.kb-visual-card__footer {
  border-top: 1px solid rgba(255,255,255,.1);
  padding-top: 18px;
  position: relative;
  z-index: 1;
}
.kb-visual-card__claim {
  font-size: .78rem;
  font-style: italic;
  color: var(--gold-soft);
  opacity: .75;
  letter-spacing: .02em;
}

/* Pills de formato */
.kb-format-pill {
  display: inline-flex;
  align-items: center;
  font-size: .62rem;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  border-radius: 4px;
  padding: 2px 7px;
  flex-shrink: 0;
}
.kb-format-pill--pdf  { background: rgba(220,53,50,.15);  color: #c0352e; border: 1px solid rgba(220,53,50,.25); }
.kb-format-pill--docx { background: rgba(37,99,235,.12);  color: #2563eb; border: 1px solid rgba(37,99,235,.22); }
.kb-format-pill--txt  { background: rgba(107,122,62,.14); color: var(--olive); border: 1px solid rgba(107,122,62,.28); }
.kb-format-pill--md   { background: rgba(185,149,46,.13); color: var(--gold); border: 1px solid rgba(185,149,46,.28); }

/* En el hero card, usar versiones light sobre fondo oscuro */
.kb-visual-card .kb-format-pill--pdf  { background: rgba(255,100,90,.2);  color: #ffb3ae; border-color: rgba(255,100,90,.3); }
.kb-visual-card .kb-format-pill--docx { background: rgba(100,160,255,.18); color: #aed0ff; border-color: rgba(100,160,255,.28); }
.kb-visual-card .kb-format-pill--txt  { background: rgba(180,220,100,.15); color: #d4ef9a; border-color: rgba(180,220,100,.25); }
.kb-visual-card .kb-format-pill--md   { background: rgba(233,216,168,.16); color: var(--gold-soft); border-color: rgba(233,216,168,.28); }

@media (max-width: 960px) {
  .kb-hero__inner { grid-template-columns: 1fr; gap: 48px; }
  .kb-visual-card { max-width: 480px; }
}
@media (max-width: 600px) {
  .kb-hero__title { font-size: clamp(1.9rem, 8vw, 2.6rem); }
  .kb-hero__actions { flex-direction: column; }
  .kb-hero__actions .btn { width: 100%; justify-content: center; }
  .kb-hero__price { font-size: 1.5rem; }
}

/* ── Sección solución — Antes / Después ──────────────────── */
.kb-solucion {
  padding: clamp(72px, 9vw, 104px) 0;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.kb-solucion__grid {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0;
  align-items: start;
  margin-top: 8px;
}

.kb-solucion__col {
  padding: 32px;
  border-radius: var(--radius-lg);
}
.kb-solucion__col--antes {
  background: var(--bg-card);
  border: 1px solid var(--border);
}
.kb-solucion__col--despues {
  background: linear-gradient(150deg, var(--purple-dark) 0%, var(--purple) 100%);
  box-shadow: var(--shadow-md);
}

.kb-solucion__col-label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: 18px;
}
.kb-solucion__col--antes  .kb-solucion__col-label { color: var(--text-muted); }
.kb-solucion__col--despues .kb-solucion__col-label { color: var(--gold-soft); opacity: .8; }

.kb-solucion__divider {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 24px;
  align-self: center;
}
.kb-solucion__divider span {
  font-size: .78rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--text-muted);
  background: var(--bg-main);
  border: 1px solid var(--border);
  border-radius: 99px;
  padding: 5px 11px;
}

.kb-diff-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.kb-diff-list li {
  font-size: .88rem;
  line-height: 1.55;
  padding-left: 18px;
  position: relative;
}
.kb-diff-list li::before {
  content: "";
  position: absolute;
  left: 0; top: 8px;
  width: 6px; height: 6px;
  border-radius: 50%;
}
.kb-diff-list--bad  li { color: var(--text-secondary); }
.kb-diff-list--bad  li::before { background: var(--border-strong); }
.kb-diff-list--good li { color: rgba(246,242,234,.88); }
.kb-diff-list--good li::before { background: var(--gold); }

@media (max-width: 760px) {
  .kb-solucion__grid { grid-template-columns: 1fr; gap: 0; }
  .kb-solucion__divider { padding: 14px 0; }
  .kb-solucion__divider span { transform: rotate(90deg); }
}

/* ── Totales del kit ─────────────────────────────────────── */
.kb-totales {
  display: flex;
  justify-content: center;
  gap: 0;
  margin-top: 52px;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--bg-card);
}
.kb-total-item {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 28px 20px;
  border-right: 1px solid var(--border);
  gap: 6px;
}
.kb-total-item:last-child { border-right: none; }
.kb-total-item strong {
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--purple);
  letter-spacing: -.04em;
  line-height: 1;
}
.kb-total-item span {
  font-size: .78rem;
  color: var(--text-muted);
  letter-spacing: .04em;
  text-transform: uppercase;
  font-weight: 600;
  text-align: center;
}

@media (max-width: 560px) {
  .kb-totales { grid-template-columns: repeat(2,1fr); display: grid; }
  .kb-total-item { border-right: 1px solid var(--border); }
  .kb-total-item:nth-child(even) { border-right: none; }
  .kb-total-item:nth-child(3), .kb-total-item:nth-child(4) { border-top: 1px solid var(--border); }
}

/* ── Archivos ZIP ─────────────────────────────────────────── */
.kb-archivos {
  padding: clamp(72px, 9vw, 104px) 0;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.kb-zip-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 28px;
  margin-top: 8px;
}

.kb-zip-block {
  background: var(--bg-main);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
}

.kb-zip-block__header {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  margin-bottom: 14px;
}
.kb-zip-block__title {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: -.02em;
  width: 100%;
  margin-top: 10px;
}
.kb-zip-block__desc {
  font-size: .88rem;
  color: var(--text-secondary);
  margin-bottom: 20px;
  line-height: 1.65;
}
.kb-zip-block__items {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.kb-zip-block__items li {
  font-size: .86rem;
  color: var(--text-secondary);
  display: flex;
  align-items: center;
  gap: 9px;
  line-height: 1.45;
}

@media (max-width: 680px) {
  .kb-zip-grid { grid-template-columns: 1fr; }
}

/* ── Pasos de 15 minutos (sobre fondo oscuro) ─────────────── */
.kb-pasos-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 18px;
  margin-top: 8px;
}

.kb-paso {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-md);
  padding: 26px 22px;
  transition: background var(--t), border-color var(--t);
}
.kb-paso:hover {
  background: rgba(75,46,131,.18);
  border-color: rgba(185,149,46,.28);
}

.kb-paso__tiempo {
  display: inline-block;
  font-size: .68rem;
  font-weight: 800;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gold);
  margin-bottom: 12px;
}

.kb-paso h3 {
  font-size: .97rem;
  font-weight: 700;
  color: #F6F2EA;
  margin-bottom: 8px;
  letter-spacing: -.01em;
  line-height: 1.3;
}
.kb-paso p {
  font-size: .83rem;
  color: rgba(246,242,234,.5);
  line-height: 1.6;
}

.kb-pasos-nota {
  text-align: center;
  margin-top: 40px;
  font-size: .88rem;
  color: rgba(246,242,234,.45);
  max-width: 600px;
  margin-inline: auto;
  margin-top: 40px;
}

@media (max-width: 820px) {
  .kb-pasos-grid { grid-template-columns: repeat(2,1fr); }
}
@media (max-width: 520px) {
  .kb-pasos-grid { grid-template-columns: 1fr; }
}

/* ── Para quién ───────────────────────────────────────────── */
.kb-paraquien {
  padding: clamp(72px, 9vw, 104px) 0;
  background: var(--bg-main);
}

.kb-paraquien__grid {
  display: grid;
  grid-template-columns: 1.1fr .9fr;
  gap: 32px;
  margin-top: 8px;
}

.kb-paraquien__yes,
.kb-paraquien__no {
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 32px 28px;
}
.kb-paraquien__yes {
  background: var(--bg-card);
  border-top: 3px solid var(--purple);
}
.kb-paraquien__no {
  background: var(--bg-secondary);
  border-top: 3px solid var(--border-strong);
}

.kb-paraquien__label {
  font-size: .72rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: 18px;
}
.kb-paraquien__label--yes { color: var(--purple); }
.kb-paraquien__label--no  { color: var(--text-muted); }

.kb-perfiles-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.kb-perfiles-list li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: .88rem;
  color: var(--text-main);
  line-height: 1.5;
}
.kb-perfiles-list li svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 2px;
  color: var(--purple);
}
.kb-perfiles-list--no li { color: var(--text-secondary); }
.kb-perfiles-list--no li svg { color: var(--text-muted); }

.kb-paraquien__cta-note {
  margin-top: 20px;
  font-size: .82rem;
  color: var(--text-muted);
  font-style: italic;
}
.kb-paraquien__cta-note a {
  color: var(--purple);
  text-decoration: underline;
  text-underline-offset: 3px;
}

@media (max-width: 760px) {
  .kb-paraquien__grid { grid-template-columns: 1fr; }
}

/* ── Límites ──────────────────────────────────────────────── */
.kb-limites {
  padding: clamp(72px, 9vw, 104px) 0;
  background: var(--bg-secondary);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.kb-limites__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 8px;
}

.kb-limite-item {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 24px 22px;
  display: flex;
  gap: 14px;
  align-items: flex-start;
}
.kb-limite-icon {
  font-weight: 800;
  color: var(--gold);
  flex-shrink: 0;
  margin-top: 2px;
  font-size: 1.1rem;
}
.kb-limite-item p {
  font-size: .87rem;
  color: var(--text-secondary);
  line-height: 1.65;
  margin: 0;
}

@media (max-width: 820px) {
  .kb-limites__grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 520px) {
  .kb-limites__grid { grid-template-columns: 1fr; }
}

/* ── Diferenciador ────────────────────────────────────────── */
.kb-diferenciador {
  padding: clamp(72px, 9vw, 104px) 0;
  background: var(--bg-card);
  border-top: 1px solid var(--border);
  border-bottom: 1px solid var(--border);
}

.kb-dif__inner {
  max-width: 760px;
  margin: 0 auto;
}
.kb-dif__inner .section-title { text-align: left; }
.kb-dif__inner p {
  font-size: .95rem;
  color: var(--text-secondary);
  line-height: 1.72;
  margin-bottom: 16px;
}

.kb-dif__flujo {
  display: flex;
  align-items: center;
  gap: 0;
  margin: 36px 0;
  flex-wrap: wrap;
  gap: 12px;
}

.kb-flujo-paso {
  flex: 1;
  min-width: 140px;
  background: var(--bg-secondary);
  border: 1px solid var(--border);
  border-top: 2.5px solid var(--purple);
  border-radius: var(--radius-md);
  padding: 20px 18px;
}
.kb-flujo-paso:nth-child(3) { border-top-color: var(--gold); }
.kb-flujo-paso__num {
  display: block;
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: var(--purple);
  margin-bottom: 8px;
}
.kb-flujo-paso:nth-child(3) .kb-flujo-paso__num { color: var(--gold); }
.kb-flujo-paso p {
  font-size: .83rem;
  color: var(--text-main);
  line-height: 1.5;
  margin: 0;
}

.kb-flujo-arrow {
  flex-shrink: 0;
  color: var(--border-strong);
  width: 28px;
}
.kb-flujo-arrow svg { width: 100%; }

.kb-dif__cierre {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--purple-dark);
  font-style: italic;
  border-left: 3px solid var(--gold);
  padding-left: 18px;
  margin-top: 8px !important;
}

@media (max-width: 600px) {
  .kb-dif__flujo { flex-direction: column; }
  .kb-flujo-arrow { transform: rotate(90deg); }
  .kb-flujo-paso { width: 100%; }
}

/* ── Uso responsable ─────────────────────────────────────── */
.kb-responsable {
  padding: clamp(72px, 9vw, 104px) 0;
  background: var(--bg-main);
}

.kb-responsable__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
  margin-top: 8px;
}

.kb-resp-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-top: 2.5px solid var(--gold);
  border-radius: var(--radius-md);
  padding: 28px 24px;
  transition: box-shadow var(--t), transform var(--t);
}
.kb-resp-card:hover {
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}
.kb-resp-card__icon {
  display: block;
  width: 22px;
  height: 22px;
  color: var(--gold);
  margin-bottom: 18px;
}
.kb-resp-card h3 {
  font-size: .97rem;
  font-weight: 700;
  color: var(--text-main);
  margin-bottom: 10px;
  letter-spacing: -.01em;
}
.kb-resp-card p {
  font-size: .86rem;
  color: var(--text-secondary);
  line-height: 1.68;
  margin: 0;
}

@media (max-width: 760px) {
  .kb-responsable__grid { grid-template-columns: 1fr; }
}

/* ── CTA final ────────────────────────────────────────────── */
.kb-cta-final {
  padding: clamp(72px, 10vw, 112px) 0;
  background: linear-gradient(150deg, var(--purple-dark) 0%, var(--purple) 100%);
  position: relative;
  overflow: hidden;
}
.kb-cta-final::before {
  content: "";
  position: absolute;
  top: -80px; left: 50%;
  transform: translateX(-50%);
  width: 500px; height: 500px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(185,149,46,.14) 0%, transparent 65%);
  pointer-events: none;
}
.kb-cta-final::after {
  content: "";
  position: absolute;
  top: 0; left: 50%;
  transform: translateX(-50%);
  width: min(600px, 90%);
  height: 1.5px;
  background: linear-gradient(90deg, transparent, var(--gold), transparent);
}

.kb-cta-final__inner {
  max-width: 640px;
  margin: 0 auto;
  text-align: center;
  position: relative;
  z-index: 1;
}

.kb-cta-final__title {
  font-size: clamp(1.9rem, 4vw, 2.8rem);
  font-weight: 900;
  color: #F6F2EA;
  letter-spacing: -.04em;
  line-height: 1.1;
  margin: 12px 0 18px;
}

.kb-cta-final__desc {
  font-size: .97rem;
  color: rgba(246,242,234,.65);
  line-height: 1.7;
  margin-bottom: 28px;
  max-width: 540px;
  margin-inline: auto;
  margin-bottom: 28px;
}

.kb-cta-final__price {
  font-size: 2.2rem;
  font-weight: 900;
  color: var(--gold-soft);
  letter-spacing: -.04em;
  margin-bottom: 28px;
}

.kb-cta-final__actions {
  display: flex;
  gap: 14px;
  justify-content: center;
  flex-wrap: wrap;
  margin-bottom: 24px;
}
.kb-cta-final__actions .btn-secondary {
  color: rgba(246,242,234,.8);
  border-color: rgba(246,242,234,.25);
}
.kb-cta-final__actions .btn-secondary:hover {
  background: rgba(246,242,234,.07);
  border-color: var(--gold-soft);
  color: var(--gold-soft);
}

.kb-cta-final__microcopy {
  font-size: .75rem;
  color: rgba(246,242,234,.38);
  line-height: 1.7;
  letter-spacing: .02em;
}

@media (max-width: 520px) {
  .kb-cta-final__actions { flex-direction: column; align-items: center; }
  .kb-cta-final__actions .btn { width: 100%; justify-content: center; max-width: 320px; }
}
/* ── Pricing plan: secondary link "Ver Kit" ──────────────── */
.pricing-plan__see-kit {
  display: block;
  margin-top: 10px;
  text-align: center;
  font-size: .78rem;
  font-weight: 600;
  color: var(--purple-dark);
  letter-spacing: .01em;
  text-decoration: none;
  opacity: .72;
  transition: opacity var(--t);
}
.pricing-plan__see-kit::after {
  content: " →";
}
.pricing-plan__see-kit:hover {
  opacity: 1;
  text-decoration: underline;
}

/* ── CTA solicitud note ───────────────────────────────────── */
.kb-cta-final__solicitud {
  font-size: .72rem;
  color: rgba(246,242,234,.26);
  line-height: 1.6;
  letter-spacing: .02em;
  margin-top: 10px;
}

/* ── Product mockup (hero visual) ────────────────────────── */
.kb-product-mockup {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 8px 32px rgba(75,46,131,.10), 0 2px 8px rgba(0,0,0,.06);
}

.kb-product-mockup__bar {
  display: flex;
  align-items: center;
  gap: 7px;
  padding: 10px 16px;
  background: #E8E2D8;
  border-bottom: 1px solid var(--border);
}

.kb-product-mockup__dot {
  width: 11px;
  height: 11px;
  border-radius: 50%;
  flex-shrink: 0;
}
.kb-product-mockup__dot--red    { background: #EC6A5E; }
.kb-product-mockup__dot--yellow { background: #F4BF4F; }
.kb-product-mockup__dot--green  { background: #61C454; }

.kb-product-mockup__filename {
  font-size: .72rem;
  font-weight: 600;
  color: var(--text-muted);
  margin-left: 8px;
  letter-spacing: .01em;
  font-family: ui-monospace, 'Cascadia Code', 'Menlo', monospace;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.kb-product-mockup__body {
  padding: 20px 20px 16px;
}

.kb-product-mockup__label {
  font-size: .68rem;
  font-weight: 700;
  color: var(--text-muted);
  text-transform: uppercase;
  letter-spacing: .09em;
  margin: 0 0 14px;
}

.kb-product-mockup__footer {
  padding: 10px 20px 14px;
  border-top: 1px solid var(--border);
}

.kb-product-mockup__count {
  font-size: .71rem;
  color: var(--text-muted);
  letter-spacing: .02em;
}

/* Mock file rows */
.kb-mock-file {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 7px 10px;
  border-radius: 6px;
  font-size: .8rem;
  color: var(--text-secondary);
  line-height: 1.4;
  margin-bottom: 4px;
}
.kb-mock-file svg {
  flex-shrink: 0;
  width: 15px;
  height: 15px;
  color: var(--gold);
}
.kb-mock-file--featured {
  background: rgba(185,149,46,.07);
  border: 1px solid rgba(185,149,46,.18);
  font-weight: 600;
  color: var(--text-main);
  margin-bottom: 14px;
}

/* Mock folder groups */
.kb-mock-group {
  margin-bottom: 12px;
}
.kb-mock-group__title {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: .74rem;
  font-weight: 700;
  color: var(--purple-dark);
  letter-spacing: -.005em;
  margin: 0 0 6px;
  padding: 0 2px;
}
.kb-mock-group__title svg {
  flex-shrink: 0;
  width: 13px;
  height: 13px;
  color: var(--gold);
}
.kb-mock-group__files {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding-left: 18px;
}
.kb-mock-group__files li,
.kb-mock-group__files > * {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: .77rem;
  color: var(--text-secondary);
}

/* ── Vista rápida del paquete (T2) ────────────────────────── */
.kb-vista-rapida {
  padding: clamp(56px, 8vw, 88px) 0;
  background: var(--bg-main);
  border-top: 1px solid var(--border);
}

.kb-vr-card {
  background: var(--bg-card);
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  box-shadow: 0 4px 20px rgba(75,46,131,.06);
  margin-top: 12px;
}

.kb-vr-folders {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
}

.kb-vr-folder {
  padding: 28px 32px 24px;
}
.kb-vr-folder:first-child {
  border-right: 1px solid var(--border);
}

.kb-vr-folder__header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
}

.kb-vr-folder__icon {
  width: 18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--gold);
}

.kb-vr-folder__title {
  font-size: .77rem;
  font-weight: 700;
  color: var(--purple-dark);
  letter-spacing: .01em;
  font-family: ui-monospace, 'Cascadia Code', 'Menlo', monospace;
  word-break: break-all;
  margin: 0;
}

.kb-vr-files {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.kb-vr-files li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  font-size: .84rem;
  color: var(--text-secondary);
  line-height: 1.5;
}

.kb-vr-files .kb-format-pill {
  flex-shrink: 0;
  margin-top: 1px;
}

.kb-vr-totals {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 14px 24px;
  background: rgba(185,149,46,.06);
  border-top: 1px solid rgba(185,149,46,.18);
  font-size: .79rem;
  font-weight: 600;
  color: var(--text-muted);
  letter-spacing: .02em;
  flex-wrap: wrap;
}

.kb-vr-sep {
  color: var(--gold);
  font-weight: 400;
}

@media (max-width: 640px) {
  .kb-vr-folders { grid-template-columns: 1fr; }
  .kb-vr-folder:first-child { border-right: none; border-bottom: 1px solid var(--border); }
  .kb-vr-folder { padding: 22px 20px 18px; }
  .kb-vr-folder__title { font-size: .7rem; }
}

/* ── Perfiles narrativos (T3) ─────────────────────────────── */
.kb-perfiles-narrativos {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  margin-top: 4px;
  margin-bottom: 32px;
}

.kb-perfil-card {
  background: var(--bg-card);
  border: 1px solid var(--border);
  border-top: 3px solid var(--gold);
  border-radius: var(--radius-md);
  padding: 24px 22px 22px;
  display: flex;
  flex-direction: column;
  gap: 0;
  transition: box-shadow var(--t), transform var(--t);
}
.kb-perfil-card:hover {
  box-shadow: var(--shadow-sm);
  transform: translateY(-2px);
}

.kb-perfil-card__tag {
  font-size: .68rem;
  font-weight: 700;
  color: var(--gold);
  text-transform: uppercase;
  letter-spacing: .1em;
  margin: 0 0 10px;
}

.kb-perfil-card__title {
  font-size: .97rem;
  font-weight: 700;
  color: var(--text-main);
  letter-spacing: -.015em;
  line-height: 1.38;
  margin: 0 0 18px;
}

.kb-perfil-card__row {
  padding: 12px 0;
  border-top: 1px solid var(--border);
}
.kb-perfil-card__row:last-child {
  padding-bottom: 0;
}

.kb-perfil-card__row--ayuda {
  background: rgba(185,149,46,.05);
  border-radius: 6px;
  padding: 12px 10px;
  margin: 8px -2px 0;
  border-top: none;
}
.kb-perfil-card__row--ayuda .kb-perfil-card__label {
  color: var(--gold);
}

.kb-perfil-card__label {
  font-size: .68rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: var(--text-muted);
  margin: 0 0 5px;
}

.kb-perfil-card__row p:last-child {
  font-size: .84rem;
  color: var(--text-secondary);
  line-height: 1.64;
  margin: 0;
}

.kb-paraquien__no--standalone {
  margin-top: 12px;
  background: var(--bg-main);
  border: 1px solid var(--border);
  border-radius: var(--radius-md);
  padding: 22px 24px;
}

@media (max-width: 900px) {
  .kb-perfiles-narrativos { grid-template-columns: 1fr; }
}
@media (min-width: 640px) and (max-width: 900px) {
  .kb-perfiles-narrativos { grid-template-columns: repeat(2, 1fr); }
}

/* ── Comparativa visual prompt vs sistema (T4) ───────────── */
.kb-comparativa {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  gap: 0;
  margin: 32px 0 28px;
  border: 1.5px solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.kb-comparativa__col {
  padding: 22px 20px 20px;
}
.kb-comparativa__col--before {
  background: #F5F0E6;
}
.kb-comparativa__col--after {
  background: rgba(75,46,131,.04);
}

.kb-comparativa__header {
  font-size: .71rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin: 0 0 14px;
}
.kb-comparativa__col--before .kb-comparativa__header {
  color: var(--text-muted);
}
.kb-comparativa__col--after .kb-comparativa__header {
  color: var(--purple-dark);
}

.kb-comparativa__items {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.kb-comparativa__item {
  font-size: .83rem;
  line-height: 1.45;
  padding-left: 20px;
  position: relative;
}
.kb-comparativa__item::before {
  content: "";
  position: absolute;
  left: 0;
  top: .32em;
  width: 12px;
  height: 12px;
  border-radius: 50%;
  flex-shrink: 0;
}
.kb-comparativa__item--no {
  color: var(--text-muted);
}
.kb-comparativa__item--no::before {
  background: #D4C9B8;
}
.kb-comparativa__item--yes {
  color: var(--text-secondary);
  font-weight: 500;
}
.kb-comparativa__item--yes::before {
  background: var(--gold);
}

.kb-comparativa__vs {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 14px;
  font-size: .78rem;
  font-weight: 800;
  color: var(--text-muted);
  letter-spacing: .05em;
  background: var(--bg-card);
  border-left: 1px solid var(--border);
  border-right: 1px solid var(--border);
  writing-mode: vertical-rl;
}

@media (max-width: 600px) {
  .kb-comparativa {
    grid-template-columns: 1fr;
  }
  .kb-comparativa__vs {
    writing-mode: horizontal-tb;
    padding: 10px;
    border-left: none;
    border-right: none;
    border-top: 1px solid var(--border);
    border-bottom: 1px solid var(--border);
    font-size: .7rem;
  }
}

/* ── fin kb-* ─────────────────────────────────────────────── */
/* Corrección de orden móvil en formatos disponibles */
@media (max-width: 768px) {
  .pricing-premium-grid {
    display: grid;
  }

  .pricing-plan--basic {
    .pricing-plan--basic {   order: 1; }  .pricing-plan--featured {   order: 2; }  .pricing-plan--custom {   order: 3; }: 1;
  }

  .pricing-plan--featured {
    .pricing-plan--basic {   order: 1; }  .pricing-plan--featured {   order: 2; }  .pricing-plan--custom {   order: 3; }: 2;
  }

  .pricing-plan--custom {
    .pricing-plan--basic {   order: 1; }  .pricing-plan--featured {   order: 2; }  .pricing-plan--custom {   order: 3; }: 3;
  }
}