/* ============================================================
   tarjetas-destacadas · bloque genérico (título + descripción + botón, 2–3 tarjetas, logos)
   Tokens de css/tokens/* con fallback. El botón (.c-btn--*) viene del tema: aquí solo se posiciona.
   Fondo: .tdest--imagen (default) · .tdest--azul · .tdest--neutral (azul neutral) · .tdest--gris · .tdest--blanco
   Tipografía y espacios según el design system "New Design System UNITEC" (Figma · Foundations):
   H1 30/32 -2% · H2 22/26 -0.5% · H3 Bold 20/24 -0.1% · Body 2 16/20 -2% · Body 3 14/16 -1% ·
   Etiquetas 12/14 0.5px · espaciadores 4/8/12/16/24/32/40/52/56. Tracking en %: -2% = -0.02em.
   Distribución, tamaños y espaciados igualados a la sección "Curso de IA y Google for Education" de
   estudia.uvm.mx (oct 2026), conservando tipografía (Work Sans y pesos) y colores de UNITEC.
   OJO tokens: en css/tokens/_spacing.css los alias --space-4 (4px) y --space-8 (8px) pisan a la escala base
   (16px y 32px) porque se declaran después en el mismo :root. Para 16 y 32 px se usan --space-16 y --space-32.
   ============================================================ */
.tdest {
  --tdest-title-icon: 32px;
  /* tokens de sección del tema (homologados): lados 16 / 24 / 100 px · arriba y abajo 40 px */
  padding: var(--section-padding-top, 40px) var(--section-padding-x, 16px) var(--section-padding-bottom, 40px);
}

.tdest__card {
  position: relative;
  overflow: hidden;
  width: 100%;
  max-width: 1160px;
  margin: 0 auto;
  padding: var(--space-32, 32px);
  border-radius: var(--radius-xl, 16px);
  background: var(--color-primary-dark, #003053);
  color: var(--color-text-inverse, #fff);
  display: flex;
  flex-direction: column;
  gap: var(--space-6, 24px);
  font-family: var(--font-family-base, "Work Sans", Arial, sans-serif);
}

.tdest__text {
  display: flex;
  flex-direction: column;
  gap: var(--space-16, 16px);
}

/* ---- título: 26px, interlineado 1.2, sin espaciado; ícono alineado arriba ---- */
.tdest .tdest__title {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3, 12px);
  margin: 0;
  color: var(--color-text-inverse, #fff);
  font-family: inherit;
  font-size: 26px;
  line-height: 1.2;
  font-weight: var(--font-weight-bold, 700);
  letter-spacing: normal;
  text-align: left;
}

.tdest__title-icon {
  flex: 0 0 var(--tdest-title-icon, 32px);
  width: var(--tdest-title-icon, 32px);
  height: var(--tdest-title-icon, 32px);
  box-sizing: border-box;
  padding: var(--space-1, 4px);
  border-radius: var(--radius-sm, 8px);
  background: var(--color-bg-white, #fff);
  color: var(--color-primary, #006FBA);
  display: block;
}

.tdest__title-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* ---- descripción: 16/20, arranca bajo el ícono (sin sangría) ---- */
.tdest__lead {
  margin: 0;
  color: var(--color-text-inverse, #fff);
  font-size: var(--font-size-base, 16px);
  line-height: var(--line-height-md, 20px);
  font-weight: var(--font-weight-regular, 400);
  letter-spacing: normal;
}

.tdest__lead p {
  margin: 0;
  color: inherit;
  font: inherit;
}

.tdest__lead p + p {
  margin-top: var(--space-2, 8px);
}

.tdest__lead strong,
.tdest__lead b {
  font-weight: var(--font-weight-semibold, 600);
}

/* ---- tarjetas ---- */
.tdest__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: var(--space-16, 16px);
}

.tdest__item {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 12px);
  margin: 0;
  padding: var(--space-5, 20px);
  border-radius: var(--radius-md, 12px);
  overflow: hidden;
  isolation: isolate;
  font-size: var(--font-size-base, 16px);
  line-height: var(--line-height-md, 20px);
  letter-spacing: normal;
  font-weight: var(--font-weight-regular, 400);
}

.tdest__item::before {
  content: none;
}

.tdest__item-icon {
  width: 32px;
  height: 32px;
  flex: 0 0 32px;
  display: block;
}

.tdest__item-icon svg {
  width: 100%;
  height: 100%;
  display: block;
}

.tdest .tdest__item-title {
  display: block;
  margin: 0;
  max-width: 14ch;
  color: inherit;
  font-family: inherit;
  font-size: var(--font-size-lg, 18px);
  line-height: 1.2;
  font-weight: var(--font-weight-bold, 700);
  letter-spacing: normal;
}

.tdest .tdest__item-text {
  display: block;
  margin: 0;
  max-width: 24ch;
  color: inherit;
  font: inherit;
}

/* glifo decorativo: el mismo ícono de la tarjeta, grande y tenue en la esquina */
.tdest__item-deco {
  position: absolute;
  right: -28px;
  bottom: -40px;
  width: 112px;
  height: 112px;
  z-index: -1;
  opacity: 0.28;
  pointer-events: none;
}

.tdest__item-deco svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* colores por posición: 1a azul · 2a celeste · 3a blanca */
.tdest__item:nth-child(1) {
  background: var(--color-primary, #006FBA);
  color: var(--color-text-inverse, #fff);
}

.tdest__item:nth-child(2) {
  background: var(--color-bg-highlight, #DCEBF8);
  color: var(--color-text-body, #505050);
}

.tdest__item:nth-child(3) {
  background: var(--color-bg-white, #fff);
  color: var(--color-text-body, #505050);
}

.tdest .tdest__item:nth-child(n+2) .tdest__item-title {
  color: var(--color-primary-dark, #003053);
}

.tdest__item:nth-child(1) .tdest__item-icon,
.tdest__item:nth-child(1) .tdest__item-deco {
  color: var(--color-text-inverse, #fff);
}

.tdest__item:nth-child(n+2) .tdest__item-icon,
.tdest__item:nth-child(n+2) .tdest__item-deco {
  color: var(--color-primary, #006FBA);
}

/* ---- botón: solo posición (el look es del parcial button-v2) ---- */
.tdest__cta {
  display: flex;
  width: 100%;
  margin-top: var(--space-2, 8px);
}

.tdest__cta .c-btn {
  flex: 1 1 auto;
  width: auto;
}

/* medidas del botón en este módulo: 46 px de alto, padding 10/32, radio 8.
   theme-overrides.css pone `.c-btn { padding: 11px 12px; border-radius: 14px !important }`, por eso el radio lleva !important. */
.tdest .tdest__cta .c-btn {
  min-height: 46px;
  padding: 10px var(--space-32, 32px);
  border-radius: var(--radius-sm, 8px) !important;
}

/* "Secundario naranja" — tipo exclusivo de este módulo (design system UNITEC · Button "Asesor", sin data-link).
   Normal y presionado #F68B1F · hover #006FBA · deshabilitado #F3B676 · texto e íconos blancos.
   Va sobre .c-btn--secondary del tema; las medidas son las del .c-btn base. */
.tdest .tdest__cta .tdest__btn--naranja {
  background-color: var(--color-accent, #F68B1F) !important;
  border-color: transparent !important;
  color: var(--Blanco-Primario, #fff) !important;
}

.tdest .tdest__cta .tdest__btn--naranja:hover {
  background-color: var(--color-primary, #006FBA) !important;
}

.tdest .tdest__cta .tdest__btn--naranja:active {
  background-color: var(--color-accent, #F68B1F) !important;
}

.tdest .tdest__cta .tdest__btn--naranja.is-disabled,
.tdest .tdest__cta .tdest__btn--naranja[aria-disabled="true"] {
  background-color: var(--color-accent-disabled, #F3B676) !important;
}

.tdest .tdest__cta .tdest__btn--naranja :is(span, p, strong, b) {
  color: var(--Blanco-Primario, #fff) !important;
}

.tdest .tdest__cta .tdest__btn--naranja :is(svg, svg path) {
  fill: var(--Blanco-Primario, #fff) !important;
}

/* ---- franja de logos: frase + carrusel (solo CSS, pausa en hover) ---- */
.tdest__logos {
  display: flex;
  flex-direction: column;
  gap: var(--space-3, 12px);
  padding-top: var(--space-16, 16px);
  border-top: 1px solid rgba(255, 255, 255, 0.24);
}

.tdest .tdest__kicker {
  margin: 0;
  color: var(--color-text-inverse, #fff);
  font-size: 12px;
  line-height: 1.4;
  font-weight: var(--font-weight-bold, 700);
  letter-spacing: normal;
  text-transform: uppercase;
}

.tdest__slider {
  position: relative;
  overflow: hidden;
  width: 100%;
  -webkit-mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
  mask-image: linear-gradient(90deg, transparent, #000 15%, #000 85%, transparent);
}

.tdest__track {
  display: flex;
  align-items: center;
  width: max-content;
  animation: tdest-marquee calc(var(--tdest-n, 3) * 13s) linear infinite;
  will-change: transform;
}

.tdest__slider:hover .tdest__track {
  animation-play-state: paused;
}

.tdest__slide {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 32px;
  padding: 0 var(--space-6, 24px);
}

.tdest__slide img {
  display: block;
  height: 22px;
  width: auto;
  max-width: none;
  object-fit: contain;
}

.tdest__logo--color {
  display: none !important;
}

@keyframes tdest-marquee {
  from { transform: translateX(0); }
  to { transform: translateX(-25%); }
}

@media (prefers-reduced-motion: reduce) {
  .tdest__track {
    animation: none;
    flex-wrap: wrap;
    width: 100%;
    justify-content: center;
    row-gap: var(--space-3, 12px);
  }

  .tdest__slider {
    -webkit-mask-image: none;
    mask-image: none;
  }
}

/* ============================================================
   ESTILOS DE FONDO
   ============================================================ */
/* imagen (default): móvil 600×750 · desktop/tablet 1280×600 sobre azul marino.
   La imagen va en una capa propia con opacidad 0.7 para no transparentar textos ni tarjetas. */
.tdest--imagen .tdest__card {
  background-color: var(--color-primary-dark, #003053);
  isolation: isolate;
}

.tdest--imagen .tdest__card::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border-radius: inherit;
  background-image: var(--tdest-bg-m, var(--tdest-bg));
  background-position: center;
  background-size: cover;
  background-repeat: no-repeat;
  opacity: 0.7;
  pointer-events: none;
}

/* fondos claros (comparten textos oscuros, borde y logos a color): azul neutral · gris · blanco */
.tdest--neutral .tdest__card,
.tdest--gris .tdest__card,
.tdest--blanco .tdest__card {
  color: var(--color-text-primary, #323338);
}

/* azul neutral: Background/200 del DS */
.tdest--neutral .tdest__card {
  background: var(--color-bg-highlight, #DCEBF8);
}

/* gris: Background/100 del DS */
.tdest--gris .tdest__card {
  background: var(--color-bg-muted, #EDEDED);
}

/* blanco: Background/0 del DS, con el borde de 2 px de los fondos claros */
.tdest--blanco .tdest__card {
  background: var(--color-bg-white, #fff);
}

.tdest--neutral .tdest__title,
.tdest--gris .tdest__title,
.tdest--blanco .tdest__title {
  color: var(--color-primary-dark, #003053);
}

.tdest--neutral .tdest__title-icon,
.tdest--gris .tdest__title-icon,
.tdest--blanco .tdest__title-icon {
  background: var(--color-primary, #006FBA);
  color: var(--color-text-inverse, #fff);
}

.tdest--neutral .tdest__lead,
.tdest--gris .tdest__lead,
.tdest--blanco .tdest__lead {
  color: var(--color-text-body, #505050);
}

/* azul neutral: la 2a tarjeta pasa a Primary/200 (#BAD5E7) para no fundirse con el fondo celeste */
.tdest--neutral .tdest__item:nth-child(2) {
  background: var(--color-primary-disabled, #BAD5E7);
}

.tdest--neutral .tdest__item:nth-child(3),
.tdest--gris .tdest__item:nth-child(3),
.tdest--blanco .tdest__item:nth-child(3) {
  border: 2px solid var(--color-border, #C3C6D4);
}

/* fondos claros: el contenedor lleva borde de 2 px, como la referencia */
.tdest--neutral .tdest__card,
.tdest--gris .tdest__card,
.tdest--blanco .tdest__card {
  border: 2px solid var(--color-border, #C3C6D4);
}

.tdest--neutral .tdest__logos,
.tdest--gris .tdest__logos,
.tdest--blanco .tdest__logos {
  border-color: var(--color-border, #C3C6D4);
}

.tdest--neutral .tdest__kicker,
.tdest--gris .tdest__kicker,
.tdest--blanco .tdest__kicker {
  color: var(--color-text-muted, #676879);
}

.tdest--neutral .tdest__logo--white,
.tdest--gris .tdest__logo--white,
.tdest--blanco .tdest__logo--white {
  display: none !important;
}

.tdest--neutral .tdest__logo--color,
.tdest--gris .tdest__logo--color,
.tdest--blanco .tdest__logo--color {
  display: block !important;
}

/* ============================================================
   SOLO MÓVIL (<768): logos antes de las tarjetas + tarjetas sticky apiladas
   ============================================================ */
@media (max-width: 767px) {
  .tdest {
    --tdest-stack-top: 16px;
  }

  .tdest__card {
    overflow: visible;
    padding: var(--space-5, 20px); /* móvil: 20 px como la referencia */
  }

  .tdest__text {
    display: contents;
  }

  .tdest__title { order: 1; }
  .tdest__lead { order: 2; }

  .tdest__logos {
    order: 3;
    padding-top: var(--space-16, 16px);
    padding-bottom: var(--space-16, 16px);
    border-bottom: 1px solid rgba(255, 255, 255, 0.24);
  }

  .tdest--neutral .tdest__logos,
  .tdest--gris .tdest__logos,
  .tdest--blanco .tdest__logos {
    border-bottom-color: var(--color-border, #C3C6D4);
  }

  .tdest__list {
    order: 4;
    margin-top: var(--space-1, 4px);
  }

  .tdest__cta {
    order: 5;
    position: relative;
    z-index: 1;
    margin-top: var(--space-3, 12px);
  }

  .tdest__item {
    position: sticky;
    top: var(--tdest-stack-top);
    min-height: 0; /* alto según el contenido */
    box-shadow: 0 -8px 24px rgba(0, 0, 0, 0.18);
    /* ícono y título en la misma línea; descripción debajo a todo el ancho */
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    grid-template-rows: auto auto;
    align-content: start;
    column-gap: var(--space-3, 12px);
    row-gap: var(--space-3, 12px);
    padding: var(--space-16, 16px) var(--space-6, 24px);
  }

  .tdest__item-icon {
    grid-column: 1;
    grid-row: 1;
    align-self: center;
  }

  .tdest .tdest__item-title {
    grid-column: 2;
    grid-row: 1;
    align-self: center;
    max-width: none;
  }

  .tdest .tdest__item-text {
    grid-column: 1 / -1;
    grid-row: 2;
    max-width: none;
  }

  .tdest__item:nth-child(2) { top: calc(var(--tdest-stack-top) + var(--space-3, 12px)); }
  .tdest__item:nth-child(3) { top: calc(var(--tdest-stack-top) + var(--space-6, 24px)); }

  .tdest__cta .c-btn {
    min-width: 0;
    padding-left: var(--space-16, 16px);
    padding-right: var(--space-16, 16px);
  }

  .tdest__cta .c-btn span {
    white-space: nowrap;
  }
}

/* ============================================================
   ≥768: tarjetas compactas (2 o 3 columnas)
   ============================================================ */
@media (min-width: 768px) {
  .tdest--imagen .tdest__card::before {
    background-image: var(--tdest-bg, var(--tdest-bg-m));
  }

  .tdest__list {
    grid-template-columns: repeat(var(--tdest-cols, 3), minmax(0, 1fr));
    gap: var(--space-16, 16px);
  }

  .tdest__item {
    display: grid;
    grid-template-columns: 32px minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: var(--space-3, 12px);
    row-gap: var(--space-2, 8px);
    align-items: center;
    min-height: 0;
    padding: var(--space-5, 20px);
  }

  .tdest__item-icon {
    grid-column: 1;
    grid-row: 1;
  }

  .tdest .tdest__item-title {
    grid-column: 2;
    grid-row: 1;
    max-width: none;
  }

  .tdest .tdest__item-text {
    grid-column: 2;
    grid-row: 2;
    max-width: 261px;
    padding-bottom: var(--space-6, 24px);
  }

  .tdest__list[data-cols="2"] .tdest__item-text {
    max-width: 44ch;
  }

  .tdest__item-deco {
    width: 112px;
    height: 112px;
    right: -28px;
    bottom: -40px;
  }

  .tdest__cta {
    width: auto;
    justify-content: flex-start;
  }

  .tdest__cta .c-btn {
    flex: 0 0 auto;
  }

  .tdest__slide {
    padding: 0 var(--space-32, 32px);
  }

  .tdest__slide img {
    height: 32px;
  }
}

/* ============================================================
   ≥992: título + descripción a la izquierda, botón a la derecha
   ============================================================ */
@media (min-width: 992px) {
  .tdest {
    --tdest-title-icon: 36px;
  }

  .tdest__text {
    display: grid;
    /* título + descripción ocupan el resto · botón a su ancho */
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-rows: auto auto auto;
    column-gap: var(--space-32, 32px);
    row-gap: var(--space-2, 8px);
    align-items: center;
  }

  .tdest .tdest__title {
    grid-column: 1;
    grid-row: 1;
  }

  .tdest__title-icon {
    padding: var(--space-2, 8px);
  }

  .tdest__card {
    gap: var(--space-6, 24px);
  }

  .tdest__lead {
    grid-column: 1;
    grid-row: 2;
  }

  .tdest__list {
    grid-column: 1 / -1;
    grid-row: 3;
    margin-top: var(--space-16, 16px); /* 8 de row-gap + 16 = 24 entre descripción y tarjetas */
  }

  /* botón centrado respecto al bloque título + descripción */
  .tdest__cta {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: center;
    justify-self: end;
    margin: 0;
  }
}