/* TS Core: secciones de servicio, preguntas y listas.
   Los colores llegan por variables desde los controles del widget,
   asi que aqui solo hay estructura y ritmo. */

.ts-aviso { color: #9AA2AE; font-size: 14px; }
.ts-aviso code { color: #C6FF3D; }

/* ── Secciones de servicio ───────────────────────────────── */

.ts-secs {
  width: 100%;
  --ts-col-c: 660px;
  --ts-texto: #C9CED6;
  color: var(--ts-texto);
  font-family: "Inter Tight", Inter, sans-serif;
  --ts-sep: 96px;
  --ts-gap: 64px;
  --ts-acento: #C6FF3D;
  --ts-filo: #262A31;
  display: flex;
  flex-direction: column;
  gap: var(--ts-sep);
}

/* Patron base: titular a la izquierda, contenido a la derecha.
   Los titulares quedan alineados en vertical y la pagina se escanea. */
.ts-sec {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, var(--ts-col-c));
  gap: var(--ts-gap);
  align-items: start;
}

.ts-sec__lado { position: relative; max-width: 520px; }

.ts-sec__n {
  display: block;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.22em;
  line-height: 1.6;
  margin-bottom: 14px;
  padding-left: 32px;
  position: relative;
}
.ts-sec__n::before {
  content: "";
  position: absolute;
  top: 8px;
  left: 0;
  width: 20px;
  height: 1px;
  background: var(--ts-acento);
}

.ts-sec__t {
  font-family: "Inter Tight", Inter, sans-serif;
  font-weight: 500;
  font-size: clamp(22px, 2vw, 28px);
  line-height: 1.25;
  letter-spacing: -0.02em;
  margin: 0;
}

.ts-sec__lead {
  font-family: "Inter Tight", Inter, sans-serif;
  font-weight: 400;
  font-size: clamp(17px, 1.4vw, 20px);
  line-height: 1.55;
  margin: 0 0 20px;
}

.ts-sec__b {
  color: var(--ts-texto);
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 16px;
  line-height: 1.8;
}
.ts-sec__b p { margin: 0 0 16px; }
.ts-sec__b p:last-child { margin-bottom: 0; }
.ts-sec__b strong { color: #FFFFFF; font-weight: 600; }
.ts-sec__b em { font-style: italic; }

/* Enlaces: el tema los pinta en su rosa por defecto */
.ts-sec__c a,
.ts-faq__a a {
  color: var(--ts-acento);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(198, 255, 61, .35);
  text-underline-offset: 3px;
  transition: text-decoration-color .18s ease;
}
.ts-sec__c a:hover,
.ts-faq__a a:hover { text-decoration-color: var(--ts-acento); }

/* ── Banda de imagen entre secciones ── */
.ts-banda {
  position: relative;
  margin: 0;
  border-radius: 16px;
  border: 1px solid var(--ts-filo);
  overflow: hidden;
}
.ts-banda__img {
  display: block;
  width: 100%;
  height: 400px;
  object-fit: cover;
  object-position: center;
}
/* Parallax: la imagen va mas grande que su caja para poder desplazarse sin
   descubrir el borde. El desplazamiento lo publica ts-motion.js. */
.ts-banda--parallax .ts-banda__img {
  transform: scale(1.18) translate3d(0, var(--ts-par, 0%), 0);
  will-change: transform;
}
@media (prefers-reduced-motion: reduce) {
  .ts-banda--parallax .ts-banda__img { transform: none; will-change: auto; }
}
/* Filo lima en un vertice, el mismo recurso del resto del sitio */
.ts-banda::after {
  content: "";
  position: absolute;
  width: 56px;
  height: 56px;
  top: 0;
  right: 0;
  border-top: 1px solid var(--ts-acento);
  border-right: 1px solid var(--ts-acento);
  border-top-right-radius: 16px;
  pointer-events: none;
}
.ts-banda__pie {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 40px 24px 16px;
  background: linear-gradient(to top, rgba(10, 11, 13, .85), rgba(10, 11, 13, 0));
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #9AA2AE;
}

/* Listas: vineta lima pequena, nunca disco por defecto */
.ts-sec__list {
  list-style: none;
  margin: 24px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.ts-sec__list li {
  color: var(--ts-texto);
  position: relative;
  padding-left: 26px;
  font-size: 15.5px;
  line-height: 1.6;
}
.ts-sec__list li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ts-acento);
}
.ts-sec__list strong { color: #FFFFFF; font-weight: 600; }

/* Destacado: filo completo de 1px, sin barra lateral gruesa */
.ts-sec__callout {
  color: var(--ts-texto);
  margin: 26px 0 0;
  padding: 20px 22px;
  border: 1px solid rgba(198, 255, 61, .22);
  border-radius: 12px;
  background: rgba(198, 255, 61, .04);
}
.ts-sec__callout-t {
  display: block;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ts-acento);
  margin-bottom: 8px;
}
.ts-sec__callout p { margin: 0; font-size: 15px; line-height: 1.7; }

/* Tabla: solo reglas hairline, sin cebra ni cajas */
.ts-sec__tabla-wrap { margin: 26px 0 0; overflow-x: auto; }
.ts-sec__tabla {
  width: 100%;
  border-collapse: collapse;
  font-family: inherit;
  font-size: 14.5px;
  color: var(--ts-texto);
}
.ts-sec__tabla caption {
  text-align: left;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: #9AA2AE;
  padding-bottom: 12px;
}
/* Solo reglas horizontales: el borde completo lo mete el navegador */
.ts-sec__tabla th,
.ts-sec__tabla td {
  text-align: left;
  padding: 13px 24px 13px 0;
  border: 0 none transparent;
  border-bottom: 1px solid var(--ts-filo);
  vertical-align: top;
  line-height: 1.5;
}
.ts-sec__tabla th:last-child,
.ts-sec__tabla td:last-child { padding-right: 0; }
.ts-sec__tabla tbody tr:last-child th,
.ts-sec__tabla tbody tr:last-child td { border-bottom: 0; }
.ts-sec__tabla strong { color: #FFFFFF; font-weight: 600; }
.ts-sec__tabla thead th {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #9AA2AE;
}
.ts-sec__tabla tbody th { color: #FFFFFF; font-weight: 500; padding-right: 32px; }

@media (max-width: 1024px) {
  .ts-secs { --ts-sep: 64px; --ts-gap: 32px; }
  .ts-sec { grid-template-columns: minmax(0, 1fr); }
  .ts-sec__lado { max-width: none; margin-bottom: 4px; }
  .ts-banda__pie { padding: 32px 18px 14px; }
}

/* ── Preguntas: sin acordeon, en columnas equilibradas ────── */

.ts-faq {
  --ts-acento: #C6FF3D;
  --ts-filo: #262A31;
  columns: 2;
  column-gap: 64px;
}

.ts-faq__i {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
  page-break-inside: avoid;
  margin-bottom: 36px;
  padding-bottom: 28px;
  border-bottom: 1px solid var(--ts-filo);
}

.ts-faq__q {
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -0.015em;
  line-height: 1.4;
  margin: 0 0 12px;
  display: flex;
  align-items: baseline;
  gap: 14px;
}

.ts-faq__n {
  flex: 0 0 auto;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.15em;
}

.ts-faq__a {
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 15.5px;
  line-height: 1.75;
  padding-left: 39px;
}
.ts-faq__a p { margin: 0 0 12px; }
.ts-faq__a p:last-child { margin-bottom: 0; }

@media (max-width: 767px) {
  .ts-faq { columns: 1; }
  .ts-faq__q { font-size: 16px; gap: 10px; }
  .ts-faq__a { padding-left: 0; }
}

/* ── Listas simples ──────────────────────────────────────── */

.ts-lista {
  --ts-acento: #C6FF3D;
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 12px 40px;
}
.ts-lista li {
  position: relative;
  padding-left: 26px;
  font-size: 15px;
  line-height: 1.6;
  font-family: "Inter Tight", Inter, sans-serif;
}
.ts-lista strong { font-weight: 600; }
.ts-lista--punto li::before {
  content: "";
  position: absolute;
  left: 4px;
  top: 9px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ts-acento);
}
.ts-lista--tick li { padding-left: 30px; }
.ts-lista--tick li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: rgba(198, 255, 61, .06);
  border: 1px solid rgba(198, 255, 61, .35);
}
.ts-lista--tick li::after {
  content: "";
  position: absolute;
  left: 5px;
  top: 8px;
  width: 8px;
  height: 4px;
  border-left: 1.5px solid var(--ts-acento);
  border-bottom: 1.5px solid var(--ts-acento);
  transform: rotate(-45deg);
}
.ts-lista--ninguna li { padding-left: 0; }


/* Banda deslizante ------------------------------------------------------- */
/* Dos pistas identicas una detras de otra: la animacion mueve el 100% de la
   primera y en ese instante la segunda ocupa su sitio exacto, asi que el
   bucle no tiene costura. Con una sola pista se ve el salto en cada vuelta. */
.ts-tira {
  display: flex;
  align-items: center;
  width: 100%;
  overflow: hidden;
  border-top: 1px solid #262A31;
  border-bottom: 1px solid #262A31;
  background: #0A0B0D;
}
.ts-tira__pista {
  display: flex;
  align-items: center;
  flex: 0 0 auto;
  animation: ts-tira-desliza 25s linear infinite;
}
.ts-banda__pieza {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 500;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: #9AA2AE;
  white-space: nowrap;
  padding: 0 36px;
}
.ts-tira__sep {
  color: #3A3F48;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
}
@keyframes ts-tira-desliza {
  from { transform: translateX(0); }
  to { transform: translateX(-100%); }
}
/* Quien pide que nada se mueva se queda la banda quieta, con su propio scroll. */
@media (prefers-reduced-motion: reduce) {
  .ts-tira { overflow-x: auto; }
  .ts-tira__pista { animation: none; }
  .ts-tira__pista[aria-hidden="true"] { display: none; }
}

/* Tira en modo tarjetas: el mismo carrusel, con cajas dentro de un panel. */
.ts-tira--tarjetas {
  height: auto;
  border: 1px solid #262A31;
  border-radius: 16px;
}
.ts-tira--tarjetas .ts-tira__pista { padding: 22px 0; gap: 18px; }
.ts-tira--tarjetas .ts-tira__pista + .ts-tira__pista { padding-left: 18px; }
.ts-tira__tarjeta {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 220px;
  width: 220px;
  height: 92px;
  box-sizing: border-box;
  padding: 18px 24px;
  border: 1px solid #262A31;
  border-radius: 20px;
  background: #111317;
}
/* El logo llega en el color de cada marca: se pasa a blanco y se baja para que
   la tira lea como una sola pieza y no como un muestrario de colores. */
.ts-tira__logo {
  display: block;
  max-width: 165px;
  max-height: 48px;
  width: auto;
  height: auto;
  object-fit: contain;
  filter: brightness(0) invert(1);
  opacity: .55;
}
.ts-tira__marca {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.1em;
  line-height: 1.6;
  text-transform: uppercase;
  color: #C9CED6;
  text-align: center;
}
@media (prefers-reduced-motion: reduce) {
  .ts-tira--tarjetas { overflow-x: auto; }
}

/* Tira de articulos ------------------------------------------------------ */
.ts-apuntes {
  --ts-acento: #C6FF3D;
  display: flex;
  gap: 24px;
  align-items: stretch;
  overflow-x: auto;
  padding: 4px 4px 8px 0;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: #3A3F48 transparent;
}
.ts-apuntes::-webkit-scrollbar { height: 6px; }
.ts-apuntes::-webkit-scrollbar-thumb { background: #3A3F48; border-radius: 99px; }
.ts-apuntes::-webkit-scrollbar-track { background: transparent; }
.ts-apunte {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  width: 360px;
  box-sizing: border-box;
  scroll-snap-align: start;
  padding: 26px 24px 22px;
  background: #111317;
  border: 1px solid #262A31;
  border-radius: 12px;
  text-decoration: none;
  transition: border-color .35s cubic-bezier(.4,0,.2,1), transform .35s cubic-bezier(.4,0,.2,1);
}
.ts-apunte:hover { border-color: var(--ts-acento); transform: translateY(-2px); }
.ts-apunte__rot {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: #9AA2AE;
  margin-bottom: 8px;
}
.ts-apunte__t {
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.4;
  letter-spacing: -0.015em;
  color: #FFFFFF;
  margin: 0 0 10px;
}
.ts-apunte__d {
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 14px;
  line-height: 1.6;
  color: #C9CED6;
  margin: 0 0 18px;
}
/* La flecha se queda abajo del todo aunque los textos midan distinto. */
.ts-apunte__fl {
  margin-top: auto;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 18px;
  color: var(--ts-acento);
  opacity: 0;
  transform: translateX(-10px);
  transition: opacity .35s ease, transform .35s ease;
}
.ts-apunte:hover .ts-apunte__fl { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) {
  .ts-apunte, .ts-apunte__fl { transition: none; }
  .ts-apunte:hover { transform: none; }
  .ts-apunte__fl { opacity: 1; transform: none; }
}

/* La marca con ficha propia es un enlace; la que no, una caja. */
a.ts-tira__tarjeta { text-decoration: none; transition: border-color .3s ease; }
a.ts-tira__tarjeta:hover { border-color: #C6FF3D; }

/* Tira de casos ---------------------------------------------------------- */
.ts-casos {
  --ts-acento: #C6FF3D;
  display: flex;
  gap: 20px;
  align-items: stretch;
  overflow-x: auto;
  padding: 0 4px 8px;
  scroll-snap-type: x mandatory;
  scrollbar-width: thin;
  scrollbar-color: #3A3F48 transparent;
}
.ts-casos::-webkit-scrollbar { height: 6px; }
.ts-casos::-webkit-scrollbar-thumb { background: #3A3F48; border-radius: 99px; }
.ts-casos::-webkit-scrollbar-track { background: transparent; }
.ts-caso {
  display: flex;
  flex-direction: column;
  flex: 0 0 auto;
  width: 437px;
  box-sizing: border-box;
  scroll-snap-align: start;
  padding: 28px;
  background: #111317;
  border: 1px solid #262A31;
  border-radius: 12px;
}
.ts-caso__c {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 34px;
  line-height: 1;
  color: var(--ts-acento);
  margin-bottom: 8px;
}
.ts-caso__t {
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 15.5px;
  line-height: 1.65;
  color: #E6E8EC;
  margin: 0 0 22px;
}
/* El pie se pega abajo aunque los textos midan distinto. */
.ts-caso__pie { display: flex; align-items: center; gap: 12px; margin-top: auto; }
.ts-caso__av {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 46px;
  width: 46px;
  height: 46px;
  border-radius: 50%;
  background: var(--ts-acento);
  color: #0A0A0A;
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
}
.ts-caso__id { display: flex; flex-direction: column; gap: 2px; }
.ts-caso__n {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #FFFFFF;
}
.ts-caso__e {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: #9AA2AE;
}
.ts-caso__r {
  align-self: flex-end;
  margin-top: 14px;
  padding: 5px 11px;
  border: 1px solid rgba(150,191,72,.2);
  background: rgba(150,191,72,.1);
  border-radius: 50px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--ts-acento);
}

/* Bloques de proyecto ---------------------------------------------------- */
.ts-pr {
  --ts-acento: #C6FF3D;
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 24px;
}
.ts-pr__c {
  padding: 26px 24px;
  background: #111317;
  border: 1px solid #262A31;
  border-radius: 16px;
}
.ts-pr__n {
  display: block;
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-size: 40px;
  line-height: .95;
  letter-spacing: -.04em;
  color: var(--ts-acento);
  margin-bottom: 14px;
}
.ts-pr__t {
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 18px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -.015em;
  color: #FFFFFF;
  margin: 0 0 10px;
}
.ts-pr__d {
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 15px;
  line-height: 1.7;
  color: #C9CED6;
  margin: 0;
}
.ts-pr__rot {
  display: block;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: #9AA2AE;
  margin-bottom: 14px;
}
.ts-pr__ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
/* Vineta lima pequena, nunca el disco por defecto del navegador. */
.ts-pr__li {
  position: relative;
  padding-left: 20px;
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 15px;
  line-height: 1.6;
  color: #C9CED6;
}
.ts-pr__li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ts-acento);
}
@media (max-width: 767px) { .ts-pr { grid-template-columns: 1fr; } }

/* Enlaces dentro de los widgets propios: sin esto salen en el rosa de Hello. */
.ts-campo a,
.ts-pr__d a,
.ts-caso__t a,
.ts-lista a {
  color: #C6FF3D;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-decoration-color: rgba(198, 255, 61, .35);
  text-underline-offset: 3px;
  transition: text-decoration-color .18s ease;
}
.ts-campo a:hover,
.ts-pr__d a:hover,
.ts-caso__t a:hover,
.ts-lista a:hover { text-decoration-color: #C6FF3D; }
/* La cursiva del cierre es cita, no enfasis suelto: se apoya en la serif. */
.ts-campo em { font-style: italic; }

/* Cierre de entrada ------------------------------------------------------ */
.ts-cierre {
  --ts-acento: #C6FF3D;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 52px 40px;
  border: 1px solid var(--ts-acento);
  border-radius: 22px;
}
.ts-cierre__rot {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #9AA2AE;
  margin-bottom: 18px;
}
.ts-cierre__t {
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: clamp(26px, 3vw, 40px);
  font-weight: 500;
  line-height: 1.15;
  letter-spacing: -.025em;
  color: #FFFFFF;
  margin: 0 0 16px;
  max-width: 820px;
}
.ts-cierre__t .pt { font-family: "Instrument Serif", Georgia, serif; font-style: italic; color: var(--ts-acento); }
.ts-cierre__d {
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 17px;
  line-height: 1.7;
  color: #C9CED6;
  margin: 0 0 30px;
  max-width: 720px;
}
.ts-cierre__b { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 14px 22px; }
.ts-cierre__p {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 13px 22px;
  border-radius: 999px;
  background: var(--ts-acento);
  color: #0A0A0A;
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: transform .18s ease, box-shadow .18s ease;
}
.ts-cierre__p:hover { transform: translateY(-1px); box-shadow: 0 8px 24px rgba(198,255,61,.16); color: #0A0A0A; }
.ts-cierre__s {
  display: inline-flex;
  align-items: center;
  padding: 13px 22px;
  border: 1px solid #3A3F48;
  border-radius: 999px;
  color: #FFFFFF;
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  transition: border-color .18s ease;
}
.ts-cierre__s:hover { border-color: var(--ts-acento); color: #FFFFFF; }
@media (max-width: 767px) {
  .ts-cierre { padding: 36px 22px; }
  .ts-cierre__p, .ts-cierre__s { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) { .ts-cierre__p { transition: none; } .ts-cierre__p:hover { transform: none; } }

/* Rejilla de articulos ---------------------------------------------------- */
.ts-ab { --ts-acento: #C6FF3D; }
/* Los filtros se pegan arriba al desplazar: con trece temas, volver a subir
   para cambiar de tema es la friccion mas tonta que puede tener un listado. */
.ts-ab__f {
  position: sticky;
  top: 77px;
  z-index: 5;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 16px 0 18px;
  margin-bottom: 22px;
  background: rgba(10, 11, 13, .86);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid #262A31;
}
.ts-ab .ts-ab__c {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  border: 1px solid #262A31;
  border-radius: 999px;
  background: transparent;
  color: #9AA2AE;
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color .2s ease, color .2s ease, background .2s ease;
}
.ts-ab .ts-ab__c:hover { color: #FFFFFF; border-color: #3A3F48; background: transparent; }
.ts-ab .ts-ab__c.is-on {
  color: var(--ts-acento);
  border-color: var(--ts-acento);
  background: rgba(198, 255, 61, .1);
}
.ts-ab__n { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 11px; opacity: .7; }
.ts-ab__g { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 20px 20px; }
.ts-ab__a[hidden] { display: none; }
.ts-ab__l {
  display: flex;
  flex-direction: column;
  height: 100%;
  text-decoration: none;
  color: inherit;
}
.ts-ab__im {
  display: block;
  margin-bottom: 20px;
  border: 1px solid rgba(255, 255, 255, .06);
  border-radius: 10px;
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.ts-ab__im img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform .5s cubic-bezier(.4,0,.2,1); }
.ts-ab__l:hover .ts-ab__im img { transform: scale(1.04); }
.ts-ab__m { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.ts-ab__e {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--ts-acento);
}
.ts-ab__i {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
  letter-spacing: .08em;
  color: rgba(245, 245, 241, .35);
}
.ts-ab__t {
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 20px;
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -.02em;
  color: #FFFFFF;
  margin: 0 0 12px;
}
.ts-ab__d {
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 14.5px;
  line-height: 1.65;
  color: rgba(245, 245, 241, .68);
  margin: 0 0 22px;
}
/* El pie se pega abajo: si no, con titulares de distinto largo bailan. */
.ts-ab__p {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: auto;
  padding-top: 14px;
  border-top: 1px solid #262A31;
}
.ts-ab__r {
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: rgba(245, 245, 241, .55);
}
.ts-ab__fl { color: var(--ts-acento); opacity: 0; transform: translateX(-8px); transition: opacity .3s ease, transform .3s ease; }
.ts-ab__l:hover .ts-ab__fl { opacity: 1; transform: none; }
.ts-ab__vacio { color: #9AA2AE; font-family: "Inter Tight", Inter, sans-serif; }
@media (max-width: 1024px) { .ts-ab__g { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767px) { .ts-ab__g { grid-template-columns: 1fr; } .ts-ab__f { top: 0; } }
@media (prefers-reduced-motion: reduce) {
  .ts-ab__im img, .ts-ab__fl, .ts-ab__c { transition: none; }
  .ts-ab__l:hover .ts-ab__im img { transform: none; }
  .ts-ab__fl { opacity: 1; transform: none; }
}

/* Rejilla de proyectos ---------------------------------------------------- */
.ts-ab--pf .ts-ab__g { gap: 28px; }
.ts-pf__l { display: flex; flex-direction: column; text-decoration: none; color: inherit; }
.ts-pf__m {
  display: block;
  aspect-ratio: 4 / 3;
  background: #111317;
  border: 1px solid #262A31;
  border-radius: 16px;
  overflow: hidden;
  transition: border-color .3s ease;
}
.ts-pf__m img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: top center; transition: transform .5s cubic-bezier(.4,0,.2,1); }
.ts-pf__l:hover .ts-pf__m { border-color: #C6FF3D; }
.ts-pf__l:hover .ts-pf__m img { transform: scale(1.03); }
.ts-pf__p { display: flex; align-items: baseline; gap: 12px; padding: 14px 4px 0; }
.ts-pf__n {
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 17px;
  font-weight: 500;
  letter-spacing: -.015em;
  color: #FFFFFF;
}
/* El sector va a la derecha del nombre y se corta antes de romper la fila. */
.ts-pf__t {
  margin-left: auto;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  letter-spacing: .08em;
  color: #9AA2AE;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 55%;
}
@media (prefers-reduced-motion: reduce) {
  .ts-pf__m, .ts-pf__m img { transition: none; }
  .ts-pf__l:hover .ts-pf__m img { transform: none; }
}

/* Comparativa ------------------------------------------------------------- */
.ts-cmp { --ts-acento: #C6FF3D; }
.ts-cmp--f { display: flex; flex-direction: column; gap: 0; }
.ts-cmp__r { padding: 40px 0; border-top: 1px solid #262A31; }
.ts-cmp__r:first-child { border-top: 0; padding-top: 0; }
.ts-cmp__t {
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 26px;
  font-weight: 500;
  line-height: 1.25;
  letter-spacing: -.02em;
  color: #FFFFFF;
  margin: 0 0 24px;
}
.ts-cmp__n {
  display: block;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .22em;
  color: var(--ts-acento);
  margin-bottom: 10px;
}
.ts-cmp__g { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.ts-cmp__c {
  padding: 24px;
  background: #111317;
  border: 1px solid #262A31;
  border-radius: 16px;
}
/* La que gana en ese punto se marca con el filo lima, no con un fondo verde:
   en una comparativa honesta cada una gana en unas cosas y pierde en otras. */
.ts-cmp__c.gana { border-color: var(--ts-acento); }
.ts-cmp__cl {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: #9AA2AE;
  margin-bottom: 12px;
}
.ts-cmp__c.gana .ts-cmp__cl { color: var(--ts-acento); }
.ts-cmp__w { color: var(--ts-acento); font-size: 12px; }
.ts-cmp__c p {
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 15.5px;
  line-height: 1.75;
  color: #C9CED6;
  margin: 0;
}
.ts-cmp--v { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.ts-cmp__vc {
  padding: 30px;
  background: #111317;
  border: 1px solid #262A31;
  border-radius: 16px;
}
.ts-cmp__vl {
  display: block;
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: -.02em;
  color: #FFFFFF;
  margin-bottom: 18px;
}
.ts-cmp__vt { font-family: "Inter Tight", Inter, sans-serif; font-size: 15.5px; line-height: 1.75; color: #C9CED6; margin: 0 0 14px; }
.ts-cmp__vu { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.ts-cmp__vu li {
  position: relative;
  padding-left: 26px;
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 15.5px;
  line-height: 1.65;
  color: #C9CED6;
}
.ts-cmp__vu li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 10px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--ts-acento);
}
@media (max-width: 767px) {
  .ts-cmp__g, .ts-cmp--v { grid-template-columns: 1fr; }
  .ts-cmp__r { padding: 30px 0; }
}

/* Bloques numerados ------------------------------------------------------- */
.ts-blq { --ts-acento: #C6FF3D; }
.ts-blq__t {
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 19px;
  font-weight: 500;
  line-height: 1.45;
  letter-spacing: -.015em;
  color: #FFFFFF;
  margin: 0 0 10px;
}
.ts-blq__d {
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 15.5px;
  line-height: 1.75;
  color: #C9CED6;
  margin: 0;
}
.ts-blq__r {
  display: block;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: .2em;
  text-transform: uppercase;
  color: var(--ts-acento);
  margin-bottom: 10px;
}
.ts-blq__u { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.ts-blq__u li {
  position: relative;
  padding-left: 22px;
  font-family: "Inter Tight", Inter, sans-serif;
  font-size: 15.5px;
  line-height: 1.65;
  color: #C9CED6;
}
.ts-blq__u li::before { content: ""; position: absolute; left: 0; top: 10px; width: 6px; height: 6px; border-radius: 50%; background: var(--ts-acento); }
.ts-blq__u strong { color: #FFFFFF; font-weight: 600; }
/* Tarjetas en rejilla */
.ts-blq--tarjetas { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 24px; }
.ts-blq--tarjetas .ts-blq__i {
  padding: 30px 26px;
  background: #111317;
  border: 1px solid #262A31;
  border-radius: 16px;
}
.ts-blq--tarjetas .ts-blq__n {
  display: block;
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-size: 40px;
  line-height: .95;
  letter-spacing: -.04em;
  color: var(--ts-acento);
  margin-bottom: 16px;
}
/* Filas con regla */
.ts-blq--filas { display: flex; flex-direction: column; }
.ts-blq--filas .ts-blq__i { display: flex; gap: 26px; padding: 26px 0; border-top: 1px solid #262A31; }
.ts-blq--filas .ts-blq__i:first-child { border-top: 0; padding-top: 0; }
.ts-blq--filas .ts-blq__n {
  flex: 0 0 44px;
  font-family: "JetBrains Mono", ui-monospace, monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: .2em;
  color: var(--ts-acento);
  padding-top: 5px;
}
.ts-blq--filas .ts-blq__c { flex: 1; }
/* Pasos: numeral grande al margen */
.ts-blq--pasos { display: flex; flex-direction: column; gap: 44px; }
.ts-blq--pasos .ts-blq__i { display: flex; gap: 34px; }
.ts-blq--pasos .ts-blq__n {
  flex: 0 0 92px;
  font-family: "Instrument Serif", Georgia, serif;
  font-style: italic;
  font-size: 62px;
  line-height: .9;
  letter-spacing: -.04em;
  color: var(--ts-acento);
}
.ts-blq--pasos .ts-blq__c { flex: 1; max-width: 720px; }
.ts-blq--pasos .ts-blq__t { font-size: 24px; }
@media (max-width: 767px) {
  .ts-blq--tarjetas { grid-template-columns: 1fr; }
  .ts-blq--filas .ts-blq__i, .ts-blq--pasos .ts-blq__i { flex-direction: column; gap: 12px; }
  .ts-blq--pasos { gap: 34px; }
  .ts-blq--pasos .ts-blq__n { font-size: 46px; }
}

/* ── Sobre mi: cifras, capitulos, cronologia, anti, pila y cita ── */

.ts-cif { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 32px; margin: 0; padding: 0; list-style: none; }
.ts-cif__i { position: relative; display: flex; flex-direction: column; gap: 10px; padding-left: 24px; }
.ts-cif__i::before { content: ""; position: absolute; left: 0; top: 12px; bottom: 12px; width: 1px; background: #262A31; }
.ts-cif__n { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400; font-size: clamp(54px, 6.5vw, 94px); line-height: .92; letter-spacing: -.045em; color: #FFFFFF; }
.ts-cif__n em { font-style: italic; font-size: .7em; color: var(--ts-acento, #C6FF3D); }
.ts-cif__e { font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 500; font-size: 10.5px; line-height: 1.6; letter-spacing: .22em; text-transform: uppercase; color: #9AA2AE; }

.ts-cap { --ts-acento: #C6FF3D; }
.ts-cap--centrado { max-width: 1052px; margin-inline: auto; }
.ts-cap__r { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 64px; align-items: start; }
.ts-cap--centrado .ts-cap__r { grid-template-columns: 200px minmax(0, 788px); }
.ts-cap__m { display: flex; flex-direction: column; gap: 10px; position: sticky; top: 120px; }
.ts-cap__n { font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 500; font-size: 12px; line-height: 1.6; letter-spacing: .24em; text-transform: uppercase; color: var(--ts-acento, #C6FF3D); }
.ts-cap__k { font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 500; font-size: 10.5px; line-height: 1.6; letter-spacing: .22em; text-transform: uppercase; color: #9AA2AE; }
.ts-cap__b { max-width: 720px; }
.ts-cap--centrado .ts-cap__b { max-width: 760px; }
.ts-cap__t { margin: 0 0 20px; font-family: "Inter Tight", Inter, sans-serif; font-weight: 500; font-size: clamp(32px, 3.9vw, 56px); line-height: 1.04; letter-spacing: -.025em; color: #FFFFFF; }
.ts-cap__t em { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400; color: var(--ts-acento, #C6FF3D); }
.ts-cap__l { margin: 0 0 18px; font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-size: 16px; line-height: 1.7; letter-spacing: -.015em; color: #C9CED6; }
.ts-cap__p { margin: 0 0 18px; font-family: "Inter Tight", Inter, sans-serif; font-size: 16px; line-height: 1.7; color: #C9CED6; }
.ts-cap__p:last-child, .ts-cap__l:last-child { margin-bottom: 0; }
.ts-cap__p em, .ts-cap__l em { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-size: 1.06em; color: var(--ts-acento, #C6FF3D); }
.ts-cap__p strong { color: #FFFFFF; font-weight: 600; }

.ts-cro { margin: 56px 0 0; padding: 0; list-style: none; }
.ts-cro__i { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 64px; padding: 36px 0; border-top: 1px solid #262A31; }
.ts-cro__m { display: flex; flex-direction: column; gap: 8px; position: sticky; top: 120px; }
.ts-cro__n { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-size: 52px; line-height: .9; letter-spacing: -.04em; color: var(--ts-acento, #C6FF3D); }
.ts-cro__p { font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 500; font-size: 10.5px; line-height: 1.6; letter-spacing: .18em; text-transform: uppercase; color: #C9CED6; }
.ts-cro__a { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10px; line-height: 1.6; letter-spacing: .16em; text-transform: uppercase; color: #6A7280; }
.ts-cro__r { margin: 0; font-family: "Inter Tight", Inter, sans-serif; font-weight: 500; font-size: 22px; line-height: 1.2; letter-spacing: -.02em; color: #FFFFFF; }
.ts-cro__o { display: block; margin: 8px 0 14px; font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 500; font-size: 11px; line-height: 1.6; letter-spacing: .18em; text-transform: uppercase; color: var(--ts-acento, #C6FF3D); }
.ts-cro__d { margin: 0; font-family: "Inter Tight", Inter, sans-serif; font-size: 15px; line-height: 1.7; color: #C9CED6; }

.ts-no { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 28px; margin: 56px 0 0; padding: 0; list-style: none; }
.ts-no__i { background: #111317; border: 1px solid #262A31; border-radius: 12px; padding: 28px; }
.ts-no__n { display: block; margin-bottom: 12px; font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-size: 36px; line-height: 1; letter-spacing: -.04em; color: var(--ts-acento, #C6FF3D); }
.ts-no__t { margin: 0 0 10px; font-family: "Inter Tight", Inter, sans-serif; font-weight: 500; font-size: 19px; line-height: 1.25; letter-spacing: -.02em; color: #FFFFFF; }
.ts-no__d { margin: 0; font-family: "Inter Tight", Inter, sans-serif; font-size: 14.5px; line-height: 1.6; color: #C9CED6; }

.ts-pila { margin: 56px 0 0; }
.ts-pila__f { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 64px; align-items: baseline; padding: 20px 0; border-top: 1px solid #262A31; }
.ts-pila__c { font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 500; font-size: 10.5px; line-height: 1.6; letter-spacing: .22em; text-transform: uppercase; color: var(--ts-acento, #C6FF3D); }
.ts-pila__e { margin: 0; font-family: "Inter Tight", Inter, sans-serif; font-size: 15px; line-height: 1.7; color: #C9CED6; }

.ts-cita { max-width: 1000px; margin: 0 auto; padding: 0; text-align: center; border: 0; }
.ts-cita p { margin: 0; font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400; font-size: clamp(34px, 5.4vw, 78px); line-height: 1.05; letter-spacing: -.035em; color: #FFFFFF; }
.ts-cita em { font-style: italic; color: #C6FF3D; }

.ts-retrato { display: flex; flex-direction: column; gap: 4px; margin-top: 22px; }
.ts-retrato span { display: block; font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10.5px; line-height: 1.5; letter-spacing: .18em; text-transform: uppercase; color: #9AA2AE; }
.ts-retrato .n { font-weight: 500; font-size: 11px; letter-spacing: .14em; color: #FFFFFF; }

@media (max-width: 1024px) {
  .ts-cap__r, .ts-cap--centrado .ts-cap__r, .ts-cro__i, .ts-pila__f { grid-template-columns: 1fr; gap: 20px; }
  .ts-cap__m { position: static; flex-direction: row; align-items: baseline; gap: 14px; }
  .ts-cro__m { position: static; flex-direction: row; align-items: baseline; gap: 14px; }
  .ts-cro__n { font-size: 34px; }
  .ts-cap__b, .ts-cap--centrado .ts-cap__b { max-width: none; }
  .ts-cro__i { padding: 28px 0; }
  .ts-pila__f { gap: 8px; }
}

@media (max-width: 760px) {
  .ts-cif { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 26px 20px; }
  .ts-no { grid-template-columns: 1fr; gap: 16px; }
  .ts-cro { margin-top: 36px; }
  .ts-no, .ts-pila { margin-top: 36px; }
}

.ts-cro__o--logo img { display: block; height: 18px; width: auto; filter: brightness(0) invert(1); opacity: .75; }
.ts-cro__o--logo a { display: inline-block; opacity: .9; }
.ts-cro__o--logo a:hover { opacity: 1; }

/* ── Bono de horas: tarjetas de precio y encaje ── */

.ts-bono { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 16px; }
.ts-bono__i { display: flex; flex-direction: column; background: #0A0B0D; border: 1px solid #262A31; border-radius: 12px; padding: 26px 22px 22px; }
.ts-bono__i--luz { border-color: #C6FF3D; background: transparent; }
.ts-bono__c { display: flex; flex-direction: row; align-items: baseline; gap: 12px; padding-bottom: 16px; border-bottom: 1px solid #262A31; }
.ts-bono__n { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-size: 28px; line-height: 1; letter-spacing: -.04em; color: #C6FF3D; }
.ts-bono__x { font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 500; font-size: 9.5px; line-height: 1.6; letter-spacing: .2em; text-transform: uppercase; color: #9AA2AE; }
.ts-bono__h { display: flex; align-items: baseline; gap: 8px; margin: 22px 0 4px; }
.ts-bono__hn { font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-size: 72px; line-height: .9; letter-spacing: -.045em; color: #FFFFFF; }
.ts-bono__hu { font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 500; font-size: 11px; line-height: 1.6; letter-spacing: .18em; text-transform: uppercase; color: #9AA2AE; }
.ts-bono__t { display: flex; align-items: baseline; gap: 6px; margin: 4px 0 18px; }
.ts-bono__tn { font-family: "Inter Tight", Inter, sans-serif; font-weight: 500; font-size: 17px; line-height: 1.6; letter-spacing: -.01em; color: #FFFFFF; }
.ts-bono__tu { font-family: "JetBrains Mono", ui-monospace, monospace; font-size: 10.5px; line-height: 1.6; letter-spacing: .16em; text-transform: uppercase; color: #9AA2AE; }
.ts-bono__s { display: flex; flex-direction: column; gap: 2px; padding: 14px 0 16px; margin-bottom: 16px; border-top: 1px solid #262A31; }
.ts-bono__sn { font-family: "Inter Tight", Inter, sans-serif; font-weight: 600; font-size: 20px; line-height: 1.6; letter-spacing: -.02em; color: #FFFFFF; }
.ts-bono__su { font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 500; font-size: 9.5px; line-height: 1.6; letter-spacing: .2em; text-transform: uppercase; color: #9AA2AE; }
.ts-bono__p { margin: 0 0 20px; font-family: "Inter Tight", Inter, sans-serif; font-size: 13.5px; line-height: 1.55; color: #C9CED6; }
.ts-bono__a { display: flex; align-items: center; gap: 8px; margin-top: auto; padding-bottom: 6px; border-bottom: 1px solid #262A31; font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 500; font-size: 10.5px; line-height: 1.6; letter-spacing: .18em; text-transform: uppercase; color: #C9CED6; text-decoration: none; transition: color .2s, border-color .2s; }
.ts-bono__a:hover { color: #C6FF3D; border-bottom-color: #C6FF3D; }

.ts-enc { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; }
.ts-enc__i { background: #111317; border: 1px solid #262A31; border-radius: 16px; padding: 32px; }
.ts-enc__i--no { background: transparent; }
.ts-enc__t { margin: 0 0 22px; font-family: "Inter Tight", Inter, sans-serif; font-weight: 500; font-size: 24px; line-height: 1.6; letter-spacing: -.015em; color: #FFFFFF; }
.ts-enc__u { display: grid; gap: 16px; margin: 0; padding: 0; list-style: none; }
.ts-enc__u li { position: relative; padding-left: 32px; font-family: "Inter Tight", Inter, sans-serif; font-size: 16px; line-height: 1.7; color: #C9CED6; }
.ts-enc__u li strong { font-weight: 600; color: #FFFFFF; }
.ts-enc__i--si .ts-enc__u li::before { content: ""; position: absolute; left: 0; top: 5px; width: 20px; height: 20px; border: 1px solid #C6FF3D; border-radius: 50%; background: rgba(198, 255, 61, .06); }
.ts-enc__i--no .ts-enc__u li::before { content: ""; position: absolute; left: 0; top: 14px; width: 18px; height: 1px; background: #6A7280; }

.ts-nota { max-width: 820px; margin: 30px 0 0; font-family: "Inter Tight", Inter, sans-serif; font-size: 14px; line-height: 1.65; color: #9AA2AE; }
.ts-nota a { color: #C6FF3D; text-decoration: none; border-bottom: 1px solid rgba(198, 255, 61, .4); }
.ts-nota a:hover { border-bottom-color: #C6FF3D; }

@media (max-width: 1100px) {
  .ts-bono { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 860px) {
  .ts-bono { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ts-enc { grid-template-columns: 1fr; gap: 16px; }
  .ts-enc__i { padding: 26px 22px; }
}
@media (max-width: 560px) {
  .ts-bono { grid-template-columns: 1fr; }
}

/* ── Recursos relacionados ── */
.ts-rec { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 24px; max-width: 1120px; margin-inline: auto; }
.ts-rec__i { display: block; background: #111317; border: 1px solid #262A31; border-radius: 16px; padding: 36px 32px; text-decoration: none; transition: border-color .25s, transform .25s; }
.ts-rec__i:hover { border-color: #3A3F48; transform: translateY(-2px); }
.ts-rec__n { display: block; margin-bottom: 18px; font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-size: 52px; line-height: .9; letter-spacing: -.04em; color: #C6FF3D; }
.ts-rec__t { margin: 0 0 10px; font-family: "Inter Tight", Inter, sans-serif; font-weight: 500; font-size: 19px; line-height: 1.6; letter-spacing: -.015em; color: #FFFFFF; }
.ts-rec__d { margin: 0; font-family: "Inter Tight", Inter, sans-serif; font-size: 14px; line-height: 1.55; color: #C9CED6; }
@media (max-width: 860px) { .ts-rec { grid-template-columns: 1fr; gap: 16px; } .ts-rec__i { padding: 28px 24px; } }

/* ── Boton de campo y secciones que solo salen si hay datos ── */
.ts-btn { display: inline-flex; align-items: center; gap: 10px; padding: 13px 22px; border-radius: 999px; font-family: "Inter Tight", Inter, sans-serif; font-weight: 500; font-size: 14px; line-height: 1.2; text-decoration: none; transition: transform .2s, background .2s, border-color .2s; }
.ts-btn--lima { background: var(--ts-acento, #C6FF3D); color: #0A0A0A; border: 1px solid var(--ts-acento, #C6FF3D); }
.ts-btn--lima:hover { transform: translateY(-1px); }
.ts-btn--linea { background: transparent; color: #FFFFFF; border: 1px solid #3A3F48; }
.ts-btn--linea:hover { border-color: var(--ts-acento, #C6FF3D); }
.ts-btn__f { font-size: 15px; line-height: 1; }
.ts-si-faq:not(:has(.ts-faq)) { display: none; }

/* ── FAQ plegada en acordeon ── */
.ts-faq--ac { columns: 1; display: flex; flex-direction: column; gap: 12px; max-width: 980px; margin-inline: auto; }
.ts-faq--ac .ts-faq__i { margin: 0; padding: 8px 0; border-bottom: 1px solid var(--ts-filo, #262A31); }
.ts-faq--ac .ts-faq__q { position: relative; display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 0; padding: 18px 0 18px 64px; font-size: 17px; line-height: 1.4; cursor: pointer; list-style: none; }
.ts-faq--ac .ts-faq__q::-webkit-details-marker { display: none; }
.ts-faq--ac .ts-faq__n { position: absolute; left: 0; top: 50%; transform: translateY(-50%); font-size: 11px; letter-spacing: .2em; color: #9AA2AE; }
.ts-faq--ac .ts-faq__x { flex: 1 1 auto; }
.ts-faq--ac .ts-faq__mas { position: relative; flex: 0 0 auto; width: 22px; height: 22px; }
.ts-faq--ac .ts-faq__mas::before, .ts-faq--ac .ts-faq__mas::after { content: ""; position: absolute; left: 50%; top: 50%; background: var(--ts-acento, #C6FF3D); transition: transform .2s ease, opacity .2s ease; }
.ts-faq--ac .ts-faq__mas::before { width: 14px; height: 1px; transform: translate(-50%, -50%); }
.ts-faq--ac .ts-faq__mas::after { width: 1px; height: 14px; transform: translate(-50%, -50%); }
.ts-faq--ac .ts-faq__i[open] .ts-faq__mas::after { transform: translate(-50%, -50%) scaleY(0); opacity: 0; }
.ts-faq--ac .ts-faq__a { padding: 0 24px 18px 64px; font-size: 15px; line-height: 1.7; color: #9AA2AE; }
@media (max-width: 760px) { .ts-faq--ac .ts-faq__q { padding-left: 40px; font-size: 16px; } .ts-faq--ac .ts-faq__a { padding: 0 0 16px 40px; } }

/* ── Paginas legales ── */
.ts-leg { display: flex; flex-direction: column; gap: 22px; }
.ts-leg__i { background: #111317; border: 1px solid #262A31; border-radius: 16px; padding: 30px; }
.ts-leg__t { margin: 0 0 14px; font-family: "Inter Tight", Inter, sans-serif; font-weight: 500; font-size: 24px; line-height: 1.6; letter-spacing: -.02em; color: #FFFFFF; }
.ts-leg__c { font-family: "Inter Tight", Inter, sans-serif; font-size: 16px; line-height: 1.8; color: #9AA2AE; }
.ts-leg__c p { margin: 0; }
.ts-leg__c p:last-child, .ts-leg__c ul:last-child { margin-bottom: 0; }
.ts-leg__c ul { margin: 0 0 14px; padding: 0; list-style: none; }
.ts-leg__c li { position: relative; padding-left: 20px; margin-bottom: 8px; }
.ts-leg__c li::before { content: ""; position: absolute; left: 0; top: 12px; width: 6px; height: 6px; border-radius: 50%; background: #C6FF3D; }
.ts-leg__c a { color: #C6FF3D; text-decoration: none; border-bottom: 1px solid rgba(198, 255, 61, .4); }
.ts-leg__c a:hover { border-bottom-color: #C6FF3D; }
.ts-leg__c strong { color: #C9CED6; font-weight: 600; }
@media (max-width: 760px) { .ts-leg__i { padding: 24px 20px; } }

/* ── Navegacion ── */

.ts-nav { --ts-acento: #C6FF3D; }
.ts-nav__u { display: flex; align-items: center; gap: 8px; margin: 0; padding: 0; list-style: none; }
.ts-nav__i { position: relative; }

.ts-nav .ts-nav__b { display: inline-flex; align-items: center; gap: 6px; padding: 8px 12px; background: transparent; border: 0; cursor: pointer; font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 500; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: #9AA2AE; transition: color .2s; }
.ts-nav .ts-nav__b { background: transparent; background-color: transparent; border-radius: 0; box-shadow: none; }
.ts-nav .ts-nav__b:hover, .ts-nav__d:hover .ts-nav__b, .ts-nav .ts-nav__b[aria-expanded="true"] { background: transparent; color: #FFFFFF; }
.ts-nav__ch { font-size: 10px; line-height: 1; color: #6A7280; }

.ts-nav__a { display: inline-flex; align-items: center; padding: 8px 12px; font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 500; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: #9AA2AE; text-decoration: none; transition: color .2s; }
.ts-nav__a:hover, .ts-nav__a.activo { color: #FFFFFF; }

.ts-nav__f { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px 6px 14px; background: rgba(198, 255, 61, .06); border: 1px solid rgba(198, 255, 61, .35); border-radius: 999px; font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 500; font-size: 12px; letter-spacing: .05em; text-transform: uppercase; color: #FFFFFF; text-decoration: none; transition: background .2s, border-color .2s; }
.ts-nav__f:hover { background: rgba(198, 255, 61, .12); border-color: var(--ts-acento); }
.ts-nav__free { padding: 2px 7px; border-radius: 4px; background: var(--ts-acento); font-size: 9.5px; font-weight: 600; line-height: 1.2; letter-spacing: .1em; color: #0A0B0D; }

.ts-nav__cta { display: inline-flex; align-items: center; padding: 13px 22px; border-radius: 999px; background: var(--ts-acento); font-family: "Inter Tight", Inter, sans-serif; font-weight: 500; font-size: 14px; line-height: 1.2; color: #0A0A0A; text-decoration: none; transition: transform .2s; }
.ts-nav__cta:hover { transform: translateY(-1px); }

.ts-nav--barra .ts-nav__m { display: none; position: absolute; top: calc(100% + 8px); left: 0; z-index: 60; background: #111317; border: 1px solid #262A31; border-radius: 12px; box-shadow: 0 18px 40px rgba(0, 0, 0, .5); }
.ts-nav--barra .ts-nav__m--plana { flex-direction: column; gap: 2px; min-width: 240px; padding: 14px; }
.ts-nav--barra .ts-nav__m--cols { grid-template-columns: repeat(4, 1fr); gap: 8px 28px; min-width: 720px; padding: 22px 22px 18px; left: 50%; transform: translateX(-50%); }
.ts-nav--barra .ts-nav__d:hover .ts-nav__m, .ts-nav--barra .ts-nav__b[aria-expanded="true"] + .ts-nav__m { display: flex; }
.ts-nav--barra .ts-nav__d:hover .ts-nav__m--cols, .ts-nav--barra .ts-nav__b[aria-expanded="true"] + .ts-nav__m--cols { display: grid; }

.ts-nav__m a { display: block; padding: 10px 14px; border-radius: 6px; font-family: "Inter Tight", Inter, sans-serif; font-weight: 500; font-size: 14px; line-height: 1.6; letter-spacing: -.005em; color: #C9CED6; text-decoration: none; transition: background .18s, color .18s; }
.ts-nav__m a:hover { background: rgba(198, 255, 61, .07); color: #FFFFFF; }
.ts-nav__g { display: flex; flex-direction: column; }
.ts-nav__h { display: block; margin-bottom: 6px; padding: 6px 14px 10px; font-family: "JetBrains Mono", ui-monospace, monospace; font-weight: 500; font-size: 9.5px; line-height: 1.6; letter-spacing: .22em; text-transform: uppercase; color: var(--ts-acento); }

.ts-nav--columna .ts-nav__u { flex-direction: column; align-items: stretch; gap: 4px; }
.ts-nav--columna .ts-nav__i { width: 100%; }
.ts-nav--columna .ts-nav__b { width: 100%; justify-content: space-between; padding: 14px 0; font-size: 13px; }
.ts-nav--columna .ts-nav__a { padding: 14px 0; font-size: 13px; }
.ts-nav--columna .ts-nav__m { display: none; padding: 0 0 10px 14px; border-left: 1px solid #262A31; }
.ts-nav--columna .ts-nav__b[aria-expanded="true"] + .ts-nav__m { display: block; }
.ts-nav--columna .ts-nav__m a { padding: 9px 0; }
.ts-nav--columna .ts-nav__g { margin-bottom: 10px; }
.ts-nav--columna .ts-nav__h { padding: 6px 0 6px; }
.ts-nav--columna .ts-nav__f { margin: 12px 0; }
.ts-nav--columna .ts-nav__cta { justify-content: center; margin-top: 10px; }

@media (max-width: 1180px) {
  .ts-nav--barra .ts-nav__m--cols { grid-template-columns: repeat(3, 1fr); min-width: 560px; }
}

.ts-nav__grupo { display: flex; flex-direction: column; margin-bottom: 18px; }
.ts-nav__grupo .ts-nav__h { padding: 0 0 10px; margin: 0; }
.ts-nav__e { padding: 9px 0; font-family: "Inter Tight", Inter, sans-serif; font-weight: 500; font-size: 15px; line-height: 1.5; color: #C9CED6; text-decoration: none; transition: color .18s; }
.ts-nav__e:hover { color: #FFFFFF; }