/* ==========================================================================
   Customer story template — estilos basados en tokens Magnific DS
   ========================================================================== */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background: var(--color-surface-0);
  color: var(--color-surface-foreground-2);
  font-family: var(--font-sans);
  font-size: var(--text-base);
  line-height: var(--leading-sans-base);
  font-feature-settings: var(--font-feature-settings-sans);
  -webkit-font-smoothing: antialiased;
}

img,
video {
  max-width: 100%;
  display: block;
}

a {
  color: inherit;
}

/* --------------------------------------------------------------------------
   Layout
   -------------------------------------------------------------------------- */

/* --------------------------------------------------------------------------
   Main header (magnific.com, estático, sin dropdowns)
   Réplica: absolute inset-x-0 top-0 z-[4] bg-transparent
   -------------------------------------------------------------------------- */

/* Sticky con el fondo glass del header de magnific.com
   (bg-surface-0/95 + backdrop-blur-lg), en tokens para el futuro dark */
.mag-header {
  position: sticky;
  top: 0;
  z-index: 4;
}

/* El glass vive en el ::before: backdrop-filter en el propio header crearía
   un containing block y el overlay del menú (fixed, inset 0) dejaría de
   ocupar el viewport para encajarse en la caja del header */
.mag-header::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: rgba(255, 255, 255, 0.95); /* fallback sin color-mix */
  background: color-mix(in srgb, var(--color-surface-0) 95%, transparent);
  -webkit-backdrop-filter: blur(var(--blur-lg));
  backdrop-filter: blur(var(--blur-lg));
}

/* mx-auto flex min-h-16 w-full max-w-screen-2xl flex-wrap items-center
   px-8 py-3 sm:flex-nowrap lg:min-h-[72px] gap-4 lg:gap-9 xl:gap-11 */
.mag-header__inner {
  position: relative;
  z-index: 2;                      /* por encima del overlay del menú móvil */
  margin-inline: auto;
  display: flex;
  min-height: 64px;
  width: 100%;
  max-width: 1536px;
  flex-wrap: wrap;
  align-items: center;
  padding: 12px 32px;
  gap: 16px;
}

@media (min-width: 640px) {
  .mag-header__inner {
    flex-wrap: nowrap;
  }
}

@media (min-width: 1024px) {
  .mag-header__inner {
    min-height: 72px;
    gap: 36px;
  }
}

@media (min-width: 1280px) {
  .mag-header__inner {
    gap: 44px;
  }
}

/* Burger (solo mobile/tablet): instancia ds-iconbtn--ghost con icono a 20
   (icon-size.md, como el burger de magnific.com). El glifo — no la caja de
   40 — queda al ras del margen de contenido: el margen negativo compensa
   el inset de la caja ((40 - 20) / 2 = 10) */
.mag-header__burger {
  color: var(--color-surface-foreground-0);
  margin-left: calc((var(--icon-size-md) - 40px) / 2);
}

/* Con .ds-iconbtn en el selector para ganarle al sm por defecto de
   `.ds-iconbtn .icon-mask`, que aparece más tarde en el archivo */
.mag-header__burger.ds-iconbtn .icon-mask {
  width: var(--icon-size-md);
  height: var(--icon-size-md);
}

/* Con el overlay abierto el burger pasa a "x" (cerrar) */
.mag-header__burger[aria-expanded="true"] .icon-mask {
  -webkit-mask: url("../icons/x.svg") no-repeat center / contain;
  mask: url("../icons/x.svg") no-repeat center / contain;
}

@media (min-width: 1024px) {
  .mag-header__burger.ds-iconbtn {
    display: none;
  }
}

/* flex shrink-0 items-center gap-4 lg:mr-auto lg:gap-10 xl:gap-11 */
.mag-header__left {
  display: flex;
  flex-shrink: 0;
  align-items: center;
  gap: 16px;
}

@media (min-width: 1024px) {
  .mag-header__left {
    margin-right: auto;
    gap: 40px;
  }
}

@media (min-width: 1280px) {
  .mag-header__left {
    gap: 44px;
  }
}

/* Logo: flex min-h-11 min-w-11 shrink-0 items-center md:min-w-[108px] */
.mag-header__logo {
  display: flex;
  min-height: 44px;
  min-width: 44px;
  flex-shrink: 0;
  align-items: center;
  color: var(--color-surface-foreground-0);
}

.mag-header__logo:focus-visible {
  outline: 1px solid var(--color-surface-border-alpha-2);
  outline-offset: 4px;
  border-radius: var(--radius-base);
}

@media (min-width: 768px) {
  .mag-header__logo {
    min-width: 108px;
  }
}

/* Lockup completo (M + brandname) en todos los breakpoints:
   w-[126px] lg:w-[144px] */
.mag-header__wordmark {
  display: block;
  height: auto;
  width: 126px;
}

@media (min-width: 1024px) {
  .mag-header__wordmark {
    width: 144px;
  }
}

/* --------------------------------------------------------------------------
   Navegación global (partials/nav-global.hbs)

   Un solo árbol de marcado con dos formas: por debajo de lg es el cajón a
   pantalla completa que abre el burger, con cada desplegable como acordeón,
   y en ≥lg pasa a barra horizontal con los paneles flotando bajo su trigger.
   Duplicar el marcado para móvil obligaría a mantener ~90 enlaces por
   partida doble.
   -------------------------------------------------------------------------- */

/* Cajón: cubre el viewport y solo aparece con .is-open (theme.js). El header
   queda por encima gracias al z-index de __inner, para poder cerrarlo. */
.mag-nav {
  position: fixed;
  inset: 0;
  z-index: 1;
  display: none;
  flex-direction: column;
  padding: 88px var(--container-pad) 48px;
  background: var(--color-surface-0);
  overflow-y: auto;
  overscroll-behavior: contain;
}

.mag-nav.is-open {
  display: flex;
}

/* El cajón cuelga de __inner, así que su z-index compite con el del propio
   contenido del header: logo, burger y botones suben un escalón para seguir
   visibles y clicables por encima de él (el burger es el que lo cierra). */
@media (max-width: 1023px) {
  .mag-header__burger,
  .mag-header__logo,
  .mag-header__right {
    position: relative;
    z-index: 2;
  }
}

/* En pantallas bajas los ítems scrollean bajo la zona del header, que es
   transparente: esta banda fija (misma altura que el padding-top) los tapa
   con el mismo glass del header. Va sobre los ítems (z-index 1) y bajo
   __inner (z-index 2). */
.mag-nav::before {
  content: "";
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: 88px;
  z-index: 1;
  background: rgba(255, 255, 255, 0.95); /* fallback sin color-mix */
  background: color-mix(in srgb, var(--color-surface-0) 95%, transparent);
  -webkit-backdrop-filter: blur(var(--blur-lg));
  backdrop-filter: blur(var(--blur-lg));
}

/* Scroll-lock mientras el cajón está abierto (lo alterna theme.js) */
body.menu-open {
  overflow: hidden;
}

/* Ítems de primer nivel: el trigger de cada desplegable y el enlace suelto
   (Pricing) comparten caja y tipografía */
.mag-nav__link,
.mag-menu__trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 8px 0;
  border: 0;
  background: none;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  font-family: var(--font-sans);
  font-size: var(--text-2xl);
  font-weight: var(--font-medium);
  line-height: var(--leading-sans-2xl);
  color: var(--color-surface-foreground-0);
  font-feature-settings: var(--font-feature-settings-sans);
  transition: color var(--duration-fast) var(--ease-standard);
}

.mag-nav__link:hover,
.mag-menu__trigger:hover,
.mag-menu__trigger[aria-expanded="true"] {
  color: var(--color-emphasis-0);
}

/* FocusStroke del sistema */
.mag-nav__link:focus-visible,
.mag-menu__trigger:focus-visible,
.mag-menu__panel a:focus-visible {
  outline: 1px solid var(--color-surface-border-alpha-2);
  outline-offset: 4px;
  border-radius: var(--radius-base);
}

/* Caret: solo en el cajón, que es donde el ítem se comporta como acordeón.
   La barra de magnific.com no lleva chevron en los triggers.
   Con .mag-menu__trigger en el selector para ganarle al display y al tamaño
   por defecto de `.icon-mask`, que se declara más abajo en el archivo. */
.mag-menu__trigger .mag-menu__caret {
  margin-left: auto;
  width: var(--icon-size-md);
  height: var(--icon-size-md);
  transition: transform var(--duration-fast) var(--ease-standard);
}

.mag-menu__trigger[aria-expanded="true"] .mag-menu__caret {
  transform: rotate(180deg);
}

.icon-mask--chevron-down {
  -webkit-mask: url("../icons/chevron-down.svg") no-repeat center / contain;
  mask: url("../icons/chevron-down.svg") no-repeat center / contain;
}

/* Glifos de los desplegables: cabeceras de columna y recuadros de las filas
   con descripción. magnific.com los sirve desde un sprite propio; aquí van
   como máscaras, igual que el resto de iconos del theme. */
.icon-mask--image {
  -webkit-mask: url("../icons/image.svg") no-repeat center / contain;
  mask: url("../icons/image.svg") no-repeat center / contain;
}

.icon-mask--video {
  -webkit-mask: url("../icons/video.svg") no-repeat center / contain;
  mask: url("../icons/video.svg") no-repeat center / contain;
}

.icon-mask--audio {
  -webkit-mask: url("../icons/audio.svg") no-repeat center / contain;
  mask: url("../icons/audio.svg") no-repeat center / contain;
}

.icon-mask--cube-3d {
  -webkit-mask: url("../icons/cube-3d.svg") no-repeat center / contain;
  mask: url("../icons/cube-3d.svg") no-repeat center / contain;
}

.icon-mask--design {
  -webkit-mask: url("../icons/design.svg") no-repeat center / contain;
  mask: url("../icons/design.svg") no-repeat center / contain;
}

.icon-mask--grid {
  -webkit-mask: url("../icons/grid.svg") no-repeat center / contain;
  mask: url("../icons/grid.svg") no-repeat center / contain;
}

.icon-mask--info {
  -webkit-mask: url("../icons/info.svg") no-repeat center / contain;
  mask: url("../icons/info.svg") no-repeat center / contain;
}

.icon-mask--following {
  -webkit-mask: url("../icons/following.svg") no-repeat center / contain;
  mask: url("../icons/following.svg") no-repeat center / contain;
}

.icon-mask--blog {
  -webkit-mask: url("../icons/blog.svg") no-repeat center / contain;
  mask: url("../icons/blog.svg") no-repeat center / contain;
}

.icon-mask--question {
  -webkit-mask: url("../icons/question.svg") no-repeat center / contain;
  mask: url("../icons/question.svg") no-repeat center / contain;
}

.icon-mask--envelope {
  -webkit-mask: url("../icons/envelope.svg") no-repeat center / contain;
  mask: url("../icons/envelope.svg") no-repeat center / contain;
}

.icon-mask--security {
  -webkit-mask: url("../icons/security.svg") no-repeat center / contain;
  mask: url("../icons/security.svg") no-repeat center / contain;
}

.icon-mask--users {
  -webkit-mask: url("../icons/users.svg") no-repeat center / contain;
  mask: url("../icons/users.svg") no-repeat center / contain;
}

.mag-menu__panel[hidden] {
  display: none;
}

/* En el cajón el panel es contenido en flujo; en ≥lg pasa a flotante */
.mag-menu__panel {
  padding: 4px 0 24px;
}

.mag-menu__cols {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* Cabecera de columna (Imagen, Vídeo, Audio…) y rótulo de sección
   (Compañía / Más), que en el original es un hairline con versalitas */
.mag-menu__col-title {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 0 0 8px;
  padding-bottom: 4px;
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: var(--color-surface-foreground-0);
}

.mag-menu__col-title .icon-mask {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
}

/* Rótulo de sección (Compañía / Más): en producción es caja alta normal, no
   versalitas — hairline border-alpha-2 y py 10 */
.mag-menu__section {
  margin: 0 0 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--color-surface-border-alpha-2);
  font-size: var(--text-xs);
  font-weight: var(--font-regular);
  color: var(--color-surface-foreground-0);
}

.mag-menu__col ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* Fila de enlace: el margen negativo hace que el relleno del hover sangre
   hasta el borde de la columna, como en producción (-ml-2 / pl-2) */
.mag-menu__col a {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  margin-left: -8px;
  padding: 2px 0 2px 8px;
  border-radius: var(--radius-sm);
  text-decoration: none;
  font-size: var(--text-base);
  line-height: var(--leading-sans-base);
  color: var(--color-surface-foreground-2);
  transition: color var(--duration-fast) var(--ease-standard),
    background var(--duration-fast) var(--ease-standard);
}

.mag-menu__col a:hover {
  background: var(--color-surface-2);
  color: var(--color-emphasis-0);
}

/* Filas con icono en recuadro y descripción (Recursos y Enterprise) */
.mag-menu__col--rich ul {
  gap: 12px;
}

.mag-menu__col--rich a {
  gap: 8px;
  margin-left: 0;
  padding: 4px;
}

.mag-menu__tile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  flex-shrink: 0;
  border-radius: var(--radius-sm); /* rounded-base {mega-menu.md §Rich row} */
  background: var(--color-surface-2);
  color: var(--color-surface-foreground-1);
  transition: background var(--duration-fast) var(--ease-standard),
    color var(--duration-fast) var(--ease-standard);
}

.mag-menu__tile .icon-mask {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
}

.mag-menu__col--rich a:hover .mag-menu__tile {
  background: var(--color-surface-3);
  color: var(--color-surface-foreground-0);
}

.mag-menu__lines {
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.mag-menu__label {
  font-size: var(--text-sm);
  line-height: var(--leading-sans-sm);
}

.mag-menu__desc {
  font-size: var(--text-xs);
  line-height: var(--leading-sans-xs);
  color: var(--color-surface-foreground-3);
}

.mag-menu__col--rich a:hover .mag-menu__desc {
  color: var(--color-surface-foreground-2);
}

/* Badge "New" de los ítems recientes: el chip badge-emphasis-soft
   {components/mega-menu.md §"New" tag} — fondo emphasis-0 al 15% y tinta
   emphasis-0 (badge-foreground-emphasis-soft), no el paso -2 de la rampa */
.mag-menu__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 18px;
  padding: 0 6px;
  border-radius: var(--radius-sm);
  background: rgba(255, 88, 174, 0.15); /* fallback sin color-mix */
  background: color-mix(in srgb, var(--color-emphasis-0) 15%, transparent);
  color: var(--color-emphasis-0);
  font-size: var(--text-2xs);
  font-weight: var(--font-medium);
  line-height: 1;
}

/* Tarjeta lateral de los paneles de Recursos y Enterprise: pozo de media,
   enlace y pie, en ese orden */
.mag-menu__feature {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 20px;
  /* rounded + rounded-r-lg: el lado que da al borde del panel redondea más */
  border-radius: var(--radius-sm) var(--radius-base) var(--radius-base)
    var(--radius-sm);
  background: var(--color-ghost-1);
}

.mag-menu__feature p {
  font-size: var(--text-xs);
  line-height: var(--leading-sans-xs);
  color: var(--color-surface-foreground-3);
}

/* Pozo de media: la imagen de Casos de éxito recorta a 120 (object-cover) y
   el vídeo de Eventos se sirve entero a 240 de alto, como en el original */
.mag-menu__media {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 120px;
  overflow: hidden;
  border-radius: var(--radius-xs);
}

.mag-menu__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.mag-menu__media--tall {
  height: 240px;
}

.mag-menu__media--tall video {
  width: auto;
  height: 100%;
}

/* El enlace de la card no es el del pie de Stock: va en regular y su hover
   apaga la tinta en vez de virar a magenta */
.mag-menu__feature .mag-menu__more-link {
  font-weight: var(--font-regular);
}

.mag-menu__feature .mag-menu__more-link:hover {
  color: var(--color-surface-foreground-2);
}

.mag-menu__more-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  text-decoration: none;
  font-size: var(--text-sm);
  font-weight: var(--font-bold);
  color: var(--color-surface-foreground-0);
  transition: color var(--duration-fast) var(--ease-standard);
}

.mag-menu__more-link:hover {
  color: var(--color-emphasis-0);
}

.mag-menu__more-link .icon-mask {
  width: var(--icon-size-xs);
  height: var(--icon-size-xs);
}

.mag-menu__note {
  margin-top: 16px;
}

/* Aviso del servicio legacy, al pie de Creative Suite: la píldora de 38 de
   alto sobre surface-2, con la tinta apagada que vira a magenta */
.mag-menu__legacy {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 38px;
  padding-inline: 12px;
  border-radius: var(--radius-base);
  background: var(--color-surface-2);
  text-decoration: none;
  font-size: var(--text-sm);
  color: var(--color-surface-foreground-2);
  transition: color var(--duration-fast) var(--ease-standard);
}

.mag-menu__legacy:hover {
  color: var(--color-emphasis-0);
}

/* CTA del cajón: no se estira al ancho del cajón, y se separa del último
   ítem de la lista para que no se lea como uno más */
.mag-nav__cta {
  align-self: flex-start;
  margin-top: 24px;
  height: 48px;
  padding: 0 24px;
}

/* Barra horizontal: a partir de lg desaparece el burger y el cajón se
   convierte en la fila de ítems del header */
@media (min-width: 1024px) {
  .mag-nav > .mag-nav__cta {
    display: none;
  }

  .mag-nav {
    position: static;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 32px;
    padding: 0;
    background: none;
    overflow: visible;
  }

  .mag-nav::before {
    content: none;
  }

  /* Enterprise solo cabe inline desde xl, como en magnific.com; en lg queda
     accesible desde el footer y el propio panel de precios */
  .mag-nav > .mag-menu--xl {
    display: none;
  }

  .mag-menu {
    position: relative;
  }

  .mag-nav__link,
  .mag-menu__trigger {
    width: auto;
    height: 48px;
    padding: 0;
    font-size: var(--text-base);
    font-weight: var(--font-regular);
    line-height: 1.625;
    white-space: nowrap;
  }

  .mag-menu__trigger .mag-menu__caret {
    display: none;
  }

  /* Panel flotante bajo el trigger. El desplazamiento horizontal para que no
     se salga por la derecha lo calcula theme.js en --mag-menu-shift: depende
     del ancho real del panel y del viewport, así que no hay valor fijo.

     El panel va SIEMPRE en oscuro, como en producción, donde el popover
     fuerza `dark` con independencia del tema de la página (`dark !bg-surface-1
     !border-0 !shadow-none !rounded-[10px] !px-8 !py-10`). Se resuelve
     reapuntando aquí los tokens semánticos a sus valores de {colors-dark} de
     design.md, no reescribiendo el componente: dentro del panel, surface-1 es
     #1A1A1A y surface-foreground-0 es #F5F5F5, y todo lo que hay debajo
     (filas, recuadros, tarjeta, píldora) se resuelve solo. El cajón de <lg
     se queda claro porque esto vive dentro del media query.

     El radio de 10 es intrínseco del componente, no un paso de la escala
     {components/mega-menu.md §Known gaps}. */
  .mag-menu__panel {
    --color-surface-0: #101010;
    --color-surface-1: #1a1a1a;
    --color-surface-2: #2b2b2b;
    --color-surface-3: #353535;
    --color-surface-4: #424242;
    --color-surface-foreground-0: #f5f5f5;
    --color-surface-foreground-1: #e3e3e3;
    --color-surface-foreground-2: #c2c2c2;
    --color-surface-foreground-3: #aaaaaa;
    --color-surface-foreground-4: #737373;
    --color-surface-border-alpha-0: rgba(255, 255, 255, 0.08);
    --color-surface-border-alpha-1: rgba(255, 255, 255, 0.12);
    --color-surface-border-alpha-2: rgba(255, 255, 255, 0.2);
    --color-ghost-0: rgba(255, 255, 255, 0);
    --color-ghost-1: rgba(255, 255, 255, 0.1);
    --color-ghost-2: rgba(255, 255, 255, 0.15);
    --color-ghost-foreground-0: #f5f5f5;

    position: absolute;
    top: 100%;
    left: 0;
    z-index: 10;                   /* z-index.dropdown */
    margin-top: 8px;               /* pt-2 del original */
    padding: 40px 32px;            /* py-10 px-8 */
    /* Sin width el shrink-to-fit del absoluto toma el ancho del trigger como
       espacio disponible y apila las columnas en una sola. Con max-content
       piden lo suyo y el envolvimiento lo decide el max-width. */
    width: max-content;
    /* Tope holgado: el de Recursos mide 992 y en lg no cabría contra el
       padding de contenedor. Que no se salga por la derecha ya lo resuelve
       el shift de theme.js. */
    max-width: calc(100vw - 32px);
    transform: translateX(var(--mag-menu-shift, 0px));
    background: var(--color-surface-1);
    border: 0;
    border-radius: 10px;
    box-shadow: none;
    color: var(--color-surface-foreground-0);
  }

  /* Puente invisible sobre el margen de 8px que separa el panel del trigger:
     sin él, bajar de uno a otro saca el puntero del .mag-menu y el mouseleave
     que cierra el panel (theme.js) se dispararía a mitad de camino */
  .mag-menu__panel::before {
    content: "";
    position: absolute;
    inset: -8px 0 auto;
    height: 8px;
  }

  /* Recursos y Enterprise no ensanchan el padding (px-6 py-4) */
  .mag-menu__panel--compact {
    padding: 16px 24px;
  }

  /* Rejilla de columnas: `grid auto-cols-fr grid-flow-col gap-6` con las
     listas a 150 de ancho. Que el ancho lo ponga la rejilla es lo que hace
     que el panel mida exactamente lo mismo que en producción (1084 con las
     seis columnas de Creative Suite) sin cálculos a mano. */
  .mag-menu__cols {
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: 150px;
    gap: 24px;
  }

  /* min-width: 0 para que el ancho declarado mande: por defecto un ítem de
     rejilla no baja de su min-content, y los enlaces largos ("Sound Effect
     Generator") ensanchaban la columna en vez de partirse en dos líneas */
  .mag-menu__col {
    width: 150px;
    min-width: 0;
  }

  /* 3D + Diseño comparten celda y se apilan; en xl el grupo desaparece de la
     caja (display:contents) y sus dos columnas pasan a ser de la rejilla */
  .mag-menu__group {
    display: flex;
    flex-direction: column;
    gap: 24px;
    min-width: 0;
  }

  .mag-menu__col a {
    font-size: var(--text-xs);
    color: var(--color-surface-foreground-2);
  }

  /* Recursos y Enterprise: dos columnas de 320 + la tarjeta lateral */
  .mag-menu__cols--split {
    grid-auto-columns: auto;
    align-items: start;
  }

  .mag-menu__cols--split .mag-menu__col,
  .mag-menu__cols--split .mag-menu__col--rich {
    width: 320px;
  }

  .mag-menu__cols--split .mag-menu__col a {
    font-size: var(--text-sm);
  }

  .mag-menu__feature {
    width: 256px;
    flex-shrink: 0;
  }
}

/* …y a partir de xl vuelve a la barra (xl:flex del original) */
@media (min-width: 1280px) {
  .mag-nav > .mag-menu--xl {
    display: block;
  }

  /* xl:contents — 3D y Diseño dejan de compartir celda */
  .mag-menu__group {
    display: contents;
  }
}

/* Lado derecho: ml-auto flex min-w-0 items-center gap-2 lg:ml-0 lg:gap-4 */
.mag-header__right {
  margin-left: auto;
  display: flex;
  min-width: 0;
  align-items: center;
  gap: 8px;
}

@media (min-width: 1024px) {
  .mag-header__right {
    margin-left: 0;
    gap: 16px;
  }
}

/* Botón de búsqueda del header: Button outline con icono + label; el hint
   ⌘K solo en ≥lg y en <sm colapsa a icon-only (caja 40 como los iconbtn) */
.mag-search-btn .icon-mask {
  flex-shrink: 0;
}

.mag-search-btn__kbd {
  display: none;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  line-height: 1;
  color: var(--color-surface-foreground-4);
}

@media (min-width: 1024px) {
  .mag-search-btn__kbd {
    display: block;
  }
}

@media (max-width: 639px) {
  .mag-search-btn {
    width: 40px;
    padding: 0;
  }

  .mag-search-btn__label,
  .mag-search-btn__kbd {
    display: none;
  }
}

/* Salida a magnific.com: no se encoge junto al buscador ni parte el texto en
   dos líneas cuando el header va justo de ancho */
/* Con .mag-header__right en el selector para ganarle al display del .ds-btn,
   que se declara más abajo en el archivo */
.mag-header__right .mag-header__goto {
  display: none;
}

@media (min-width: 1024px) {
  .mag-header__right .mag-header__goto {
    display: inline-flex;
    flex-shrink: 0;
    white-space: nowrap;
  }
}

/* --------------------------------------------------------------------------
   Tabs de categorías del blog (partials/nav-categories.hbs)

   Fila de píldoras que scrollea en horizontal, con degradado y flecha en el
   borde que tenga recorrido, como los tabs de magnific.com. Va bajo el h1 y la
   descripción del hero, porque las categorías filtran el listado y no navegan
   el sitio (esa es la global, en el header), así que solo la pintan las
   pantallas de listado — index.hbs y tag.hbs.

   No es sticky: se va con el hero al scrollear. Por eso tampoco lleva fondo
   propio — los degradados de los bordes se funden con la superficie de la
   página (surface-0, la del body). Se ve entera en todos los breakpoints: en
   móvil la fila scrollea en horizontal, sin burger propio.

   Cada tab es una instancia de Button md rounded (ghost / secondary la activa),
   así que aquí no hay tipografía ni colores propios: solo la caja.
   -------------------------------------------------------------------------- */

/* El aire es el mismo arriba y abajo (el padding de la fila también, así que
   los huecos que se ven a los lados de las píldoras son iguales): la fila
   separa por igual el hero del que viene y el listado al que se aplica */
.blog-tabs {
  margin-block: 32px;
}

/* 1360 (no --container-max, que es el ancho del header): la fila arranca en el
   mismo margen que el h1 y las cards del listado. Relative porque es la caja a
   la que se anclan los bordes con degradado */
.blog-tabs__inner {
  position: relative;
  margin-inline: auto;
  width: 100%;
  max-width: 1360px;
}

/* La fila que scrollea. El padding vertical deja sitio al foco de las píldoras
   (offset 4 fuera del borde), que el overflow recortaría */
.blog-tabs__row {
  display: flex;
  align-items: center;
  padding: 8px var(--container-pad);
  overflow-x: auto;
  scrollbar-width: none;
}

.blog-tabs__row::-webkit-scrollbar {
  display: none;
}

/* Las píldoras no se estiran ni se encogen: el ancho lo da su texto. Van
   pegadas, como en el original — los 16 de padding de cada Button md ya
   separan las etiquetas */
.blog-tabs__row .ds-btn {
  flex: none;
}

/* Bordes: degradado hasta la superficie de la página + flecha. Ocultos hasta
   que theme.js marca que queda fila por ese lado */
.blog-tabs__edge {
  position: absolute;
  top: 0;
  height: 100%;
  display: flex;
  align-items: center;
  pointer-events: none;            /* la fila de debajo sigue arrastrable */
  opacity: 0;
  transition: opacity var(--duration-base) var(--ease-standard);
}

/* El degradado llega al borde del viewport (que es donde acaba la fila cuando
   scrollea) y la flecha se queda en el margen de contenido, a plomo con el h1.
   El tramo opaco tapa margen y flecha; el resto es la rampa hasta transparente */
.blog-tabs__edge--start {
  left: 0;
  padding-left: var(--container-pad);
  padding-right: 32px;
  background: linear-gradient(
    to right,
    var(--color-surface-0),
    var(--color-surface-0) 65%,
    transparent
  );
}

.blog-tabs__edge--end {
  right: 0;
  padding-left: 32px;
  padding-right: var(--container-pad);
  background: linear-gradient(
    to left,
    var(--color-surface-0),
    var(--color-surface-0) 65%,
    transparent
  );
}

.blog-tabs.is-overflow-start .blog-tabs__edge--start,
.blog-tabs.is-overflow-end .blog-tabs__edge--end {
  opacity: 1;
}

.blog-tabs.is-overflow-start .blog-tabs__edge--start .blog-tabs__scroll,
.blog-tabs.is-overflow-end .blog-tabs__edge--end .blog-tabs__scroll {
  pointer-events: auto;
}

/* Instancia IconButton con la caja de 24 y el icono de 10 del original
   (size-6 / size-2.5), un paso por debajo del sm del theme (32/14), y con el
   fill surface-3 → -4 que pide ahí, que no es ninguna de las variantes */
.blog-tabs__scroll {
  width: 24px;
  height: 24px;
  background: var(--color-surface-3);
  color: var(--color-surface-foreground-0);
}

.blog-tabs__scroll:hover {
  background: var(--color-surface-4);
}

.blog-tabs__scroll .icon-mask {
  width: var(--icon-size-3xs);
  height: var(--icon-size-3xs);
}

/* El aire de debajo de la fila lo pone su propio margin (32), no los 48/64 con
   los que el destacado y el grid se separan del hero */
.blog-tabs + .blog-featured,
.blog-tabs + .blog-grid {
  margin-top: 0;
}

/* Spotlight de búsqueda: overlay con panel bajo el top del viewport.
   Campo arriba (icono + input + Esc) y resultados en lista debajo */
.mag-spotlight {
  position: fixed;
  inset: 0;
  z-index: 40;                     /* z-index.modal (sobre header y dropdowns) */
}

/* Scroll-lock mientras el spotlight está abierto (lo alterna theme.js) */
body.spotlight-open {
  overflow: hidden;
}

.mag-spotlight__backdrop {
  position: absolute;
  inset: 0;
  background: var(--color-overlay-dialog);
}

.mag-spotlight__panel {
  position: relative;
  margin: 12vh auto 0;
  width: min(640px, calc(100% - 32px));
  background: var(--color-surface-0);
  border: 1px solid var(--color-surface-border-alpha-1);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.mag-spotlight__field {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 16px 20px;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  color: var(--color-surface-foreground-0);
}

.mag-spotlight__field .icon-mask {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
  flex-shrink: 0;
  color: var(--color-surface-foreground-3);
}

.mag-spotlight__field input {
  min-width: 0;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  outline: none;
}

.mag-spotlight__field input::placeholder {
  color: var(--color-form-foreground-0);
}

.mag-spotlight__kbd {
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  line-height: 1;
  color: var(--color-surface-foreground-4);
  padding: 4px 6px;
  border: 1px solid var(--color-surface-border-alpha-1);
  border-radius: 6px;
}

.mag-spotlight__results {
  margin: 0;
  padding: 8px;                    /* spacing.2, como los dropdowns del header */
  list-style: none;
  border-top: 1px solid var(--color-surface-border-alpha-1);
  max-height: min(400px, 55vh);
  overflow-y: auto;
}

.mag-spotlight__results a {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 12px;
  border-radius: var(--radius-base);
  color: var(--color-surface-foreground-0);
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  line-height: var(--leading-sans-sm);
  text-decoration: none;
}

.mag-spotlight__results a:hover,
.mag-spotlight__results a:focus-visible {
  background: var(--color-ghost-1);
  outline: none;
}

/* Pretitle de categoría del post, como el de las cards */
.mag-spotlight__results a .mag-spotlight__tag {
  margin-left: auto;
  flex-shrink: 0;
  color: var(--color-surface-foreground-3);
  font-size: var(--text-xs);
  font-weight: var(--font-regular);
}

/* Fila "ver todos" y estado sin resultados */
.mag-spotlight__results .mag-spotlight__all a {
  color: var(--color-surface-foreground-2);
}

.mag-spotlight__results .mag-spotlight__all a:hover {
  color: var(--color-surface-foreground-0);
}

.mag-spotlight__empty {
  padding: 10px 12px;
  color: var(--color-surface-foreground-3);
  font-size: var(--text-sm);
  line-height: var(--leading-sans-sm);
}


/* --------------------------------------------------------------------------
   Tipografía base
   -------------------------------------------------------------------------- */

h1 {
  font-family: var(--font-alternate);
  font-size: clamp(var(--text-5xl), 5vw, var(--text-7xl));
  font-weight: var(--font-extrabold);
  line-height: var(--leading-alternate-7xl);
  letter-spacing: var(--tracking-alternate);
  color: var(--color-surface-foreground-1);
  margin: 40px 0 0;
}

h2 {
  font-family: var(--font-sans);
  font-size: clamp(var(--text-2xl), 3.2vw, var(--text-3xl));
  font-weight: var(--font-semibold);
  line-height: var(--leading-sans-3xl);
  letter-spacing: var(--tracking-sans-3xl);
  color: var(--color-surface-foreground-1);
  margin: 12px 0 0;
}

p {
  margin: 0;
}

/* OpenType features por familia (design.md):
   ss02/ss03 son de Geist; alternate y mono van en `normal`
   para no activar la a/g con muesca de ES Klarheit. */
h1,
.post-hero__title,
.cta-panel h2 {
  font-feature-settings: var(--font-feature-settings-alternate);
}

.credits__title,
.credits__group h3,
.cta-panel__features,
.prompt-block,
.prompt-block__label,
.related-card__tag {
  font-feature-settings: var(--font-feature-settings-monospace);
}

/* ==========================================================================
   Componentes Magnific DS
   ========================================================================== */

/* Badge — instancia secondary-outline / pill / md (Figma 18799:203)
   h-24px, px-8px, gap-6px, border solid-10, label 12px medium ss02/ss03 */
.ds-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  height: 24px;
  width: fit-content;
  padding: 0 8px;
  border: 1px solid var(--color-surface-border-solid-10);
  border-radius: var(--radius-pill);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  line-height: 1.5;
  color: var(--color-secondary-0);
  white-space: nowrap;
  font-feature-settings: "ss02" 1, "ss03" 1;
}

/* Breadcrumb — ruta de navegación (Blog / Categoría / Página actual)
   estilo label mono (como .prompt-block__label / .article__tag):
   mono xs medium · tracking 0.08em · uppercase · separador "/" foreground-4 */
.ds-breadcrumb ol {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  line-height: var(--leading-mono-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-feature-settings: var(--font-feature-settings-monospace);
}

.ds-breadcrumb li {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto; /* los crumbs fijos nunca encogen: el espaciado no varía al redimensionar */
  white-space: nowrap;
}

.ds-breadcrumb li + li::before {
  content: "/";
  color: var(--color-surface-foreground-4);
}

.ds-breadcrumb a {
  color: var(--color-surface-foreground-3);
  text-decoration: none;
  transition: color var(--duration-base) var(--ease-standard);
}

.ds-breadcrumb a:hover {
  color: var(--color-surface-foreground-1);
}

.ds-breadcrumb a:focus-visible {
  outline: 1px solid var(--color-surface-border-alpha-2);
  outline-offset: 4px;
  border-radius: var(--radius-base);
}

/* El crumb actual llena el resto de la fila: así el fade solo
   toca el texto cuando realmente desborda */
.ds-breadcrumb li[aria-current="page"] {
  flex: 1 1 auto;
  min-width: 0; /* único crumb que absorbe la falta de espacio (vía fade) */
}

.ds-breadcrumb [aria-current="page"] span {
  display: block;
  flex: 1 1 auto;                  /* llena el crumb aunque el texto sea corto */
  min-width: 0;
  overflow: hidden;
  color: var(--color-surface-foreground-0);
  /* desbordamiento con fade out en lugar de corte */
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 64px), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 64px), transparent);
}

/* Button — instancia secondary / md / rectangle (components/button.md)
   md: h-40 (spacing.10) · px-16 (spacing.4) · gap-8 (spacing.2) ·
   radius 8 (rounded-lg) · texto sm 14/1.6 medium */
.ds-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 40px;
  padding: 0 16px;
  border: none;
  border-radius: var(--radius-base);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  line-height: var(--leading-sans-sm);
  font-weight: var(--font-medium);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard);
}

/* FocusStroke: border-1 en surface-border-alpha-2, offset 4 fuera del borde */
.ds-btn:focus-visible {
  outline: 1px solid var(--color-surface-border-alpha-2);
  outline-offset: 4px;
}

/* Icono trailing en Button md: icon-size.sm (16) */
.ds-btn .icon-mask {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
}

/* secondary: rest -0 · hover -1 · pressed -2 */
.ds-btn--secondary {
  background: var(--color-secondary-0);
  color: var(--color-secondary-foreground-0);
}

.ds-btn--secondary:hover {
  background: var(--color-secondary-1);
}

.ds-btn--secondary:active {
  background: var(--color-secondary-2);
}

/* ghost: fill transparente · hover/pressed rellenan con los alphas ghost */
.ds-btn--ghost {
  background: var(--color-ghost-0);
  color: var(--color-ghost-foreground-0);
}

.ds-btn--ghost:hover {
  background: var(--color-ghost-1);
}

.ds-btn--ghost:active {
  background: var(--color-ghost-2);
}

/* shape rounded: píldora (rounded-full) — frente al rectangle por defecto (radius 8) */
.ds-btn--rounded {
  border-radius: var(--radius-pill);
}

/* outline: fill transparente, borde border-alpha (como .ds-iconbtn--outline) */
.ds-btn--outline {
  background: transparent;
  color: var(--color-outline-foreground-0);
  border: 1px solid var(--color-outline-border-0);
}

.ds-btn--outline:hover {
  background: var(--color-outline-1);
  border-color: var(--color-outline-border-1);
}

.ds-btn--outline:active {
  background: var(--color-outline-2);
  border-color: var(--color-outline-border-2);
}

/* inverse: CTA claro sobre media/scrims (surface-0 sobre imagen) */
.ds-btn--inverse {
  background: var(--color-surface-0);
  color: var(--color-secondary-0);
}

.ds-btn--inverse:hover {
  background: var(--color-surface-1);
}

.ds-btn--inverse:active {
  background: var(--color-surface-2);
}

/* size sm: h-32, px-16, label xs */
.ds-btn--sm {
  height: 32px;
  font-size: var(--text-xs);
  line-height: var(--leading-sans-xs);
}

/* Disabled — design.md no define regla; convención del theme: tinta y borde
   bajan a los tonos muted, sin apilar opacity (mantiene contraste legible) */
.ds-btn:disabled,
.ds-btn[aria-disabled="true"],
.ds-btn.is-disabled,
.ds-iconbtn:disabled,
.ds-iconbtn[aria-disabled="true"],
.ds-iconbtn.is-disabled {
  color: var(--color-surface-foreground-4);
  background: transparent;
  border-color: var(--color-surface-border-alpha-1);
  cursor: default;
  pointer-events: none;
}

/* Avatar — instancia flat / lg / premium (Figma 17559:12265)
   44x44px, rounded-full, bg surface/4, corona 16px con borde premium */
.ds-avatar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  border-radius: var(--radius-pill);
  background: var(--color-surface-foreground-2);
}

.ds-avatar img {
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
}

.ds-avatar__crown {
  position: absolute;
  top: -2px;
  right: -10px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  border-radius: var(--radius-pill);
  background: var(--color-surface-0);
  border: 1px solid var(--color-premium-0);
}

.ds-avatar__crown img {
  width: 10px;
  height: 10px;
  display: block;
}

/* ==========================================================================
   Post hero (adaptado del hero de customer story)
   ========================================================================== */

/* Como .blog-hero: 112px del diseño menos el header sticky (64/72). El post no
   lleva tabs de categorías (son el filtro de los listados) */
.post-hero {
  margin-inline: auto;
  width: 100%;
  max-width: 1536px;
  padding-top: 48px;
  border-bottom: 1px solid var(--color-surface-border-alpha-1);
}

@media (min-width: 1024px) {
  .post-hero {
    padding-top: 40px;
  }
}

/* grid gap-8 md:grid-cols-2 md:gap-0 */
.post-hero__grid {
  display: grid;
  gap: 32px;
}

/* Columna de contenido:
   flex-col justify-center gap-8/12/[72px] px-6/8/12/16 pb-0/12/16 md:border-r */
.post-hero__content {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 32px;
  padding: 0 24px;
  /* permite a la columna encoger por debajo de su min-content
     (el breadcrumb nowrap inflaba el 1fr y descuadraba el grid) */
  min-width: 0;
}

/* Grupo badge + título: gap-6 md:gap-10 lg:gap-14 */
.post-hero__heading {
  display: flex;
  flex-direction: column;
  gap: 24px;
}

/* h1: font-alternate extrabold, escala 3xl→5xl→6xl→7xl del DS */
.post-hero__title {
  margin: 0;
  font-family: var(--font-alternate);
  font-size: var(--text-3xl);
  font-weight: var(--font-extrabold);
  line-height: var(--leading-alternate-3xl);
  letter-spacing: var(--tracking-alternate);
  color: var(--color-surface-foreground-1);
}

/* Grupo byline: autor a la izquierda, fila de escucha a la derecha
   (space-between en ≥sm; apilados en breakpoints pequeños) */
.post-hero__byline-group {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 16px;
  width: 100%;
}

/* En tablet siguen apilados; fila con space-between solo desde lg */
@media (min-width: 1024px) {
  .post-hero__byline-group {
    flex-direction: row;
    align-items: center;
    justify-content: space-between;
  }
}

/* Autor: avatar DS + nombre */
.post-hero__author {
  display: flex;
  align-items: center;
  gap: 16px;
}

/* Tiempo de lectura + botón de escucha */
.post-hero__listen {
  display: flex;
  align-items: center;
  gap: 12px;
}

.post-hero__read-time {
  font-size: var(--text-sm);
  line-height: var(--leading-sans-sm);
  color: var(--color-surface-foreground-3);
}

/* IconButton — instancia secondary / md / square (components/icon-button.md)
   caja 40 (spacing.10) · icono 16 (icon-size.sm) · radio 8 (rounded-lg) */
.ds-iconbtn {
  display: flex;
  width: 40px;
  height: 40px;
  align-items: center;
  justify-content: center;
  border: none;
  border-radius: var(--radius-base);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard);
}

.ds-iconbtn .icon-mask {
  width: var(--icon-size-sm);
  height: var(--icon-size-sm);
}

.ds-iconbtn:focus-visible {
  outline: 1px solid var(--color-surface-border-alpha-2);
  outline-offset: 4px;
}

.ds-iconbtn--secondary {
  background: var(--color-secondary-0);
  color: var(--color-secondary-foreground-0);
}

.ds-iconbtn--secondary:hover {
  background: var(--color-secondary-1);
}

.ds-iconbtn--secondary:active {
  background: var(--color-secondary-2);
}

/* ghost: transparente, sin borde. Sobre panel-0 los alphas de la familia
   ghost apenas se perciben, así que el hover sube un paso (ghost-2) y el
   pressed usa surface-4 para mantener el feedback visible. */
.ds-iconbtn--ghost {
  background: var(--color-ghost-0);
  color: var(--color-ghost-foreground-0);
  border: none;
}

.ds-iconbtn--ghost:hover {
  background: var(--color-ghost-2);
}

.ds-iconbtn--ghost:active {
  background: var(--color-surface-4);
}

/* outline: fill transparente, borde border-alpha 0 → -1 → -2 */
.ds-iconbtn--outline {
  background: transparent;
  color: var(--color-outline-foreground-0);
  border: 1px solid var(--color-outline-border-0);
}

.ds-iconbtn--outline:hover {
  background: var(--color-outline-1);
  border-color: var(--color-outline-border-1);
}

.ds-iconbtn--outline:active {
  background: var(--color-outline-2);
  border-color: var(--color-outline-border-2);
}

/* blurred: glass sobre contenido (colors.blurred-*) — el borde alpha y la
   sombra suave dan definición cuando flota sobre superficies claras */
.ds-iconbtn--blurred {
  background: var(--color-blurred-0);
  color: var(--color-blurred-foreground-0);
  border: 1px solid var(--color-surface-border-alpha-1);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 16px rgba(16, 16, 16, 0.08);
}

.ds-iconbtn--blurred:hover {
  background: var(--color-blurred-1);
}

.ds-iconbtn--blurred:active {
  background: var(--color-blurred-2);
}

/* shape rounded: píldora (rounded-full) — como .ds-btn--rounded */
.ds-iconbtn--rounded {
  border-radius: var(--radius-pill);
}

.icon-mask--headphones {
  -webkit-mask: url("../icons/headphones.svg") no-repeat center / contain;
  mask: url("../icons/headphones.svg") no-repeat center / contain;
}

.icon-mask--arrow-up {
  -webkit-mask: url("../icons/arrow-up.svg") no-repeat center / contain;
  mask: url("../icons/arrow-up.svg") no-repeat center / contain;
}

.icon-mask--search {
  -webkit-mask: url("../icons/search.svg") no-repeat center / contain;
  mask: url("../icons/search.svg") no-repeat center / contain;
}

.icon-mask--menu {
  -webkit-mask: url("../icons/menu.svg") no-repeat center / contain;
  mask: url("../icons/menu.svg") no-repeat center / contain;
}

/* Tooltip — instancia sm (components/tooltip.md):
   chip invertido theme-stable, sin pin; aparece en hover/focus */
.ds-tooltip-wrap {
  position: relative;
  display: inline-flex;
}

.ds-tooltip {
  position: absolute;
  bottom: calc(100% + 8px);          /* internal gap spacing.2 */
  left: 50%;
  transform: translateX(-50%);
  max-width: 250px;
  padding: 4px 10px;                 /* sm: spacing.1 · spacing.2-5 */
  border-radius: var(--radius-base); /* radius.rounded-lg */
  background: #353535;               /* tooltip-0 (theme-stable) */
  color: #f5f5f5;                    /* tooltip-foreground-0 */
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--font-regular);
  line-height: var(--leading-sans-xs);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 0 0 2px 0 rgba(18, 18, 18, 0.08),
    0 16px 7px 0 rgba(18, 18, 18, 0.02), 0 9px 5px 0 rgba(18, 18, 18, 0.02),
    0 4px 4px 0 rgba(18, 18, 18, 0.04), 0 1px 2px 0 rgba(18, 18, 18, 0.08); /* shadow.md */
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.15s ease;
  z-index: 10;                       /* z-index.dropdown */
}

.ds-tooltip-wrap:hover .ds-tooltip,
.ds-tooltip-wrap:focus-within .ds-tooltip {
  opacity: 1;
}

/* Back to top — wrap fijo abajo-derecha (pisa el relative del tooltip-wrap),
   aparece tras una pantalla de scroll */
.back-to-top {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: 10;                       /* z-index.dropdown */
  opacity: 0;
  visibility: hidden;
  transform: translateY(8px);
  transition: opacity var(--duration-base) var(--ease-standard),
    transform var(--duration-base) var(--ease-standard), visibility var(--duration-base);
}

.back-to-top.is-visible {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* Share island (post.hbs) — píldora glass flotante en el centro vertical
   derecho: copiar enlace + compartir en X/Threads/Bluesky/Facebook.
   Solo ≥xl: por debajo no hay hueco entre la prosa (760px centrada) y el
   borde. Receta del toolbar de Spaces: surface-1/90 + blur-3xl + borde
   alpha-0, botones ghost sm redondos con divisor de 24px. */
.post-share {
  position: fixed;
  right: 24px;                       /* mismo offset que .back-to-top */
  top: 50%;
  transform: translateY(-50%);
  z-index: 10;                       /* z-index.dropdown */
  display: none;
}

@media (min-width: 1280px) {
  .post-share {
    display: block;
  }
}

.post-share__group {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;                          /* gap-1 */
  box-sizing: border-box;
  width: 40px;                       /* = caja del ds-iconbtn de back-to-top */
  padding: 4px 0;                    /* vertical p-1; el ancho lo fija width */
  border-radius: var(--radius-xl);   /* rounded-3xl */
  border: 1px solid var(--color-surface-border-alpha-0);
  background: var(--color-blurred-0); /* glass del DS (colors.blurred-*) */
  -webkit-backdrop-filter: blur(var(--blur-3xl));
  backdrop-filter: blur(var(--blur-3xl));
  box-shadow: 0 1px 2px rgba(16, 16, 16, 0.05); /* shadow-xs */
}

.post-share__divider {
  width: 24px;                       /* w-6 */
  height: 1px;
  background: var(--color-surface-border-alpha-0);
}

/* La isla pega al borde derecho: los tooltips salen a la izquierda */
.post-share .ds-tooltip {
  bottom: auto;
  left: auto;
  right: calc(100% + 8px);
  top: 50%;
  transform: translateY(-50%);
}

/* En <xl la isla se sustituye por el botón Compartir del hero (share sheet
   nativo); en ≥xl ocurre lo contrario */
@media (min-width: 1280px) {
  .post-share-native {
    display: none;
  }
}

.post-hero__author-meta {
  font-size: var(--text-sm);
  line-height: 1.5;
  color: var(--color-surface-foreground-3);
}

.post-hero__author-meta a {
  color: var(--color-surface-foreground-accent-0);
  font-weight: var(--font-semibold);
  text-decoration: none;
}

.post-hero__author-meta a:hover {
  text-decoration: underline;
}

.post-hero__author-meta a:focus-visible {
  outline: 1px solid var(--color-surface-border-alpha-2);
  outline-offset: 4px;
  border-radius: var(--radius-base);
}

/* Columna de imagen: justify-center px-6/8/12/16 pb-6/8/12/16 */
.post-hero__media-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: 0 24px 24px;
  min-width: 0;
}

/* aspect-[4/3] rounded-2lg + object-cover */
.post-hero__media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);
  overflow: hidden;
}

.post-hero__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

@media (min-width: 640px) {
  .post-hero__content,
  .post-hero__media-col {
    padding-inline: 32px;
  }

  .post-hero__media-col {
    padding-bottom: 32px;
  }

  .post-hero__title {
    font-size: var(--text-5xl);
    line-height: var(--leading-alternate-5xl);
  }
}

@media (min-width: 768px) {
  .post-hero__grid {
    grid-template-columns: 1fr 1fr;
    gap: 0;
  }

  .post-hero__content {
    gap: 48px;
    padding: 0 48px 48px;
    border-right: 1px solid var(--color-surface-border-alpha-1);
  }

  .post-hero__heading {
    gap: 40px;
  }

  .post-hero__title {
    font-size: var(--text-6xl);
    line-height: var(--leading-alternate-6xl);
  }

  .post-hero__media-col {
    padding: 0 48px 48px;
  }
}

@media (min-width: 1024px) {
  .post-hero__content {
    gap: 72px;
    padding: 0 64px 64px;
  }

  .post-hero__heading {
    gap: 56px;
  }

  .post-hero__title {
    font-size: var(--text-7xl);
    line-height: var(--leading-alternate-7xl);
  }

  .post-hero__media-col {
    padding: 0 64px 64px;
  }
}

/* ==========================================================================
   Post intro (extracto destacado entre hero y prosa)
   border-b pb-16 md:pb-20 · p: max-w-1000 text-xl/2xl/3xl medium fg-1
   ========================================================================== */

.post-intro {
  margin-inline: auto;
  width: 100%;
  max-width: 1536px;
  padding: 80px var(--container-pad) 64px;
  border-bottom: 1px solid var(--color-surface-border-alpha-1);
}

.post-intro p {
  margin-inline: auto;
  max-width: 1000px;
  font-size: var(--text-xl);
  font-weight: var(--font-medium);
  line-height: var(--leading-sans-xl);
  color: var(--color-surface-foreground-1);
}

@media (min-width: 768px) {
  .post-intro {
    padding-bottom: 80px;
  }

  .post-intro p {
    font-size: var(--text-2xl);
    line-height: var(--leading-sans-2xl);
  }
}

@media (min-width: 1024px) {
  .post-intro p {
    font-size: var(--text-3xl);
    line-height: var(--leading-sans-3xl);
  }
}

/* ==========================================================================
   Blog article
   ========================================================================== */

/* Layout prosa + sidebar de índice
   flex-col gap-12 lg:flex-row lg:gap-10 xl:gap-16 (aside a la izquierda) */
.article-layout {
  margin-inline: auto;
  width: 100%;
  max-width: 1360px;
  padding: 64px var(--container-pad) 0;
  display: flex;
  flex-direction: column;
  gap: 48px;
}

@media (min-width: 1024px) {
  .article-layout {
    flex-direction: row;
    gap: 40px;
  }
}

@media (min-width: 1280px) {
  .article-layout {
    gap: 64px;
  }
}

/* Pages: la prosa ocupa el contenedor entero (1360px, como .blog-grid),
   sin el cap de 760px de los posts */
.article-layout--page .article__body {
  max-width: none;
}

/* Feature image de página: mismo contenedor que el grid */
.page-hero-media {
  width: 100%;
  max-width: 1360px;
  margin: 48px auto 0;
  padding-inline: var(--container-pad);
}

.page-hero-media img {
  display: block;
  width: 100%;
  border-radius: var(--radius-md);
}

/* TOC — hidden lg:flex · lg:sticky lg:w-[260px] xl:w-[300px]
   Items: py-1 pl-4 text-lg font-medium leading-tight;
   activo = barra 2px emphasis-0 + tinta foreground-0 (aria-current) */
.toc {
  display: none;
}

.toc__label {
  margin: 0;
  padding-bottom: 24px;
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--color-emphasis-0);
}

.toc__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;                       /* lg:gap-5 */
  flex-shrink: 0;
}

.toc__list a {
  position: relative;
  display: block;
  padding: 4px 0 4px 16px;         /* py-1 pl-4 */
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  line-height: 1.25;               /* leading-tight */
  text-decoration: none;
}

.toc__list a:focus-visible {
  outline: 1px solid var(--color-surface-border-alpha-2);
  outline-offset: 4px;
  border-radius: var(--radius-base);
}

.toc__list a span {
  color: var(--color-surface-foreground-3);
  transition: color var(--duration-base) var(--ease-standard);
}

.toc__list a:hover span {
  color: var(--color-surface-foreground-1);
}

/* Activo: barra 2px emphasis-0 + tinta foreground-0 */
.toc__list a[aria-current="location"]::before {
  content: "";
  position: absolute;
  inset-block: 0;
  left: 0;
  width: 2px;
  background: var(--color-emphasis-0);
}

.toc__list a[aria-current="location"] span {
  color: var(--color-surface-foreground-0);
}

@media (min-width: 1024px) {
  .toc {
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 24px;
    width: 260px;
    flex-shrink: 0;
    align-self: flex-start;
    /* Si el contenido (índice + banner) excede el viewport,
       se activa scroll vertical interno */
    max-height: calc(100vh - 48px);
    overflow-y: auto;
    overscroll-behavior: contain;
    /* scroll interno sin barra visible */
    scrollbar-width: none;
  }

  .toc::-webkit-scrollbar {
    display: none;
  }
}

@media (min-width: 1280px) {
  .toc {
    width: 300px;
  }
}

/* Card comunidad (Explore) bajo el índice del sidebar
   h-260 lg:h-420 · rounded-2lg · p-6 · forced dark · scrim + hover zoom */
.community-card {
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
  width: 100%;
  height: 260px;
  flex-shrink: 0;                    /* no se encoge dentro del aside scrollable */
  margin-top: 56px;                  /* separación amplia respecto al índice */
  padding: 24px;                     /* p-6 */
  border: none;
  border-radius: var(--radius-md);   /* rounded-2lg */
  overflow: hidden;
  background: var(--color-surface-2);
  color: var(--color-media-foreground-0);
  text-align: left;
  text-decoration: none;
  cursor: pointer;
}

@media (min-width: 1024px) {
  .community-card {
    height: 420px;
  }
}

.community-card img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  pointer-events: none;
  transition: transform var(--duration-base) var(--ease-standard);
}

.community-card:hover img {
  transform: scale(1.05);
}

/* Scrim: from-black/70 via-black/20 to-transparent */
.community-card__scrim {
  position: absolute;
  inset: 0;
  background: linear-gradient(
    to top,
    rgba(0, 0, 0, 0.7),
    rgba(0, 0, 0, 0.2) 50%,
    transparent
  );
}

.community-card__content {
  position: relative;
  margin-top: auto;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;                         /* gap-3 */
}

.community-card__title {
  font-family: var(--font-alternate);
  font-feature-settings: var(--font-feature-settings-alternate);
  font-weight: var(--font-extrabold);
  font-size: var(--text-5xl);
  line-height: 1.2;
  letter-spacing: var(--tracking-alternate);
}

/* El chip es una instancia ds-btn ds-btn--rounded ds-btn--inverse ds-btn--sm;
   el hover de la card entera adelanta el hover del botón */
.community-card:hover .ds-btn--inverse {
  background: var(--color-surface-1);
}

.community-card:focus-visible {
  outline: 1px solid var(--color-surface-border-alpha-2);
  outline-offset: 4px;
}

/* Columna de prosa — min-w-0 flex-1 */
.article {
  flex: 1;
  min-width: 0;
}

/* Anclas: margen de scroll para no pegar el h2 al borde */
.article__body > h2[id] {
  scroll-margin-top: 32px;
}

/* Article body */

.article__body {
  display: flex;
  flex-direction: column;
  gap: 28px;
  padding-bottom: 32px;
  width: 100%;
  max-width: 760px;
  margin-inline: auto;
}

/* El tamaño/leading/tracking viene del h2 global (escala de tokens 2xl→3xl);
   aquí solo el aire extra de sección, que se SUMA al gap de 28px del flex */
.article__body > h2 {
  margin-top: 20px;
}

/* Enlaces de prosa: accent del DS (mismo patrón que byline/author-box).
   :not(.ds-btn) — los CTA Button Secondary conservan sus propios tokens */
.article__body a:not(.ds-btn) {
  color: var(--color-surface-foreground-accent-0);
  font-weight: var(--font-semibold);
  text-decoration: none;
}

.article__body a:not(.ds-btn):hover {
  text-decoration: underline;
}

/* FocusStroke del DS: ring 1px border-alpha-2, offset 4, solo :focus-visible */
.article__body a:not(.ds-btn):focus-visible {
  outline: 1px solid var(--color-surface-border-alpha-2);
  outline-offset: 4px;
  border-radius: 4px;
}

.article__body > h3 {
  margin: 8px 0 0;
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  line-height: var(--leading-sans-xl);
  letter-spacing: var(--tracking-sans);
  color: var(--color-surface-foreground-1);
}

/* Headings menores del contenido importado (h4 en 22 posts, h6 residual) */
.article__body h4 {
  margin: 8px 0 0;
  font-size: var(--text-lg);
  font-weight: var(--font-semibold);
  line-height: var(--leading-sans-lg);
  letter-spacing: var(--tracking-sans);
  color: var(--color-surface-foreground-1);
}

.article__body h5,
.article__body h6 {
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  line-height: var(--leading-sans-base);
  letter-spacing: var(--tracking-sans);
  color: var(--color-surface-foreground-1);
}

/* h1 dentro del cuerpo (4 posts importados lo traen): duplicaría el título
   del hero, se degrada visualmente al nivel del h2 de sección */
.article__body h1 {
  margin: 20px 0 0;
  font-family: var(--font-sans);
  font-size: clamp(var(--text-2xl), 3.2vw, var(--text-3xl));
  font-weight: var(--font-semibold);
  line-height: var(--leading-sans-3xl);
  letter-spacing: var(--tracking-sans-3xl);
  color: var(--color-surface-foreground-1);
  font-feature-settings: var(--font-feature-settings-sans);
}

/* Énfasis: el contenido de WP mezcla b/strong — mismo tratamiento que los
   enlaces de prosa (semibold + fg-1), sin el 700 de navegador */
.article__body b,
.article__body strong {
  font-weight: var(--font-semibold);
  color: var(--color-surface-foreground-1);
}

.article__body ul,
.article__body ol {
  margin: 0;
  padding-left: 24px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Listas anidadas: mismo ritmo que entre ítems del nivel padre */
.article__body li ul,
.article__body li ol {
  margin-top: 12px;
}

.article__body code {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--color-surface-2);
  border-radius: 4px;
  padding: 2px 6px;
  /* el body lleva los stylistic sets de Geist Sans; el mono va sin ellos */
  font-feature-settings: var(--font-feature-settings-monospace);
}

/* Dentro de bloques de código (pre) el texto va limpio, sin fondo propio */
.article__body pre code {
  background: none;
  border-radius: 0;
  padding: 0;
}

/* Vídeos incrustados heredados de WordPress (.wp-video): el wrapper trae un
   width fijo inline (p. ej. 640px) — se anula para que el vídeo se ajuste
   al ancho de la prosa, con el mismo redondeo que el resto de media */
.article__body .wp-video {
  width: auto !important;
}

.article__body .wp-video video {
  width: 100%;
  height: auto;
  border-radius: var(--radius-lg);
}

/* Prompt blocks */

/* Wrapper del bloque de código: ancla el botón de copia */
.prompt-wrap {
  position: relative;
}

.prompt-wrap .prompt-copy-wrap {
  position: absolute;
  top: 16px;
  right: 16px;
}

.prompt-block {
  margin: 0;
  background: var(--color-panel-0);
  border: 1px solid var(--color-surface-border-alpha-1);
  border-radius: var(--radius-md);
  padding: 32px 36px;
  padding-right: 72px;               /* hueco para el botón de copia */
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  line-height: var(--leading-mono-sm);
  color: var(--color-surface-foreground-2);
  white-space: pre-wrap;
  overflow-x: auto;
  font-feature-settings: var(--font-feature-settings-monospace);
}

/* IconButton sm: caja 32 (spacing.8) · icono 14 (icon-size.xs) */
.ds-iconbtn--sm {
  width: 32px;
  height: 32px;
}

.ds-iconbtn--sm .icon-mask {
  width: var(--icon-size-xs);
  height: var(--icon-size-xs);
}

.icon-mask--external,
.icon-mask--external-link {
  -webkit-mask: url("../icons/arrow-up-right.svg") no-repeat center / contain;
  mask: url("../icons/arrow-up-right.svg") no-repeat center / contain;
}

.icon-mask--external-link {
  -webkit-mask: url("../icons/external-link.svg") no-repeat center / contain;
  mask: url("../icons/external-link.svg") no-repeat center / contain;
}

.icon-mask--copy {
  -webkit-mask: url("../icons/copy.svg") no-repeat center / contain;
  mask: url("../icons/copy.svg") no-repeat center / contain;
}

.icon-mask--chevron-left {
  -webkit-mask: url("../icons/chevron-left.svg") no-repeat center / contain;
  mask: url("../icons/chevron-left.svg") no-repeat center / contain;
}

.icon-mask--chevron-right {
  -webkit-mask: url("../icons/chevron-right.svg") no-repeat center / contain;
  mask: url("../icons/chevron-right.svg") no-repeat center / contain;
}

.icon-mask--chevrons-left {
  -webkit-mask: url("../icons/chevrons-left.svg") no-repeat center / contain;
  mask: url("../icons/chevrons-left.svg") no-repeat center / contain;
}

.icon-mask--chevrons-right {
  -webkit-mask: url("../icons/chevrons-right.svg") no-repeat center / contain;
  mask: url("../icons/chevrons-right.svg") no-repeat center / contain;
}

.prompt-block__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-surface-foreground-4);
}

/* Accordion (DS) — patrón acordeón de producto:
   items border-b surface-3 (último sin borde), py 16→20→24,
   pregunta base/lg medium fg-0, icono plus 44px emphasis-0 que rota 45°.
   Los .fpk-faq del contenido importado comparten la base (koenig solo
   añade su tipografía de summary). */

.ds-accordion {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.ds-accordion,
.article__body .fpk-faq {
  interpolate-size: allow-keywords;
}

.ds-accordion details,
.article__body .fpk-faq details {
  width: 100%;
  border-bottom: 1px solid var(--color-surface-3);
  padding-block: 16px;               /* py-4 */
}

@media (min-width: 768px) {
  .ds-accordion details,
  .article__body .fpk-faq details {
    padding-block: 20px;             /* md:py-5 */
  }
}

@media (min-width: 1024px) {
  .ds-accordion details,
  .article__body .fpk-faq details {
    padding-block: 24px;             /* lg:py-6 */
  }
}

.ds-accordion details:last-child,
.article__body .fpk-faq details:last-child {
  border-bottom: 0;                  /* last:border-b-0 */
}

.ds-accordion summary,
.article__body .fpk-faq summary {
  cursor: pointer;
  list-style: none;
  display: flex;
  width: 100%;
  align-items: flex-start;
  gap: 16px;                         /* gap-4 */
  text-align: left;
}

.ds-accordion summary::-webkit-details-marker,
.article__body .fpk-faq summary::-webkit-details-marker {
  display: none;
}

.ds-accordion summary:focus-visible,
.article__body .fpk-faq summary:focus-visible {
  outline: 1px solid var(--color-surface-border-alpha-2);
  outline-offset: 4px;
  border-radius: var(--radius-base);
}

/* Pregunta: min-h-11 py-2, base md:lg medium fg-0 */
.ds-accordion__q {
  display: flex;
  min-height: 44px;
  flex: 1;
  align-items: center;
  padding-block: 8px;
  font-size: var(--text-base);
  font-weight: var(--font-medium);
  line-height: var(--leading-sans-base);
  color: var(--color-surface-foreground-0);
}

@media (min-width: 768px) {
  .ds-accordion__q {
    font-size: var(--text-lg);
    line-height: var(--leading-sans-lg);
  }
}

/* Icono plus: caja 44px, emphasis-0, rota 45° al abrir */
.ds-accordion__icon {
  display: flex;
  width: 44px;                       /* size-11 */
  height: 44px;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  border-radius: 4px;
  color: var(--color-emphasis-0);
  transition: transform var(--duration-fast) var(--ease-standard);
}

.ds-accordion__icon svg {
  width: var(--icon-size-md);
  height: var(--icon-size-md);
  fill: currentColor;
}

.ds-accordion details[open] .ds-accordion__icon {
  transform: rotate(45deg);
}

/* Colapso animado (equivalente a animate-collapsible-up/down) */
.ds-accordion details::details-content,
.article__body .fpk-faq details::details-content {
  block-size: 0;
  overflow: hidden;
  transition: block-size var(--duration-fast) var(--ease-standard),
    content-visibility var(--duration-fast);
  transition-behavior: allow-discrete;
}

.ds-accordion details[open]::details-content,
.article__body .fpk-faq details[open]::details-content {
  block-size: auto;
}

.ds-accordion details p {
  margin: 0;
  padding-block: 4px 8px;
  font-size: var(--text-base);
  color: var(--color-surface-foreground-3);
}

/* Related posts */

/* Ocupa el ancho del main (mismo contenedor que .article-layout) */
.related {
  width: 100%;
  max-width: 1360px;
  margin: 96px auto 0;
  padding-inline: var(--container-pad);
}

.related__title {
  font-family: var(--font-sans);
  font-size: var(--text-3xl);
  font-weight: var(--font-semibold);
  letter-spacing: -0.01em;
  color: var(--color-surface-foreground-1);
  margin: 0 0 32px;
}

.related__grid {
  display: grid;
  gap: 32px;
}

@media (min-width: 900px) {
  .related__grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* --------------------------------------------------------------------------
   MktCard-2 — skin neutral (components/ds-mkt-card-2.md)
   Media 4:3 con scrim + play que aparece en hover · pretitle/título/body
   Escala tipográfica: mobile → tablet (≥640) → desktop (≥1280)
   -------------------------------------------------------------------------- */

.ds-mkt-card-2 {
  display: flex;
  flex-direction: column;
  gap: 16px;                        /* spacing.4 */
  text-decoration: none;
}

.ds-mkt-card-2:focus-visible {
  outline: 1px solid var(--color-surface-border-alpha-2);
  outline-offset: 4px;
  border-radius: var(--radius-md);
}

.ds-mkt-card-2__media {
  position: relative;
  width: 100%;
  aspect-ratio: 4 / 3;
  border-radius: var(--radius-md);  /* rounded-2lg (12) */
  overflow: hidden;
  background: linear-gradient(
    135deg,
    var(--color-secondary-0) 0%,
    #2c0000 55%,
    #3f0808 100%
  );
}

.ds-mkt-card-2__media img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--duration-base) var(--ease-standard);
}

/* Hover: la imagen sangra ~×1.13 (desktop) */
.ds-mkt-card-2:hover .ds-mkt-card-2__media img {
  transform: scale(1.13);
}

/* Contenido: columna gap-8, textos con los estilos de la prosa del artículo */
.ds-mkt-card-2__content {
  display: flex;
  flex-direction: column;
  gap: 8px;                         /* spacing.2 */
}

/* Categoría: mismo estilo que el eyebrow del header del post */
.ds-mkt-card-2__pretitle {
  font-family: var(--font-mono);
  font-size: var(--text-lg);
  font-weight: var(--font-medium);
  letter-spacing: 0.02em;
  line-height: var(--leading-mono-lg);
  text-transform: uppercase;
  color: var(--color-emphasis-0);
  font-feature-settings: var(--font-feature-settings-monospace);
}

/* Título: mismo estilo que los h3 de la prosa */
.ds-mkt-card-2__title {
  margin: 0;
  font-family: var(--font-sans);
  font-size: var(--text-xl);
  font-weight: var(--font-semibold);
  line-height: 1.35;
  letter-spacing: -0.01em;
  color: var(--color-surface-foreground-1);
}

/* Body: mismo estilo que los párrafos de la prosa */
.ds-mkt-card-2__body {
  font-size: var(--text-base);
  font-weight: var(--font-regular);
  line-height: var(--leading-sans-base);
  color: var(--color-surface-foreground-2);
}

/* ==========================================================================
   Footer global (design.md · components/footer.md)
   Banda forced-dark: surface-0 dark #101010, tinta nunca blanco puro
   ========================================================================== */

.ds-footer {
  background: #101010;             /* surface-0 (dark), theme-stable */
  color: #f5f5f5;                  /* surface-foreground-0 (dark) */
  margin-top: 96px;
}

/* FocusStroke sobre la banda oscura: el alpha-2 del sistema (tinta negra)
   sería invisible aquí — versión clara con el mismo trazo/offset */
.ds-footer :is(a, summary, button):focus-visible {
  outline: 1px solid rgba(255, 255, 255, 0.4);
  outline-offset: 4px;
  border-radius: var(--radius-base);
}

.ds-footer__inner {
  margin-inline: auto;
  max-width: 1536px;               /* grid.container-2xl */
  padding: 48px 20px;              /* spacing.12 / spacing.5 */
}

@media (min-width: 1024px) {
  .ds-footer__inner {
    padding: 80px 96px;            /* spacing.20 / spacing.24 */
  }
}

.ds-footer__main {
  display: flex;
  flex-direction: column;
  gap: 40px;                       /* spacing.10 */
}

@media (min-width: 1280px) {
  .ds-footer__main {
    flex-direction: row;
    gap: 128px;                    /* spacing.32 */
  }
}

/* Brand column: lockup + tagline + selector de idioma */
.ds-footer__brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 32px;                       /* spacing.8 */
  width: 100%;
  max-width: 600px;
  margin-inline: auto;
}

@media (min-width: 1280px) {
  .ds-footer__brand {
    align-items: flex-start;
    text-align: left;
    width: 280px;
    max-width: none;
    margin-inline: 0;
    flex-shrink: 0;
  }
}

/* Lockup horizontal (brand/MagnificDefault.svg), 28 de alto,
   recolorado a blanco puro con filter (logos-magnific: única tinta #FFF) */
.ds-footer__lockup {
  display: block;
  height: 28px;
}

.ds-footer__lockup img {
  height: 100%;
  width: auto;
  display: block;
  filter: brightness(0) invert(1);
}

.ds-footer__tagline {
  font-size: var(--text-sm);
  font-weight: var(--font-regular);
  line-height: var(--leading-sans-sm);
  color: #e3e3e3;                  /* surface-foreground-1 (dark) */
}

/* Selector de idioma (columna brand del footer): Button outline con el nombre
   del idioma y el menú listbox desplegado bajo el botón. Como el resto del
   footer, la paleta va fijada en dark (theme-stable) */
.lang-switch {
  position: relative;
}

/* Instancia Button outline / sm (h-32, label xs) con el icono de idioma
   delante y el caret detrás, ambos a icon-size.xs como en el original */
.lang-switch__btn {
  padding: 0 16px;                 /* spacing.4 */
  gap: 8px;                        /* spacing.2 */
}

.lang-switch__btn .icon-mask {
  width: var(--icon-size-xs);
  height: var(--icon-size-xs);
}

.lang-switch__btn .icon-mask--chevron-down {
  transition: transform var(--duration-fast) var(--ease-standard);
}

.lang-switch__btn[aria-expanded="true"] .icon-mask--chevron-down {
  transform: rotate(180deg);
}

.lang-switch__menu {
  position: absolute;
  top: calc(100% + 8px);           /* spacing.2 */
  left: 0;
  min-width: 100%;                 /* nunca más estrecho que el botón */
  margin: 0;
  padding: 8px;                    /* spacing.2 */
  list-style: none;
  background: #1a1a1a;             /* surface-1 (dark): eleva sobre el footer */
  border: 1px solid rgba(255, 255, 255, 0.12);  /* surface-border-alpha-1 (dark) */
  border-radius: var(--radius-base);
  z-index: 10;                     /* z-index.dropdown */
}

.lang-switch__menu a {
  display: block;
  padding: 6px 10px;
  border-radius: 6px;
  color: #f5f5f5;                  /* surface-foreground-0 (dark) */
  font-size: var(--text-sm);
  text-decoration: none;
  white-space: nowrap;
}

.lang-switch__menu a:hover {
  background: rgba(255, 255, 255, 0.1);   /* ghost-1 (dark) */
}

.lang-switch__menu a[aria-selected="true"] {
  font-weight: var(--font-medium);
}

/* Iconos de librería recoloreados con mask (siguen currentColor) */
.icon-mask {
  display: inline-block;
  width: var(--icon-size-xs);
  height: var(--icon-size-xs);
  background: currentColor;
  flex-shrink: 0;
}

.icon-mask--translate {
  -webkit-mask: url("../icons/translate.svg") no-repeat center / contain;
  mask: url("../icons/translate.svg") no-repeat center / contain;
}

.icon-mask--unfold {
  -webkit-mask: url("../icons/unfold.svg") no-repeat center / contain;
  mask: url("../icons/unfold.svg") no-repeat center / contain;
}

/* Glifos de redes sociales (footer) */
.icon-mask--facebook {
  -webkit-mask: url("../icons/facebook.svg") no-repeat center / contain;
  mask: url("../icons/facebook.svg") no-repeat center / contain;
}

.icon-mask--x-twitter {
  -webkit-mask: url("../icons/x-twitter.svg") no-repeat center / contain;
  mask: url("../icons/x-twitter.svg") no-repeat center / contain;
}

.icon-mask--instagram {
  -webkit-mask: url("../icons/instagram.svg") no-repeat center / contain;
  mask: url("../icons/instagram.svg") no-repeat center / contain;
}

.icon-mask--youtube {
  -webkit-mask: url("../icons/youtube.svg") no-repeat center / contain;
  mask: url("../icons/youtube.svg") no-repeat center / contain;
}

.icon-mask--linkedin {
  -webkit-mask: url("../icons/linkedin.svg") no-repeat center / contain;
  mask: url("../icons/linkedin.svg") no-repeat center / contain;
}

.icon-mask--tiktok {
  -webkit-mask: url("../icons/tiktok.svg") no-repeat center / contain;
  mask: url("../icons/tiktok.svg") no-repeat center / contain;
}

.icon-mask--discord {
  -webkit-mask: url("../icons/discord.svg") no-repeat center / contain;
  mask: url("../icons/discord.svg") no-repeat center / contain;
}

.icon-mask--reddit {
  -webkit-mask: url("../icons/reddit.svg") no-repeat center / contain;
  mask: url("../icons/reddit.svg") no-repeat center / contain;
}

.icon-mask--threads {
  -webkit-mask: url("../icons/threads.svg") no-repeat center / contain;
  mask: url("../icons/threads.svg") no-repeat center / contain;
}

.icon-mask--bluesky {
  -webkit-mask: url("../icons/bluesky.svg") no-repeat center / contain;
  mask: url("../icons/bluesky.svg") no-repeat center / contain;
}

.icon-mask--link {
  -webkit-mask: url("../icons/link.svg") no-repeat center / contain;
  mask: url("../icons/link.svg") no-repeat center / contain;
}

.icon-mask--share {
  -webkit-mask: url("../icons/share.svg") no-repeat center / contain;
  mask: url("../icons/share.svg") no-repeat center / contain;
}

/* Link grid: 4 columnas ≥lg (productos · primeros pasos · compañía · contacto) */
.ds-footer__grid {
  display: block;
  flex: 1;
  width: 100%;
}

@media (min-width: 1024px) {
  .ds-footer__grid {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 32px;                     /* spacing.8 */
  }
}

/* Columna de links (details = acordeón en mobile) */
.ds-footer__col summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  list-style: none;
  cursor: pointer;
  font-family: var(--font-alternate);
  font-size: var(--text-base);
  font-weight: var(--font-semibold);
  line-height: var(--leading-alternate-base);
  letter-spacing: var(--tracking-alternate);
  font-feature-settings: var(--font-feature-settings-alternate);
  color: var(--color-emphasis-0);
}

.ds-footer__col summary::-webkit-details-marker {
  display: none;
}

.ds-footer__caret {
  width: 32px;
  height: 32px;
  transition: transform var(--duration-fast) var(--ease-standard);
}

.ds-footer__col[open] .ds-footer__caret {
  transform: rotate(180deg);
}

/* <lg: acordeones con hairline, cerrados por defecto (ver script) */
@media (max-width: 1023px) {
  .ds-footer__col {
    border-bottom: 1px solid #ffffff1a;   /* outline-1 (dark) */
    padding-block: 12px;                  /* spacing.3 */
  }
}

/* ≥lg: siempre abiertas, heading inerte, sin caret */
@media (min-width: 1024px) {
  .ds-footer__col summary {
    cursor: auto;
    pointer-events: none;
  }

  .ds-footer__caret {
    display: none;
  }
}

.ds-footer__col ul {
  list-style: none;
  margin: 0;
  padding: 8px 0 0;                /* spacing.2 */
  display: flex;
  flex-direction: column;
  gap: 2px;                        /* spacing.0-5 */
}

@media (min-width: 1024px) {
  .ds-footer__col ul {
    padding-top: 12px;             /* spacing.3 */
  }
}

/* Inline, no inline-flex: así el chip "New" sigue a la última palabra cuando el
   label parte en dos líneas, en vez de quedarse centrado a la derecha del bloque */
.ds-footer__col a {
  display: inline;
  font-size: var(--text-sm);
  font-weight: var(--font-regular);
  line-height: var(--leading-sans-sm);
  color: #f5f5f5;                  /* surface-foreground-0 (dark) */
  text-decoration: none;
  transition: color 0.15s ease;    /* duration.fast · ease.standard */
}

/* Solo los links de texto viran a emphasis en hover — los ds-btn/ds-iconbtn
   siguen su propia rampa (design.md: en hover sube el fill, la tinta no cambia) */
.ds-footer__col a:not(.ds-btn):not(.ds-iconbtn):hover {
  color: var(--color-emphasis-0);
}

/* Botón OneTrust (Cookie Settings): se presenta como un link más de la lista;
   en producción OneTrust le engancha su handler, aquí es inerte */
.ds-footer .ot-sdk-show-settings {
  background: none;
  border: none;
  padding: 0;
  text-align: left;                /* el center del UA lo descuadraría de la lista */
  cursor: pointer;
  font-family: inherit;
  font-size: var(--text-sm);
  font-weight: var(--font-regular);
  line-height: var(--leading-sans-sm);
  color: #f5f5f5;                  /* surface-foreground-0 (dark) */
  transition: color 0.15s ease;
}

.ds-footer .ot-sdk-show-settings:hover {
  color: var(--color-emphasis-0);
}

/* Chip "New" de los ítems recientes: el mismo badge-emphasis-soft que el
   mega-menú del header (ver .mag-menu__badge), no el piki-blue del original —
   el theme ya marca así lo nuevo y no tiene esa familia en tokens */
.ds-footer__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 18px;
  margin-left: 8px;                /* spacing.2 desde el label */
  vertical-align: middle;
  padding: 0 6px;
  border-radius: var(--radius-sm);
  background: rgba(255, 88, 174, 0.15); /* fallback sin color-mix */
  background: color-mix(in srgb, var(--color-emphasis-0) 15%, transparent);
  color: var(--color-emphasis-0);
  font-size: var(--text-2xs);
  font-weight: var(--font-medium);
  line-height: 1;
}

/* Resolución dark de secondary/outline dentro de la banda forced-dark
   (design.md colors-dark: los alphas de interacción cambian a base blanca) */
.ds-footer .ds-btn--secondary {
  background: #f5f5f5;                    /* secondary-0 (dark) */
  color: #1a1a1a;                         /* secondary-foreground-0 (dark) */
}

.ds-footer .ds-btn--secondary:hover {
  background: #e3e3e3;                    /* secondary-1 (dark) */
  color: #1a1a1a;                         /* la tinta no cambia en hover */
}

.ds-footer .ds-btn--secondary:active {
  background: #dbdbdb;                    /* secondary-2 (dark) */
  color: #1a1a1a;
}

.ds-footer :is(.ds-btn--outline, .ds-iconbtn--outline) {
  color: #f5f5f5;                         /* outline-foreground-0 (dark) */
  border-color: rgba(255, 255, 255, 0.2); /* border-alpha-0 (dark) */
}

.ds-footer :is(.ds-btn--outline, .ds-iconbtn--outline):hover {
  background: rgba(255, 255, 255, 0.1);   /* outline-1 (dark) */
  border-color: rgba(255, 255, 255, 0.3); /* border-alpha-1 (dark) */
  color: #f5f5f5;                         /* la tinta no cambia en hover */
}

.ds-footer :is(.ds-btn--outline, .ds-iconbtn--outline):active {
  background: rgba(255, 255, 255, 0.15);  /* outline-2 (dark) */
  border-color: rgba(255, 255, 255, 0.5); /* border-alpha-2 (dark) */
  color: #f5f5f5;
}

/* Copyright: centrado mientras la marca lo está, a la izquierda cuando la
   columna de marca se va al lateral */
.ds-footer__copyright {
  margin: 40px 0 0;                /* spacing.10 */
  font-size: var(--text-xs);
  color: #737373;                  /* surface-foreground-4 (muted) */
  text-align: center;
}

@media (min-width: 1280px) {
  .ds-footer__copyright {
    text-align: left;
  }
}

@media (min-width: 1280px) {
  .ds-footer__copyright {
    text-align: left;
  }
}

/* ==========================================================================
   Blog index (estructura tipo listado: hero + filtros + destacado + grid)
   ========================================================================== */

/* El header sticky ya ocupa 64/72px de flujo: estos paddings restan esa
   altura a los 140px originales del diseño (header absolute). Las tabs de
   categorías van debajo del hero, no encima, así que no le quitan aire */
.blog-hero {
  width: 100%;
  max-width: 1360px;
  margin-inline: auto;
  padding: 76px var(--container-pad) 0;
}

@media (min-width: 1024px) {
  .blog-hero {
    padding-top: 68px;
  }
}

.blog-hero h1 {
  margin: 0;
}

.blog-hero__subtitle {
  margin-top: 16px;
  font-size: var(--text-lg);
  line-height: var(--leading-sans-lg);
  color: var(--color-surface-foreground-3);
  max-width: 60ch;
}

/* Author hero: avatar a la izquierda del nombre y la bio */
.blog-hero--author {
  display: flex;
  align-items: center;
  gap: 32px;
}

.blog-hero__avatar {
  flex-shrink: 0;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  object-fit: cover;
  background: var(--color-surface-1);
}

@media (max-width: 767px) {
  .blog-hero--author {
    flex-direction: column;
    align-items: flex-start;
  }

  .blog-hero__avatar {
    width: 72px;
    height: 72px;
  }
}

/* Destacado: MktCard-2 en horizontal desde lg */
.blog-featured {
  width: 100%;
  max-width: 1360px;
  margin: 48px auto 0;
  padding-inline: var(--container-pad);
}

/* Contenedor del destacado: fondo surface-1, radio habitual,
   imagen a sangre (sin radios propios) y contenido con padding */
.ds-mkt-card-2--featured {
  background: var(--color-surface-1);
  border-radius: var(--radius-md);
  overflow: hidden;
  gap: 0;
}

.ds-mkt-card-2--featured .ds-mkt-card-2__media {
  border-radius: 0;
}

.ds-mkt-card-2--featured .ds-mkt-card-2__content {
  padding: 24px;
}

.ds-mkt-card-2--featured .ds-mkt-card-2__title {
  font-size: var(--text-2xl);
  line-height: 1.3;
}

.ds-mkt-card-2__date {
  font-size: var(--text-sm);
  line-height: var(--leading-sans-sm);
  color: var(--color-surface-foreground-4);
}

@media (min-width: 1024px) {
  .ds-mkt-card-2--featured {
    flex-direction: row-reverse;     /* thumbnail a la derecha, contenido a la izquierda */
    gap: 0;                          /* la separación la da el padding del contenido */
  }

  .ds-mkt-card-2--featured .ds-mkt-card-2__media {
    flex: 1.4;
    aspect-ratio: 4 / 3;             /* ratio del MktCard-2 base */
  }

  .ds-mkt-card-2--featured .ds-mkt-card-2__content {
    flex: 1;
    justify-content: center;
    padding: 48px;
  }

  .ds-mkt-card-2--featured .ds-mkt-card-2__title {
    font-size: var(--text-4xl);
    line-height: 1.25;
  }
}

/* Grid de posts: 1 → 2 → 3 columnas */
.blog-grid {
  width: 100%;
  max-width: 1360px;
  margin: 64px auto 0;
  padding-inline: var(--container-pad);
  display: grid;
  gap: 48px 32px;
}

@media (min-width: 640px) {
  .blog-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}

@media (min-width: 1024px) {
  .blog-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

/* Paginación clásica: IconButtons outline; la página actual en secondary
   (convención de "activo" de las pills). Los números los rellena theme.js */
.blog-pagination {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 8px;
  margin-top: 64px;
}

.blog-pagination__pages {
  display: flex;
  gap: 8px;
}

/* Números: caja del IconButton pero con ancho fluido (3+ dígitos caben) */
.blog-pagination__num {
  min-width: 40px;
  width: auto;
  padding-inline: 8px;
  font-size: var(--text-sm);
  font-weight: var(--font-medium);
  line-height: 1;
}

a.blog-pagination__num {
  text-decoration: none;
}

.blog-pagination__num[aria-current="page"] {
  cursor: default;
}

/* El estado deshabilitado lo pinta el DS (.ds-iconbtn.is-disabled) */