/* TraiBuy — "experiencia": estilos SOLO de la vista previa (/preview). Se carga después de style.css y
   solo cambia lo que hace falta: la tipografía editorial, el tema claro y el inicio como presentación
   de marca. Todo usa los mismos tokens que la tienda actual.

   Tipografía de titulares: Instrument Serif (licencia SIL OFL), archivos .woff2 autoalojados en
   /store/fonts/ — sin proveedor externo. La interfaz (botones, formularios, precios) sigue en la
   fuente sans del sistema, como pide la TOS para lo operativo. */

@font-face {
  font-family: "Instrument Serif"; font-style: normal; font-weight: 400; font-display: swap;
  src: url("/store/fonts/instrument-serif-latin-400-normal.woff2") format("woff2");
}
@font-face {
  font-family: "Instrument Serif"; font-style: italic; font-weight: 400; font-display: swap;
  src: url("/store/fonts/instrument-serif-latin-400-italic.woff2") format("woff2");
}

:root { --font-serif: "Instrument Serif", "Iowan Old Style", "Palatino Linotype", Georgia, serif; }

/* ---------- Cinta de vista previa ---------- */
.tb-ribbon {
  position: sticky; top: 0; z-index: 70; display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--space-2) var(--space-4);
  padding: 6px var(--space-3); background: var(--on-surface-strong); color: var(--surface); font-size: var(--text-xs); font-weight: 600;
}
.tb-ribbon a { color: inherit; text-decoration: underline; }
.tb-ribbon-theme { display: inline-flex; gap: 2px; padding: 2px; border-radius: var(--radius-full); background: rgba(127, 127, 127, 0.3); }
.tb-ribbon-theme button {
  min-height: 28px; padding: 0 var(--space-3); border: none; border-radius: var(--radius-full); background: transparent; color: inherit;
  font: inherit; cursor: pointer;
}
.tb-ribbon-theme button[aria-pressed="true"] { background: var(--surface); color: var(--on-surface-strong); }

/* ---------- Titulares editoriales ---------- */
.tb-exp h1, .tb-exp h2, .tb-exp .tb-xhero em { font-family: var(--font-serif); font-weight: 400; }
.tb-exp h2 { letter-spacing: -0.01em; }
.tb-exp .tb-xhero em, .tb-exp h1 em { font-style: italic; color: var(--accent); }

/* Desde el 21/10/2026 el inicio ES la tienda: barra de categorías, buscador y encabezado pegajoso igual que en el resto
   del sitio (antes se ocultaban para dejar el héroe de pantalla completa por detrás del encabezado). */

/* ---------- Revelado al desplazar: un deslizamiento lateral sutil, sin tomar el control del scroll ---------- */
html.tb-js .tb-reveal { opacity: 0; transform: translate3d(28px, 14px, 0); transition: opacity 600ms var(--ease-emphasized), transform 700ms var(--ease-emphasized); }
html.tb-js .tb-reveal:nth-of-type(even) { transform: translate3d(-28px, 14px, 0); }
html.tb-js .tb-reveal.is-in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { html.tb-js .tb-reveal { opacity: 1; transform: none; transition: none; } }

/* Categorías de la tienda: SOLO un desvanecido + una subida corta, sin desplazamiento lateral (Sam,
   22/09/2026, tras probar la versión de 52px de lado: "shakes to the side"). Cada fila ya contiene su
   propio riel de scroll HORIZONTAL (las tarjetas de producto) — sumarle otro movimiento horizontal por
   encima, en el mismo eje, es lo que se sentía como una sacudida en vez de una entrada limpia. Vertical +
   opacidad no pelea con el riel y se ve premium en cualquier dispositivo. */
html.tb-js .tb-collection.tb-reveal { transform: translate3d(0, 18px, 0); transition: opacity 550ms var(--ease-emphasized), transform 550ms var(--ease-emphasized); }
/* Misma especificidad que .tb-collection.tb-reveal de arriba (2 clases) — sin esto, el orden en el
   archivo hacía que esa regla ganara SIEMPRE, incluso ya con .is-in, y la fila se quedaba corrida para
   siempre en vez de terminar de entrar. 3 clases le gana a las dos reglas de 2 de arriba. */
html.tb-js .tb-collection.tb-reveal.is-in { transform: none; }

/* ---------- 1. Héroe cinematográfico ---------- */
.tb-xhome { position: relative; overflow-x: clip; }
.tb-xhome::before { display: none; }
.tb-xhero { position: relative; isolation: isolate; min-height: min(100svh, 940px); display: flex; align-items: flex-end; overflow: hidden; }
.tb-xhero-media {
  position: absolute; inset: 0; z-index: -1; background: radial-gradient(80% 70% at 75% 10%, var(--glow), transparent 70%), var(--surface-warm);
  transform: translate3d(0, calc(var(--hp, 0) * 9%), 0) scale(calc(1 + var(--hp, 0) * 0.07)); will-change: transform;
}
/* Velo de legibilidad + viñeta: el texto siempre se lee, la escena respira detrás. */
.tb-xhero-media::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background:
    linear-gradient(to bottom, color-mix(in srgb, var(--surface) 82%, transparent) 0%, transparent 22%),
    linear-gradient(to top, var(--surface) 10%, color-mix(in srgb, var(--surface) 92%, transparent) 36%, color-mix(in srgb, var(--surface) 66%, transparent) 54%, color-mix(in srgb, var(--surface) 22%, transparent) 70%, transparent 86%);
}
/* Grano de película: apenas perceptible, da textura de fotografía y no de pantalla plana. */
.tb-xhero::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none; opacity: 0.07; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
}
.tb-xhero-media video, .tb-xhero-media .tb-xposter { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* La escena: columnas de fotos reales del catálogo que suben y bajan despacio, inclinadas. */
.tb-xreel {
  position: absolute; inset: -8% -14%; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px;
  transform: rotate(-8deg); transform-origin: 50% 40%; animation: tb-fade 1600ms var(--ease-emphasized) both;
}
.tb-xreel-col { display: flex; flex-direction: column; gap: 10px; padding-bottom: 10px; animation: tb-reel 70s linear infinite; will-change: transform; }
.tb-xreel-col:nth-child(2) { animation-direction: reverse; animation-duration: 84s; }
.tb-xreel-col:nth-child(3) { animation-duration: 76s; }
.tb-xreel-col:nth-child(4) { animation-direction: reverse; animation-duration: 90s; }
.tb-xreel.is-still .tb-xreel-col { animation: none; }
.tb-xreel-col img {
  display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; border-radius: 20px; background: var(--photo-bg);
  filter: saturate(1.04) brightness(0.92);
}
@keyframes tb-reel { to { transform: translate3d(0, -50%, 0); } }
@keyframes tb-fade { from { opacity: 0; } to { opacity: 1; } }
@keyframes tb-rise { from { opacity: 0; transform: translate3d(0, 28px, 0); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }
@keyframes tb-cue { 0%, 100% { transform: scaleY(0.35); opacity: 0.2; } 50% { transform: scaleY(1); opacity: 0.6; } }
@media (prefers-reduced-motion: reduce) {
  .tb-xreel-col { animation: none; }
  .tb-xhero-media { transform: none; }
}

.tb-xhero-copy {
  position: relative; z-index: 1; width: 100%; max-width: 1180px; margin: 0 auto; padding: var(--space-16) var(--space-4) calc(var(--space-8) + 64px);
  transform: translate3d(0, calc(var(--hp, 0) * -40px), 0); opacity: calc(1 - var(--hp, 0) * 1.25);
}
.tb-xhero-copy .tb-eyebrow { text-shadow: 0 0 14px var(--surface), 0 0 3px var(--surface), 0 1px 2px var(--surface); }
.tb-xr { animation: tb-rise 1100ms var(--ease-emphasized) both; animation-delay: calc(180ms + var(--i, 0) * 130ms); }
@media (prefers-reduced-motion: reduce) { .tb-xr { animation: none; } .tb-xhero-copy { transform: none; opacity: 1; } }
.tb-xhero h1 { font-size: clamp(3.2rem, 14.5vw, 6.4rem); line-height: 0.94; letter-spacing: -0.025em; margin: var(--space-3) 0 0; max-width: 12ch; text-wrap: balance; }
.tb-xhero-sub { color: var(--on-surface); font-size: var(--text-base); line-height: 1.55; max-width: 440px; margin: var(--space-5) 0 0; }
.tb-xhero .tb-hero-actions { margin-top: var(--space-6); }
.tb-xsearch {
  display: flex; align-items: center; gap: 10px; width: min(100%, 440px); min-height: 50px; margin-top: var(--space-4); padding: 0 var(--space-4);
  border: 1px solid var(--line-strong); border-radius: var(--radius-full); background: var(--glass-soft); color: var(--muted);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px); font: inherit; font-size: var(--text-sm); text-align: left; cursor: text;
  touch-action: manipulation; transition: border-color var(--dur) var(--ease-standard), color var(--dur) var(--ease-standard);
}
.tb-xsearch svg { flex: none; color: var(--accent); }
@media (hover: hover) { .tb-xsearch:hover { border-color: var(--accent); color: var(--on-surface-strong); } }
.tb-xsearch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tb-xcue { display: none; }
@media (min-width: 861px) {
  .tb-xhero { min-height: min(100svh, 960px); }
  .tb-xhero-copy { padding: var(--space-16) var(--space-6) var(--space-16); }
  .tb-xreel { inset: -10% -4% -10% 40%; grid-template-columns: repeat(4, 1fr); gap: 14px; transform: rotate(-7deg); }
  .tb-xreel-col { gap: 14px; padding-bottom: 14px; }
  .tb-xhero-media::after {
    background:
      linear-gradient(to bottom, color-mix(in srgb, var(--surface) 70%, transparent) 0%, transparent 18%),
      linear-gradient(to top, var(--surface) 1%, transparent 34%),
      linear-gradient(to right, var(--surface) 22%, color-mix(in srgb, var(--surface) 70%, transparent) 42%, transparent 66%);
  }
  .tb-xhero h1 { font-size: clamp(5rem, 8.6vw, 8.4rem); max-width: 9ch; }
  .tb-xhero-sub { font-size: 19px; max-width: 470px; }
  .tb-xcue { display: block; position: absolute; left: 50%; bottom: 18px; width: 1px; height: 46px; background: linear-gradient(var(--on-surface-strong), transparent); transform-origin: top; animation: tb-cue 2.4s ease-in-out infinite; z-index: 1; }
}

/* ---------- 3. Manifiesto (las palabras se encienden al desplazar) ---------- */
.tb-xmani { max-width: 1040px; margin: 0 auto; padding: var(--space-16) var(--space-4) var(--space-8); }
.tb-xmani-text { font-family: var(--font-serif); font-weight: 400; font-size: clamp(2.1rem, 7vw, 4.2rem); line-height: 1.1; letter-spacing: -0.01em; color: var(--on-surface-strong); margin: 0; text-wrap: balance; }
.tb-xmani-text .w { opacity: var(--wo, 1); transition: opacity 220ms linear; }
@media (min-width: 861px) { .tb-xmani { padding: 160px var(--space-6) var(--space-12); } }

/* ---------- 4. Cuidado integrado: capítulos, sin cajas promocionales ---------- */
.tb-xcare { max-width: 1180px; margin: 0 auto; padding: var(--space-8) var(--space-4) var(--space-12); }
.tb-xcare-head h2 { font-size: clamp(2.2rem, 8vw, 3.6rem); line-height: 1.05; margin: var(--space-2) 0 var(--space-6); max-width: 16ch; }
.tb-xcare-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line); }
.tb-xcare-list li { display: grid; grid-template-columns: 44px 1fr; column-gap: var(--space-3); row-gap: 4px; padding: var(--space-5) 0; border-bottom: 1px solid var(--line); }
.tb-xnum { display: block; color: var(--accent); font-size: var(--text-xs); font-weight: 700; letter-spacing: var(--track-caps); }
.tb-xcare-list .tb-xnum { grid-row: 1 / span 2; padding-top: 0.9rem; }
.tb-xcare-list h3 { font-family: var(--font-serif); font-weight: 400; font-size: 2rem; line-height: 1.05; margin: 0; color: var(--on-surface-strong); }
.tb-xcare-list p { margin: 0; color: var(--on-surface); font-size: var(--text-sm); line-height: 1.55; }
.tb-xlive { display: inline-block; margin-top: 6px; padding: 3px 12px; border-radius: var(--radius-full); background: var(--accent-tint); color: var(--accent); font-weight: 700; font-size: var(--text-xs); }
@media (min-width: 861px) {
  .tb-xcare { padding: var(--space-12) var(--space-6) var(--space-16); }
  .tb-xcare-list li { grid-template-columns: 110px 1fr 1.1fr; align-items: baseline; padding: var(--space-8) 0; }
  .tb-xcare-list .tb-xnum { grid-row: auto; padding-top: 0; }
  .tb-xcare-list h3 { font-size: 3.2rem; }
  .tb-xcare-list p { font-size: var(--text-base); }
}

/* ---------- 4. Cómo funciona ---------- */
.tb-xsteps { max-width: 1180px; margin: 0 auto; padding: var(--space-12) var(--space-4); }
.tb-xsteps h2 { font-size: clamp(2.2rem, 8vw, 3.4rem); line-height: 1.05; margin: var(--space-2) 0 var(--space-6); max-width: 14ch; }
.tb-xsteps-list { list-style: none; margin: 0; padding: 0; display: flex; gap: var(--space-4); overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding-bottom: var(--space-2); }
.tb-xsteps-list::-webkit-scrollbar { display: none; }
.tb-xsteps-list li { flex: 0 0 68%; scroll-snap-align: start; padding: var(--space-4) var(--space-2) 0 0; border-top: 1px solid var(--line-strong); }
.tb-xdot { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 50%; background: var(--accent); color: var(--on-accent); font-weight: 700; font-size: var(--text-sm); margin-bottom: var(--space-3); }
.tb-xsteps h3 { font-family: var(--font-serif); font-weight: 400; font-size: 1.5rem; margin: 0 0 var(--space-1); color: var(--on-surface-strong); }
.tb-xsteps li p { margin: 0; color: var(--on-surface); font-size: var(--text-sm); line-height: 1.5; }
@media (min-width: 861px) {
  .tb-xsteps { padding: var(--space-16) var(--space-6); }
  .tb-xsteps-list { overflow: visible; display: grid; grid-template-columns: repeat(5, 1fr); }
  .tb-xsteps-list li { flex: none; }
}

/* ---------- 5. Caja Saludable ---------- */
.tb-xbox { max-width: 1180px; margin: 0 auto; padding: var(--space-8) var(--space-4); display: grid; gap: var(--space-6); border-radius: var(--radius-xl); }
.tb-xbox-copy { padding: var(--space-6); border-radius: var(--radius-xl); background: radial-gradient(90% 100% at 0% 0%, var(--glow), transparent 70%), var(--surface-raised); border: 1px solid var(--line); }
.tb-xbox h2 { font-size: clamp(2.2rem, 8vw, 3.4rem); line-height: 1.05; margin: var(--space-2) 0 var(--space-4); }
.tb-xbox-text { color: var(--on-surface); font-size: var(--text-sm); line-height: 1.6; margin: 0 0 var(--space-5); }
.tb-xbox .tb-healthybox-list { justify-content: flex-start; }
.tb-xbox-card { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-3); border-radius: var(--radius-xl); border: 1px solid var(--line); background: var(--surface-raised); }
.tb-xbox-card img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: var(--radius-lg); background: var(--photo-bg); }
.tb-xbox-card h3 { margin: 0; font-family: var(--font-serif); font-weight: 400; font-size: 1.7rem; color: var(--on-surface-strong); }
.tb-xbox-card .unit { color: var(--muted); font-size: var(--text-sm); margin: 0; }
.tb-xbox-buy { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: 0 var(--space-1) var(--space-1); }
.tb-xbox-price { font-size: var(--text-xl); font-weight: 800; color: var(--accent); }
@media (min-width: 861px) { .tb-xbox { grid-template-columns: 1.15fr 0.85fr; padding: var(--space-12) var(--space-6); align-items: stretch; } .tb-xbox-copy { padding: var(--space-10); } }

.tb-xbox-more { margin: var(--space-5) 0 0; }

/* ---------- 6. El mercado: pocos "mundos" que se recorren de lado (el scroll vertical sigue siendo natural) ---------- */
.tb-xmarket { max-width: none; margin: 0; padding: var(--space-12) 0 var(--space-8); }
.tb-xmarket-head { max-width: 1180px; margin: 0 auto var(--space-6); padding: 0 var(--space-4); display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-4); }
.tb-xmarket-head > div:first-child { flex: 1; min-width: 0; }
.tb-xmarket-head h2 { font-size: clamp(2.2rem, 8vw, 3.6rem); line-height: 1.05; margin: var(--space-2) 0 0; max-width: 14ch; padding: 0; }
.tb-xmarket-head .tb-eyebrow { padding: 0; }
.tb-xarrows { display: flex; flex: none; gap: 8px; }
.tb-xarrow { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line-strong); background: transparent; color: var(--on-surface-strong); font-size: 20px; line-height: 1; cursor: pointer; touch-action: manipulation; transition: background var(--dur) var(--ease-standard), opacity var(--dur) var(--ease-standard); }
.tb-xarrow:disabled { opacity: 0.3; cursor: default; }
@media (hover: hover) { .tb-xarrow:not(:disabled):hover { background: var(--accent-tint); } }
.tb-xarrow:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.tb-xtiles {
  display: flex; gap: var(--space-3); overflow-x: auto; overflow-y: hidden; scroll-snap-type: x mandatory; overscroll-behavior-x: contain;
  padding: 0 var(--space-4) var(--space-2); scroll-padding: 0 var(--space-4); scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.tb-xtiles::-webkit-scrollbar { display: none; }
.tb-xtile {
  position: relative; flex: 0 0 78%; aspect-ratio: 3 / 4; scroll-snap-align: center; overflow: hidden; border-radius: var(--radius-xl);
  background: var(--surface-warm); border: 1px solid var(--line); isolation: isolate; color: #fff;
}
/* El movimiento sutil: la foto se desplaza un poco en sentido contrario al scroll lateral (--px la fija app.js). */
.tb-xtile img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: -2; background: var(--photo-bg); translate: calc(var(--px, 0) * -6%) 0; transform: scale(1.16); transition: transform 900ms var(--ease-emphasized); }
.tb-xtile::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(to top, rgba(10, 10, 12, 0.8) 0%, rgba(10, 10, 12, 0.05) 58%); }
.tb-xtile-label { position: absolute; left: var(--space-5); right: var(--space-5); bottom: var(--space-5); }
.tb-xtile-label strong { display: block; font-family: var(--font-serif); font-weight: 400; font-size: 2.1rem; line-height: 1.02; }
.tb-xtile-label span { display: block; font-size: var(--text-xs); opacity: 0.85; margin-top: 6px; }
.tb-xtile-go { position: absolute; top: var(--space-4); right: var(--space-4); padding: 6px 12px; border-radius: var(--radius-full); background: var(--glass-soft); color: var(--on-surface-strong); font-size: var(--text-xs); font-weight: 700; opacity: 0; transform: translateY(-4px); transition: opacity var(--dur) var(--ease-standard), transform var(--dur) var(--ease-standard); }
.tb-xtile.tb-xall { background: radial-gradient(90% 80% at 20% 0%, var(--glow), transparent 70%), var(--surface-raised); color: var(--on-surface-strong); display: flex; align-items: flex-end; }
.tb-xtile.tb-xall::after { display: none; }
.tb-xtile.tb-xall .tb-xtile-label { position: static; padding: var(--space-5); }
@media (hover: hover) {
  .tb-xtile:hover img { transform: scale(1.22); }
  .tb-xtile:hover .tb-xtile-go, .tb-xtile:focus-visible .tb-xtile-go { opacity: 1; transform: none; }
}
.tb-xtile:focus-visible { outline: 3px solid var(--accent); outline-offset: 3px; }
.tb-xprog { height: 2px; margin: var(--space-5) var(--space-4) 0; border-radius: 2px; background: var(--line); max-width: 1180px; overflow: hidden; }
.tb-xprog i { display: block; height: 100%; width: 25%; background: var(--accent); transition: transform 120ms linear; }
.tb-xmarket-cta { text-align: center; margin: var(--space-6) var(--space-4) 0; }
@media (min-width: 861px) {
  .tb-xmarket { padding: var(--space-16) 0; }
  .tb-xarrow { width: 48px; height: 48px; }
  .tb-xmarket-head { padding: 0 var(--space-6); }
  .tb-xtiles { padding: 0 max(var(--space-6), calc((100vw - 1180px) / 2 + var(--space-6))) var(--space-2); scroll-padding: 0 max(var(--space-6), calc((100vw - 1180px) / 2 + var(--space-6))); gap: var(--space-4); }
  .tb-xtile { flex: 0 0 30%; aspect-ratio: 4 / 5; scroll-snap-align: start; }
  .tb-xprog { margin: var(--space-6) auto 0; width: min(1128px, calc(100% - 48px)); }
}
@media (prefers-reduced-motion: reduce) { .tb-xtile img { translate: none; transition: none; } }

/* ---------- 7. Familias reales: solo vista previa ---------- */
.tb-xpeople { max-width: 1180px; margin: 0 auto; padding: var(--space-12) var(--space-4); text-align: center; }
.tb-xpeople h2 { font-size: clamp(2rem, 7vw, 3rem); margin: var(--space-2) 0 var(--space-4); }
.tb-xpeople.tb-placeholder { margin: var(--space-6) var(--space-4); padding: var(--space-8) var(--space-4); border: 1px dashed var(--line-strong); border-radius: var(--radius-xl); }
.tb-xpeople-note { color: var(--muted); font-size: var(--text-sm); max-width: 46ch; margin: 0 auto; }
@media (min-width: 861px) { .tb-xpeople.tb-placeholder { margin: var(--space-8) auto; } }

/* Reto Verde: escena propia con cuenta regresiva real */
.tb-exp .tb-rv h2 { font-size: clamp(2.2rem, 8vw, 3.6rem); line-height: 1.05; }
.tb-xrv {
  max-width: 1180px; margin: var(--space-8) var(--space-3); padding: var(--space-12) var(--space-4); border: 1px solid var(--line); border-radius: 32px;
  background: radial-gradient(75% 90% at 50% 0%, color-mix(in srgb, var(--accent) 26%, transparent), transparent 72%), var(--surface-raised);
}
.tb-rv-count { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; max-width: 540px; margin: var(--space-6) auto var(--space-3); }
.tb-rv-count > div { padding: 14px 4px 10px; border: 1px solid var(--line); border-radius: 20px; background: var(--glass-soft); }
.tb-rv-count b { display: block; font-family: var(--font-serif); font-weight: 400; font-size: clamp(2.4rem, 11vw, 4.2rem); line-height: 1; font-variant-numeric: tabular-nums; color: var(--on-surface-strong); }
.tb-rv-count span { display: block; margin-top: 6px; font-size: 11px; letter-spacing: var(--track-caps); text-transform: uppercase; color: var(--muted); }
.tb-rv-count.is-done { display: none; }
.tb-rv-when { margin: var(--space-3) 0 var(--space-5); }
.tb-rv-cta { min-height: 52px; padding: 0 var(--space-8); }
@media (min-width: 861px) { .tb-xrv { margin: var(--space-12) auto; padding: var(--space-16) var(--space-6); } .tb-rv-cta { min-height: 56px; } }

/* ---------- 9. Cierre ---------- */
.tb-xcta { text-align: center; padding: var(--space-16) var(--space-4) var(--space-12); max-width: 760px; margin: 0 auto; }
.tb-xcta h2 { font-size: clamp(2.4rem, 9vw, 4rem); line-height: 1.02; margin: 0 0 var(--space-3); }
.tb-xcta p { color: var(--on-surface); margin: 0 0 var(--space-6); }
.tb-xcta .tb-hero-actions { justify-content: center; }
.tb-xcta .tb-hero-actions .tb-btn-ghost { display: inline-flex; }

/* ---------- La tienda arriba: título corto + accesos rápidos (estilo Amazon) ---------- */
.tb-shoptop { max-width: 1180px; margin: 0 auto; padding: var(--space-5) var(--space-4) var(--space-2); }
.tb-shoptop h1 { font-size: clamp(2.2rem, 8vw, 3.6rem); line-height: 1; margin: var(--space-1) 0 0; }
.tb-shoplinks { display: grid; grid-template-columns: repeat(4, minmax(150px, 1fr)); gap: var(--space-2); margin-top: var(--space-4); overflow-x: auto; scrollbar-width: none; }
.tb-shoplinks::-webkit-scrollbar { display: none; }
.tb-shoplink {
  display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: var(--radius-lg, 16px); text-decoration: none;
  background: var(--surface-warm); border: 1px solid var(--line); color: var(--on-surface-strong); min-width: 0;
}
.tb-shoplink b { font-size: var(--text-sm, 14px); }
.tb-shoplink span { font-size: var(--text-xs, 12px); color: var(--muted); }
.tb-shoplink.is-hb b { color: #C9A45C; }
.tb-shoplink.is-ftm b { color: #8CB8F0; }
.tb-shoplink.is-rv b, .tb-shoplink.is-wa b { color: var(--accent); }
.tb-shoplink:hover { border-color: var(--accent); }
html[data-theme="light"] .tb-shoplink.is-hb b { color: #7A5A1C; }
html[data-theme="light"] .tb-shoplink.is-ftm b { color: #1F55A5; }
@media (max-width: 640px) { .tb-shoplinks { grid-template-columns: repeat(4, 140px); margin-right: calc(-1 * var(--space-4)); padding-right: var(--space-4); } }
@media (min-width: 861px) { .tb-shoptop { padding: var(--space-8) var(--space-6) var(--space-3); } }
.tb-popular { max-width: 1180px; margin: 0 auto; }

/* ---------- Imágenes IA marcadas para reemplazo (solo vista previa) ---------- */
.tb-aibadge {
  position: absolute; top: var(--space-3); left: var(--space-3); z-index: 3; padding: 4px 10px; border-radius: var(--radius-full);
  background: #E0A24D; color: #1B1B1B; font-size: 11px; font-weight: 800; letter-spacing: 0.04em; pointer-events: none;
}
.tb-xhero-media .tb-aibadge { top: 150px; left: var(--space-4); }
.tb-ribbon-ai { padding: 2px 10px; border-radius: var(--radius-full); background: #E0A24D; color: #1B1B1B; font-weight: 800; }

/* Fundación Tus Manos en el inicio (SOP-35): usa el azul de la fundación (bot/web/tus_manos.css), no el verde de TBM. */
.tb-ftm { padding: clamp(56px, 9vw, 110px) 20px; background: radial-gradient(60% 70% at 80% 10%, rgba(140,184,240,.18), transparent 70%), #0A1628; color: #EEF3FA; text-align: center; }
.tb-ftm-in { max-width: 760px; margin: 0 auto; }
.tb-ftm-eyebrow { font-size: 11.5px; letter-spacing: .26em; text-transform: uppercase; color: #8CB8F0; margin: 18px 0 10px; }
.tb-ftm h2 { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; font-size: clamp(2rem, 5vw, 3.4rem); line-height: 1.05; color: #EEF3FA; margin: 0; }
.tb-ftm-steps { list-style: none; padding: 0; margin: 30px 0 22px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.tb-ftm-steps li { border: 1px solid rgba(140,184,240,.28); border-radius: 18px; padding: 18px 14px; background: #12233D; font-size: 14px; color: #C9D6E8; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.tb-ftm-steps b { font-family: "Instrument Serif", Georgia, serif; font-weight: 400; font-size: 34px; line-height: 1; color: #C4DCFA; }
.tb-ftm-steps li:last-child b { color: #E8A487; }
.tb-ftm-copy { color: #9FB0C8; max-width: 52ch; margin: 0 auto; }
.tb-ftm-cta { display: flex; gap: 18px; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 26px; }
.tb-ftm-btn { display: inline-flex; align-items: center; min-height: 48px; padding: 0 26px; border-radius: 999px; background: #8CB8F0; color: #0A1628; font-size: 12.5px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; text-decoration: none; }
.tb-ftm-btn:hover { background: #C4DCFA; }
.tb-ftm-link { color: #C4DCFA; font-size: 14px; }
.tb-nav-ftm { color: #8CB8F0 !important; }
@media (max-width: 600px) { .tb-ftm-steps { grid-template-columns: 1fr; } }