/* The Bridge — componentes básicos.
   Regla de marca: superficies rectas (radius-none), controles y etiquetas redondos (radius-full).
   Sin sombras nunca: box-shadow siempre var(--shadow-none).
   Colores, tipografía, spacing y radius salen de tokens.css. Las medidas propias de cada
   componente (alto, padding interno, grosor de borde, diámetro) son las de la especificación.
   Las flechas son siempre las oficiales de assets/arrows (nunca dibujadas ni caracteres de texto). */

/* ---------- Render de Inter Tight ----------
   Peso exacto del eje variable (font-variation-settings "wght") en cada estilo de texto y
   componente, para que se vea igual que en los PDF, y suavizado en escala de grises. */
html,
.tb-btn, .tb-pill, .tb-list, .tb-hl, .tb-surface,
.display-number, .display-word, .display-index, .display, .display-sm, .number-step,
.heading-block, .heading-1, .heading-statement, .heading-2, .heading-3, .index-title, .heading-4,
.body-xl, .body-lg, .body, .body-sm, .caption, .label, .label-sm,
.web-display, .web-heading-1, .web-heading-2, .web-heading-3, .web-number,
.web-body-lg, .web-body, .web-small, .web-label, .web-button {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}
/* Cada estilo con el peso exacto que dice su token */
.display-number, .display-word, .display-index, .display, .display-sm, .number-step,
.heading-block, .heading-1, .heading-statement, .heading-2, .index-title,
.body-xl, .body-lg, .body, .body-sm, .caption, .label, .label-sm, .tb-pill--slides,
.web-display, .web-heading-1, .web-heading-2, .web-number, .web-body-lg, .web-body, .web-small {
  font-weight: 400;
  font-variation-settings: "wght" 400;
}
.web-label, .tb-pill--web { font-variation-settings: "wght" 500; }
.heading-3, .heading-4, .web-heading-3, .web-button, .tb-btn { font-variation-settings: "wght" 600; }
/* El resaltado hereda el peso del titular (400) y no lo engorda */
.tb-hl { font-weight: inherit; font-variation-settings: inherit; }
/* Semibold dentro de un texto de 400 */
:is(.body-xl, .body-lg, .body, .body-sm, .web-body-lg, .web-body, .web-small) :is(strong, b) { font-weight: 600; font-variation-settings: "wght" 600; }

/* ---------- Botón (web) ---------- */
.tb-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-web-xs);
  box-sizing: border-box;
  height: 48px;
  padding: 0 24px;
  border: 1px solid transparent;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-none, none);
  font: var(--text-web-button); /* web-button */
  letter-spacing: 0em;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 120ms ease, color 120ms ease, border-color 120ms ease;
}
.tb-btn:focus-visible { outline: 2px solid var(--brand-neutral-black); outline-offset: 2px; }
/* Flecha oficial (assets/arrows) a 20 px: el trazo visible mide unos 12 px, a la altura del texto */
.tb-btn__arrow { width: 20px; height: 20px; flex: none; }

.tb-btn--primary { background: var(--brand-red); border-color: var(--brand-red); color: var(--brand-neutral-white); }
.tb-btn--primary:hover { background: var(--brand-neutral-950); border-color: var(--brand-neutral-950); }

.tb-btn--secondary { background: transparent; border-color: var(--brand-neutral-black); color: var(--brand-neutral-black); }
.tb-btn--secondary:hover { background: var(--brand-neutral-950); border-color: var(--brand-neutral-950); color: var(--brand-neutral-white); }

.tb-btn--inverse { background: var(--brand-neutral-white); border-color: var(--brand-neutral-white); color: var(--brand-neutral-black); }
.tb-btn--inverse:hover { background: var(--brand-neutral-100); border-color: var(--brand-neutral-100); }
.tb-btn--inverse:focus-visible { outline-color: var(--brand-neutral-white); }

/* ---------- Píldora / etiqueta ---------- */
.tb-pill {
  display: inline-flex;
  align-items: center;
  box-sizing: border-box;
  border-style: solid;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-none, none);
  white-space: nowrap;
}
.tb-pill--web {
  padding: 6px 14px;
  border-width: 1px;
  font: var(--text-web-label); letter-spacing: 0.01em; /* web-label */
}
.tb-pill--slides {
  padding: 12px 32px;
  border-width: 1.5px;
  font: var(--text-label); letter-spacing: 0em; /* label */
}
.tb-pill--outline         { background: transparent; border-color: var(--brand-neutral-black); color: var(--brand-neutral-black); }
.tb-pill--outline-inverse { background: transparent; border-color: var(--brand-neutral-white); color: var(--brand-neutral-white); }
.tb-pill--filled-red      { background: var(--brand-red); border-color: var(--brand-red); color: var(--brand-neutral-white); }
.tb-pill--filled-white    { background: var(--brand-neutral-white); border-color: var(--brand-neutral-white); color: var(--brand-neutral-black); }

/* ---------- Círculo con flecha ---------- */
.tb-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  box-sizing: border-box;
  border-style: solid;
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-none, none);
}
.tb-arrow--web    { width: 48px; height: 48px; border-width: 1px; }
.tb-arrow--slides { width: 88px; height: 88px; border-width: 1.5px; }
.tb-arrow__icon   { width: 50%; height: 50%; }
.tb-arrow--filled          { background: var(--brand-red); border-color: var(--brand-red); color: var(--brand-neutral-white); }
.tb-arrow--outline-inverse { background: transparent; border-color: var(--brand-neutral-white); color: var(--brand-neutral-white); }
.tb-arrow--outline         { background: transparent; border-color: var(--brand-neutral-black); color: var(--brand-neutral-black); }

/* ---------- Flecha suelta (sin círculo) ---------- */
.tb-glyph { display: inline-flex; flex: none; }
.tb-glyph__icon { width: 100%; height: 100%; }
.tb-glyph--on-white { color: var(--brand-neutral-black); }
.tb-glyph--on-red,
.tb-glyph--on-dark  { color: var(--brand-neutral-white); }

/* ---------- Lista con bullet cuadrado ---------- */
.tb-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; color: var(--brand-neutral-black); }
.tb-list--web    { gap: var(--space-web-md); }
.tb-list--slides { gap: var(--space-slides-lg); }
.tb-list__item   { display: flex; align-items: flex-start; }
.tb-list--web    .tb-list__item { gap: var(--space-web-sm); }
.tb-list--slides .tb-list__item { gap: var(--space-slides-md); }
.tb-list__bullet { flex: none; background: var(--brand-red); border-radius: var(--radius-none); }
/* El cuadrado se centra en la primera línea: (alto de línea − lado) / 2 */
.tb-list--web    .tb-list__bullet { width: 12px; height: 12px; margin-top: calc((1.5em - 12px) / 2); }
.tb-list--slides .tb-list__bullet { width: 24px; height: 24px; margin-top: calc((1.35em - 24px) / 2); }
.tb-list strong { font-weight: 600; font-variation-settings: "wght" 600; }

/* ---------- Resaltado de palabra ---------- */
.tb-hl {
  background: var(--brand-red);
  color: var(--brand-neutral-white);
  border-radius: var(--radius-none);
  box-shadow: var(--shadow-none, none);
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}
.tb-hl--web    { padding: 0 var(--space-web-xs); }
.tb-hl--slides { padding: 0 var(--space-slides-sm); }

/* =====================================================================
   TARJETAS
   Superficies: radius-none siempre (también clicables) y sin sombra.
   Variantes de fondo comunes: gray (por defecto), outline, soft, red, dark, image, white.
   Web: el color lo pone la sección (ver README de Card).
   ===================================================================== */
.tb-surface {
  position: relative;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  border: 0 solid transparent;
  border-radius: var(--radius-none);
  box-shadow: var(--shadow-none, none);
  overflow: hidden;
  text-decoration: none;
  transition: background-color 120ms ease, color 120ms ease;
}
/* El texto nunca se recorta ni desborda: se ajusta al ancho de la tarjeta en varias líneas */
.tb-surface :is(h2, h3, h4, p) { margin: 0; min-width: 0; overflow-wrap: break-word; }
.tb-surface--web    { padding: var(--space-web-lg); transition-duration: 200ms; }
.tb-surface--slides { padding: var(--space-slides-lg); }

.tb-v--white   { background: var(--brand-neutral-white); color: var(--brand-neutral-black); }
.tb-v--gray    { background: var(--brand-neutral-100);   color: var(--brand-neutral-black); }
.tb-v--outline { background: var(--brand-neutral-white); color: var(--brand-neutral-black); border-color: var(--brand-red); }
.tb-surface--web.tb-v--outline    { border-width: 1px; }
.tb-surface--slides.tb-v--outline { border-width: 1.5px; }
.tb-v--soft    { background: var(--brand-red-soft);      color: var(--brand-neutral-black); }
.tb-v--red     { background: var(--brand-red);           color: var(--brand-neutral-white); }
.tb-v--dark    { background: var(--brand-neutral-950);   color: var(--brand-neutral-white); }
.tb-v--image   { background: var(--brand-neutral-studio); color: var(--brand-neutral-white); }

/* Foto a sangre (siempre proporcionada) + degradado para leer el texto */
.tb-media { position: absolute; inset: 0; z-index: 0; }
.tb-media__img { display: block; width: 100%; height: 100%; object-fit: cover; }
.tb-media--portrait .tb-media__img { object-position: 50% 0%; }
.tb-media::after, .tb-media::before { content: ""; position: absolute; inset: 0; pointer-events: none; }
.tb-media::after  { background: linear-gradient(to bottom, rgba(0,0,0,0) 40%, rgba(0,0,0,0.8) 100%); }
.tb-media::before { z-index: 1; opacity: 0; background: linear-gradient(to bottom, rgba(0,0,0,0.2) 0%, rgba(0,0,0,0.9) 100%); transition: opacity 120ms ease; }
.tb-surface > :not(.tb-media) { position: relative; z-index: 1; }

/* Hueco de foto pendiente: brand-neutral-studio con aviso */
.tb-photo-missing {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: var(--brand-neutral-studio);
  color: var(--brand-neutral-black);
  text-align: center;
}
/* Aviso siempre centrado y en caption (24), legible en web y en slides.
   Dentro de una tarjeta con texto encima (image, PersonCard) se centra en la mitad superior,
   la zona de foto que el texto y el degradado dejan libre. */
.tb-media .tb-photo-missing { bottom: 50%; }
.tb-photo-missing { font: var(--text-caption); font-variation-settings: "wght" 400; padding: 0 var(--space-web-md); }
.tb-photo-slot { position: relative; overflow: hidden; border-radius: var(--radius-none); background: var(--brand-neutral-studio); }
.tb-photo-slot .tb-media__img { position: absolute; inset: 0; }

/* Texto de las tarjetas: título + descripción */
/* Autolayout de tarjeta web con etiqueta: Pill anclada arriba a la izquierda y el bloque de
   título + descripción (+ lista) anclado abajo a la izquierda; el espacio libre queda en medio.
   Las tarjetas de una misma fila se estiran a la misma altura (rejilla o flex, comportamiento por defecto). */
.tb-card__text { display: flex; flex-direction: column; }
.tb-surface--web.tb-card--has-label > .tb-card__text { margin-top: auto; }
.tb-surface--web    .tb-card__text { gap: var(--space-web-sm); }
.tb-surface--slides .tb-card__text { gap: var(--space-slides-md); }
/* Texto anclado abajo: siempre en la variante image y, con align="bottom", en cualquier otra
   (grupo de foto: la primera tarjeta red con el texto a la misma altura que las de foto) */
.tb-v--image.tb-card, .tb-card--bottom { justify-content: flex-end; }
/* Solo párrafo (sin etiqueta ni título): el párrafo va anclado abajo a la izquierda */
.tb-card--text-only { justify-content: flex-end; }

/* ---------- LinkCard ---------- */
.tb-linkcard { justify-content: flex-end; cursor: pointer; }
/* Título y círculo: en web el círculo se apoya en la línea base del título (align-items: baseline) */
.tb-linkcard__row { display: flex; align-items: flex-end; justify-content: space-between; }
.tb-surface--web .tb-linkcard__row { align-items: baseline; }
.tb-linkcard__row > :first-child { flex: 1 1 auto; min-width: 0; }
/* En web el círculo mide 40 px */
.tb-linkcard.tb-surface--web .tb-arrow--web { width: 40px; height: 40px; }
.tb-surface--web.tb-card--has-label > .tb-linkcard__row { margin-top: auto; }
.tb-surface--web    .tb-linkcard__row { gap: var(--space-web-md); }
.tb-surface--slides .tb-linkcard__row { gap: var(--space-slides-md); }
/* El círculo toma el color del texto de la tarjeta: negro sobre claro, blanco sobre rojo, negro o foto */
.tb-linkcard .tb-arrow { background: transparent; border-color: currentColor; color: inherit; }
.tb-linkcard:focus-visible { outline: 2px solid var(--brand-neutral-black); outline-offset: 2px; }
/* Hover (web): cambia el fondo, nunca la forma */
.tb-linkcard.tb-surface--web:not(.tb-no-hover).tb-v--gray:hover    { background: var(--brand-red); color: var(--brand-neutral-white); }
.tb-linkcard.tb-surface--web:not(.tb-no-hover).tb-v--red:hover     { background: var(--brand-neutral-950); }
.tb-linkcard.tb-surface--web:not(.tb-no-hover).tb-v--outline:hover { background: var(--brand-red); color: var(--brand-neutral-white); }
.tb-linkcard.tb-surface--web:not(.tb-no-hover).tb-v--white:hover   { background: var(--brand-neutral-100); }
.tb-linkcard.tb-surface--web:not(.tb-no-hover).tb-v--soft:hover    { background: var(--brand-red); color: var(--brand-neutral-white); }
.tb-linkcard.tb-surface--web:not(.tb-no-hover).tb-v--dark:hover    { background: var(--brand-red); }
.tb-linkcard.tb-surface--web:not(.tb-no-hover).tb-v--image:hover .tb-media::before { opacity: 1; }

/* ---------- PersonCard (7:10) ---------- */
.tb-person { aspect-ratio: 7 / 10; justify-content: flex-end; align-items: center; text-align: center; background: var(--brand-neutral-studio); color: var(--brand-neutral-white); }
.tb-person.tb-surface--slides { padding: 0 var(--space-slides-lg) var(--space-slides-lg); }
.tb-person.tb-surface--web    { padding: 0 var(--space-web-lg) var(--space-web-lg); }
.tb-person__text { display: flex; flex-direction: column; align-items: center; max-width: 100%; }
.tb-surface--slides .tb-person__text { gap: var(--space-slides-sm); }
.tb-surface--web    .tb-person__text { gap: var(--space-web-xs); }
/* El nombre va siempre en Regular, también en web: conserva el tamaño de web-heading-3 (22)
   pero no el peso Semibold del token, para que no compita con el titular de la sección. */
.tb-person__name { font-weight: 400; font-variation-settings: "wght" 400; }
.tb-person__role { font-style: italic; }

/* ---------- StepRow ---------- */
.tb-step { flex: 1 1 0; flex-direction: row; align-items: center; overflow: visible; }
.tb-step.tb-surface--slides { padding: var(--space-slides-lg) var(--space-slides-2xl); gap: var(--space-slides-xl); }
.tb-step.tb-surface--web    { padding: var(--space-web-lg); gap: var(--space-web-lg); }
.tb-step__num { flex: none; min-width: 0.62em; font-variant-numeric: tabular-nums; }

/* ---------- LevelList ---------- */
.tb-levels { display: grid; grid-template-columns: auto 1fr; margin: 0; padding: 0; list-style: none; color: var(--brand-neutral-black); }
.tb-levels--slides { column-gap: var(--space-slides-lg); }
.tb-levels--web    { column-gap: var(--space-web-lg); }
.tb-levels__label {
  display: flex; align-items: center; justify-content: center; text-align: center;
  box-sizing: border-box; border-radius: var(--radius-none);
  font-weight: 600; font-variation-settings: "wght" 600;
}
.tb-levels--slides .tb-levels__label { width: 192px; padding: var(--space-slides-sm); }
.tb-levels--web    .tb-levels__label { width: 120px; padding: var(--space-web-xs); }
.tb-levels__items { display: flex; flex-direction: column; }
.tb-levels--slides .tb-levels__items { gap: var(--space-slides-lg); padding: var(--space-slides-md) 0; }
.tb-levels--web    .tb-levels__items { gap: var(--space-web-md);  padding: var(--space-web-sm) 0; }
.tb-levels__item { display: flex; flex-direction: column; }
.tb-levels--slides .tb-levels__item { gap: var(--space-slides-sm); }
.tb-levels--web    .tb-levels__item { gap: var(--space-web-xs); }
.tb-levels :is(h4, p) { margin: 0; }

/* ---------- IndexTile ---------- */
/* Solo slides: IndexTile no existe en web. */
.tb-index { justify-content: space-between; }
.tb-index.tb-surface--slides { padding: var(--space-slides-xl) var(--space-slides-lg) var(--space-slides-lg); }
.tb-index__num { white-space: nowrap; }

/* ---------- Card web: etiqueta, lista, tamaño de título y hover de sección blanca ---------- */
/* Etiqueta de tarjeta web: más pequeña que el título. web-label (13 px), padding 4 × 10 px, borde 1 px */
.tb-card__label.tb-pill { align-self: flex-start; padding: 4px 10px; border-width: 1px; font: var(--text-web-label); letter-spacing: 0.01em;
  background: transparent; border-color: currentColor; color: inherit;
  transition: background-color 200ms ease, border-color 200ms ease, color 200ms ease; }
/* Color de la etiqueta (labelTone): sin relleno por defecto (4+ tarjetas); rellena para marcar niveles
   en 2-3 tarjetas grandes (1.ª red, 2.ª dark, 3.ª soft) y dark en tarjetas white sobre sección roja. */
.tb-card__label--red.tb-pill  { background: var(--brand-red);         border-color: var(--brand-red);         color: var(--brand-neutral-white); }
.tb-card__label--dark.tb-pill { background: var(--brand-neutral-950); border-color: var(--brand-neutral-950); color: var(--brand-neutral-white); }
.tb-card__label--soft.tb-pill { background: var(--brand-red-soft);    border-color: var(--brand-red-soft);    color: var(--brand-neutral-black); }
/* Sobre tarjeta roja, o en hover: borde y texto blanco, sin relleno */
.tb-surface--web.tb-v--red .tb-card__label.tb-pill,
.tb-card.tb-surface--web:not(.tb-no-hover):is(.tb-v--gray, .tb-v--outline):hover .tb-card__label.tb-pill { background: transparent; border-color: var(--brand-neutral-white); color: var(--brand-neutral-white); }
.tb-surface--web .tb-card__label { margin-bottom: var(--space-web-md); }
.tb-card .tb-list { color: inherit; }
.tb-card .tb-list--web { gap: var(--space-web-xs); margin-top: var(--space-web-xs); }
/* Sobre rojo el bullet cuadrado pasa a blanco para no desaparecer */
.tb-v--red .tb-list__bullet { background: var(--brand-neutral-white); }
/* Sección blanca: gray y outline pasan a brand-red con todo el texto en blanco (200 ms, sin sombra, sin giro ni cambio de forma) */
.tb-card.tb-surface--web:not(.tb-no-hover):is(.tb-v--gray, .tb-v--outline):hover { background: var(--brand-red); border-color: var(--brand-red); color: var(--brand-neutral-white); }
.tb-card.tb-surface--web:not(.tb-no-hover):is(.tb-v--gray, .tb-v--outline):hover .tb-list__bullet { background: var(--brand-neutral-white); }
/* Flecha oficial arrow-up-right en blanco, esquina superior derecha a 24 px. En reposo no se ve;
   en hover entra en diagonal desde abajo a la izquierda (8 px) con fundido, en 200 ms. */
.tb-surface > .tb-card__hover-arrow {
  position: absolute; top: 24px; right: 24px; z-index: 1;
  width: 32px; height: 32px; color: var(--brand-neutral-white);
  opacity: 0; transform: translate(-8px, 8px);
  transition: opacity 200ms ease, transform 200ms ease; pointer-events: none;
}
.tb-card.tb-surface--web:not(.tb-no-hover):is(.tb-v--gray, .tb-v--outline):hover > .tb-card__hover-arrow { opacity: 1; transform: translate(0, 0); }
@media (prefers-reduced-motion: reduce) { .tb-surface > .tb-card__hover-arrow { transform: none; } }
.tb-list__bullet { transition: background-color 200ms ease; }

/* ---------- StatCard (web) ---------- */
.tb-stat { gap: var(--space-web-md); }
.tb-stat .tb-card__label { margin-bottom: 0; }
.tb-stat__body :is(h3) { margin-bottom: var(--space-web-sm); }
.tb-stat__value { display: block; white-space: nowrap; }
.tb-stat__body { display: flex; flex-direction: column; gap: var(--space-web-sm); margin-top: auto; }

/* ---------- HeroCard (slides y web) ----------
   Foto a sangre con el degradado de marca, círculo con flecha decorativo arriba a la izquierda
   y, abajo a la izquierda, una Pill roja con el título debajo. */
.tb-hero { justify-content: flex-end; color: var(--brand-neutral-white); background: var(--brand-neutral-studio); }
/* Relleno interior en los cuatro lados: ningún elemento toca el borde de la tarjeta.
   El círculo va en el mismo margen que la píldora y el título. La foto a sangre y el degradado
   van en capas posicionadas (.tb-media), así que no anulan este relleno. */
.tb-hero.tb-surface--slides { padding: var(--space-slides-xl); }
.tb-hero.tb-surface--web    { padding: var(--space-web-xl); }
.tb-surface > .tb-hero__mark { position: absolute; z-index: 1; }
.tb-hero.tb-surface--slides > .tb-hero__mark { top: var(--space-slides-xl); left: var(--space-slides-xl); }
.tb-hero.tb-surface--web    > .tb-hero__mark { top: var(--space-web-xl);    left: var(--space-web-xl); }
/* Móvil: el relleno baja al gutter de la página */
@media (max-width: 768px) {
  .tb-hero.tb-surface--web { padding: var(--space-web-gutter); }
  .tb-hero.tb-surface--web > .tb-hero__mark { top: var(--space-web-gutter); left: var(--space-web-gutter); }
}
.tb-hero__text { display: flex; flex-direction: column; align-items: flex-start; }
.tb-hero.tb-surface--slides .tb-hero__text { gap: var(--space-slides-md); }
.tb-hero.tb-surface--web    .tb-hero__text { gap: var(--space-web-sm); }
.tb-hero__label.tb-pill { background: var(--brand-red); border-color: var(--brand-red); color: var(--brand-neutral-white); }
/* En slides la píldora del hero va en label-sm (24), más pequeña que la píldora suelta de página */
.tb-hero__label.tb-pill--slides { padding: 8px 24px; font: var(--text-label-sm); }
.tb-hero__title { margin: 0; }