/* =========================================================
   Componentes: se usan igual en todas las páginas
   ========================================================= */
*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font);
  font-size: var(--text-sm);
  letter-spacing: var(--tracking);
  line-height: var(--leading-tight);
  -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }
:root { --ease-out: cubic-bezier(0.23, 1, 0.32, 1); --ease-in-out: cubic-bezier(0.77, 0, 0.175, 1); }
::selection { background: #111; color: #fff; }
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 0.28s; animation-timing-function: var(--ease-out); }
@media (prefers-reduced-motion: reduce) { @view-transition { navigation: none; } }
p { margin: 0; }

.muted { color: var(--color-text-muted); }

/* ---------- Chip: navegación y links ---------- */
.chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-text);
  font-size: var(--text-sm);
  transition: background 0.2s ease, color 0.2s ease, border-radius 0.25s ease;
}
/* Los chips que son links se invierten al pasar el mouse (solo con mouse) */
@media (hover: hover) and (pointer: fine) {
  a.chip:hover,
  button.chip:hover {
    background: var(--color-surface-strong);
    color: #fff;
    border-radius: var(--radius-pill);
  }
}
a.chip, button.chip { cursor: pointer; }
a.chip:active, button.chip:active, .copy:active, .chat-chip:active, .chat-send-btn:active { transform: scale(0.97); }
.chip { transition: background 0.2s ease, color 0.2s ease, border-radius 0.25s var(--ease-out), transform 0.16s var(--ease-out); }
.chip[aria-current="page"] {
  background: var(--color-surface-strong);
  color: #fff;
  border-radius: var(--radius-pill);
}
a:focus-visible, button:focus-visible, input:focus-visible {
  outline: 2px solid var(--color-text);
  outline-offset: 3px;
}

/* ---------- Status: disponibilidad ---------- */
.status::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--color-status);
}

/* ---------- Botón flotante sobre imagen ---------- */
.button {
  display: inline-flex;
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  color: var(--color-text);
  font-size: var(--text-sm);
}

/* ---------- Nav ---------- */
/* Una sola fila: nombre a la izquierda (lleva al Home), secciones a la derecha */
.nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: var(--gutter);
  transition: background 0.3s ease, box-shadow 0.3s ease;
}
.nav.is-scrolled {
  background: rgba(255, 255, 255, 0.82);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: 0 1px 0 rgba(17, 17, 17, 0.06);
}
.nav__name.chip { color: var(--color-text); }
.nav__links { display: flex; gap: var(--space-2); }

/* ---------- Project card ---------- */
.card { display: flex; flex-direction: column; gap: var(--space-3); transition: transform 0.16s var(--ease-out); }
.card:active { transform: scale(0.99); }

.card__media {
  position: relative;
  aspect-ratio: 16 / 10;
  background: var(--color-media);
  border-radius: var(--radius-media);
  overflow: hidden;
}
.card__media img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--ease-out); }
@media (hover: hover) and (pointer: fine) { .card:hover .card__media img { transform: scale(1.02); } .card:hover .card__media .button { opacity: 1; transform: translateX(-50%) translateY(0); }  }
.card__media .button {
  position: absolute;
  left: 50%;
  bottom: var(--space-6);
  transform: translateX(-50%) translateY(6px);
  opacity: 0;
  transition: opacity 0.2s ease, transform 0.3s var(--ease-out);
}


.card__title { display: flex; align-items: baseline; gap: var(--space-2); font-size: var(--text-md); }
.card__title::after {
  content: "→";
  opacity: 0;
  transform: translateX(-6px);
  transition: opacity 0.25s ease, transform 0.35s var(--ease-out);
}

.card__meta { color: var(--color-text-muted); line-height: 1.35; }

/* ---------- Metadata de case study ---------- */
.meta-list { display: grid; gap: var(--space-2); margin: 0; }
.meta-list div { display: grid; grid-template-columns: 120px 1fr; }
.meta-list dt { color: var(--color-text-muted); }
.meta-list dd { margin: 0; }

/* ---------- Footer: bloque de contacto ---------- */
.footer {
  display: grid;
  gap: var(--space-10);
  margin-top: var(--space-30);
  padding: var(--space-16) var(--gutter) var(--space-6);
  border-top: 1px solid #ececea;
  scroll-margin-top: 80px;
}
.footer__title { font-size: 26px; letter-spacing: -0.02em; line-height: 1.2; }
.footer__cta { display: grid; gap: var(--space-4); justify-items: start; }
.footer__row { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: var(--space-4); }
.footer__meta { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); color: var(--color-text-muted); font-size: var(--text-sm); }
.footer__links { display: flex; flex-wrap: wrap; gap: var(--space-2); }
.footer.is-highlighted .footer__title { animation: footer-nudge 0.9s var(--ease-out); }
@keyframes footer-nudge { 0% { opacity: 0.2; transform: translateY(8px); } 100% { opacity: 1; transform: none; } }

/* Email copiable: el campo se convierte en la confirmación.
   El email sale, "Copied!" entra detrás del check, y la caja no cambia de tamaño. */
.copy {
  display: inline-flex;
  align-items: center;
  gap: var(--space-4);
  padding: 14px 16px 14px 20px;
  border: 0;
  border-radius: 14px;
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: 22px;
  letter-spacing: -0.01em;
  line-height: 1.2;
  cursor: pointer;
  transition: transform 0.16s var(--ease-out), background 0.2s ease;
}
@media (hover: hover) and (pointer: fine) { .copy:hover { background: #e8e8e6; } }
/* Las dos etiquetas ocupan la misma celda: la caja mide lo que mide el email, siempre */
.copy__label { display: grid; overflow: hidden; text-align: left; }
.copy__value, .copy__done { grid-area: 1 / 1; transition: transform 0.35s var(--ease-out), opacity 0.25s ease, filter 0.25s ease; }
.copy__done { opacity: 0; transform: translateY(70%); filter: blur(4px); }
.is-copied .copy__value { opacity: 0; transform: translateY(-70%); filter: blur(4px); }
.is-copied .copy__done { opacity: 1; transform: none; filter: none; transition-delay: 0.05s; }

.copy__icons { position: relative; display: inline-grid; flex-shrink: 0; width: 20px; height: 20px; color: var(--color-text-muted); }
.copy__icons .icon { position: absolute; inset: 0; width: 100%; height: 100%; transition: opacity 0.2s ease, transform 0.3s var(--ease-out), filter 0.2s ease; }
.copy__check { opacity: 0; transform: scale(0.5) rotate(-12deg); filter: blur(2px); color: #1f9d55; }
.is-copied .copy__icon { opacity: 0; transform: scale(0.5); filter: blur(2px); }
.is-copied .copy__check { opacity: 1; transform: none; filter: none; }

.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
@media (prefers-reduced-motion: reduce) {
  .copy__value, .copy__done, .copy__icons .icon { transform: none !important; filter: none !important; }
}

/* Íconos dentro de chips */
.icon { width: 15px; height: 15px; flex-shrink: 0; }
.icon--sm { width: 13px; height: 13px; margin-left: -2px; opacity: 0.6; }

/* =========================================================
   Layout de páginas
   ========================================================= */
/* Frase alineada a la izquierda, en la mitad del ancho, pegada al nav */
.statement {
  max-width: var(--measure);
  padding: var(--space-2) var(--gutter) var(--space-6);
  font-size: var(--text-md);
  line-height: 1.35;
}

.feature-video {
  margin: 0 var(--gutter);
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--color-media);
}
.feature-video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.work-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-10) var(--space-4);
  padding: var(--space-16) var(--gutter) 0;
}

@media (max-width: 700px) {
  .feature-video { aspect-ratio: 4 / 5; }
  .work-grid { grid-template-columns: 1fr; }
  .footer { grid-template-columns: 1fr; }
}

/* =========================================================
   Case study (estructura tipo Rachel Chen)
   Nav de secciones fija a la izquierda, una columna centrada,
   títulos que son frases completas.
   ========================================================= */
.cs-layout {
  display: grid;
  grid-template-columns: 1fr minmax(0, 880px) 1fr;
  gap: var(--space-10);
  padding: var(--space-10) var(--gutter) 0;
}

/* Nav de secciones */
.toc { position: sticky; top: 30vh; align-self: start; }
.toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--space-2); }
.toc a {
  position: relative;
  display: inline-block;
  padding-left: 14px;
  color: var(--color-text-muted);
  transition: color 0.3s ease;
}
.toc a::before {
  content: "";
  position: absolute;
  left: 0;
  top: 50%;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: currentColor;
  transform: translateY(-50%) scale(0);
  transition: transform 0.3s ease;
}
.toc a:hover { color: var(--color-text); }
.toc a.is-active { color: var(--color-text); }
.toc a.is-active::before { transform: translateY(-50%) scale(1); }

.cs-main { display: grid; gap: var(--space-30); padding-bottom: var(--space-16); }

/* Encabezado */
.cs-head { display: grid; gap: var(--space-10); padding-bottom: var(--space-10); }
.cs-head__title { margin: 0; font-size: 40px; font-weight: 400; line-height: 1.15; letter-spacing: -0.03em; }
.cs-meta { display: grid; grid-template-columns: repeat(3, minmax(0, 220px)); gap: var(--space-6) var(--space-10); margin: 0; }
.cs-meta dt { color: var(--color-text-muted); margin-bottom: var(--space-2); }
.cs-meta dd { margin: 0; line-height: 1.45; font-size: 15px; }
.cs-note { color: var(--color-text-muted); line-height: 1.5; }

/* Sección */
.cs-section { display: grid; gap: var(--space-10); scroll-margin-top: var(--space-10); }
.cs-group { display: grid; gap: var(--space-4); }
.cs-label { color: var(--color-text-muted); font-size: 13px; letter-spacing: 0.06em; text-transform: uppercase; }
.cs-statement { margin: 0; font-size: 26px; font-weight: 400; line-height: 1.25; letter-spacing: -0.02em; color: #111; }
.cs-body { color: #222; font-size: 18px; line-height: 1.65; letter-spacing: 0; }
.cs-body p + p { margin-top: var(--space-4); }

/* Visuales: al ancho de la columna */
.cs-figure { margin: 0; display: grid; gap: var(--space-3); }
.cs-figure img, .cs-figure video { display: block; width: 100%; height: auto; border-radius: 10px; background: var(--color-media); }
.cs-figure figcaption { color: var(--color-text-muted); font-size: 15px; line-height: 1.45; }

/* Flujos clave: video + caption al costado */
.flows { display: grid; gap: var(--space-10); }
.flow { display: grid; gap: var(--space-3); }
.flow__media { border-radius: 10px; overflow: hidden; background: var(--color-media); display: grid; place-items: center; color: var(--color-text-muted); font-size: 13px; text-align: center; padding: var(--space-4); }
.flow__media video, .flow__media img { width: 100%; height: auto; display: block; }
.flow__media:has(video), .flow__media:has(img) { padding: 0; }
.flow p { color: var(--color-text-muted); font-size: 15px; line-height: 1.45; }

/* Datos */
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--space-6) var(--space-4); margin: 0; }
.stats dt { font-size: var(--text-2xl); letter-spacing: -0.03em; line-height: 1; }
.stats dd { margin: var(--space-2) 0 0; color: var(--color-text-muted); }

.quote { margin: 0; font-size: 26px; line-height: 1.25; letter-spacing: -0.025em; }
.quote span { color: var(--color-text-muted); }

.cs-next { display: flex; justify-content: space-between; }

/* Aparición al hacer scroll: de un leve blur a nítido */
@media (prefers-reduced-motion: no-preference) {
  .reveal { opacity: 0; filter: blur(6px); transform: translateY(12px); transition: opacity 0.8s cubic-bezier(0.2, 0, 0, 1), filter 0.8s cubic-bezier(0.2, 0, 0, 1), transform 0.8s cubic-bezier(0.2, 0, 0, 1); }
  .reveal.is-in { opacity: 1; filter: none; transform: none; }
}

@media (max-width: 1240px) {
  .cs-layout { grid-template-columns: minmax(0, 1fr); max-width: 920px; margin: 0 auto; }
  .toc { display: none; }
  .cs-main { gap: var(--space-16); }
}
@media (max-width: 600px) {
  .cs-meta, .stats { grid-template-columns: 1fr 1fr; }
  .flow { grid-template-columns: 1fr; gap: var(--space-3); }
  .cs-statement, .quote { font-size: 22px; }
}



/* Un solo eje: los bloques de texto (680px) se centran sobre la misma
   línea que las imágenes (880px, el ancho de la columna). */
.cs-head, .cs-group, .quote, .cs-note, .stats, .cs-next {
  width: 100%;
  max-width: 680px;
  margin-inline: auto;
}

/* Resumen bajo el título */
.cs-summary { font-size: 20px; line-height: 1.5; color: #222; letter-spacing: -0.01em; }

/* Etiqueta de lado del marketplace junto al label de sección */
.cs-label { display: flex; align-items: center; gap: var(--space-3); }
.side {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-size: 12px;
  letter-spacing: 0;
  text-transform: none;
}
.side::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: currentColor; }
.side--renter { background: #e6f2ee; color: #007e67; }
.side--host { background: #f6eedd; color: #9a6a12; }
.side--both { background: var(--color-surface); color: #555; }

/* Nav: títulos de grupo */
.toc__group {
  margin-top: var(--space-3);
  color: var(--color-text-muted);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.toc__group + li a { padding-left: 14px; }

/* Flujos como figuras con pie */
.flow { margin: 0; }
.flow figcaption { color: var(--color-text-muted); font-size: 15px; line-height: 1.45; max-width: 680px; margin-inline: auto; }
.cs-figure figcaption { max-width: 680px; margin-inline: auto; width: 100%; }

/* Galgo: pantallas reales lado a lado, póster vertical, grilla de marca */
.phones { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); max-width: 680px; width: 100%; margin-inline: auto; }
.phones figure { margin: 0; display: grid; gap: var(--space-3); }
.phones img { width: 100%; height: auto; border-radius: 28px; box-shadow: 0 0 0 1px rgba(0,0,0,0.06), 0 20px 40px -20px rgba(0,0,0,0.25); }
.phones figcaption { color: var(--color-text-muted); font-size: 15px; line-height: 1.45; }
.cs-figure__poster { max-width: 520px; margin-inline: auto; }
.brand-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-4); }
.brand-grid img { width: 100%; height: auto; display: block; border-radius: 10px; }
.cs-body code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 0.88em; background: var(--color-surface); padding: 2px 6px; border-radius: 6px; }
@media (max-width: 600px) { .phones { gap: var(--space-3); } .phones img { border-radius: 18px; } }

/* ---------- About: corto, para leer en segundos ---------- */
.about-page { max-width: 760px; padding: var(--space-16) var(--gutter) 0; display: grid; gap: var(--space-6); }
.about-intro__title { margin: 0; font-size: clamp(28px, 3.2vw, 40px); font-weight: 400; line-height: 1.15; letter-spacing: -0.03em; }
.about-short { display: grid; gap: var(--space-4); font-size: 18px; line-height: 1.6; color: #222; letter-spacing: 0; }
.about-short a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
@media (hover: hover) and (pointer: fine) { .about-short a:hover { text-decoration-thickness: 2px; } }

/* Chip del chat en el nav */
.chat-trigger { border: 0; font: inherit; cursor: pointer; }
.nav__name { white-space: nowrap; }
@media (max-width: 600px) {
  .nav { gap: var(--space-2); }
  .nav__links { gap: 4px; }
  .nav .chip { padding: var(--space-1) 10px; }
  .chat-trigger .chat-trigger-label-full { display: none; }
  .chat-trigger .chat-trigger-label-short { display: inline; }
}

/* Grano sutil sobre todo el sitio, para que el fondo no sea plano */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  z-index: 300;
  pointer-events: none;
  opacity: 0.07;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='220' height='220'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  0 0 0 0.9 0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* Scroll suave para anclas, aterrizando debajo del nav fijo */
html { scroll-padding-top: 72px; }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* Entrada del home en orden de lectura */
@media (prefers-reduced-motion: no-preference) {
  .enter { opacity: 0; transform: translateY(10px); animation: enter 0.7s var(--ease-out) forwards; }
  .feature-video.enter { animation-delay: 0.08s; }
  @keyframes enter { to { opacity: 1; transform: none; } }
  .work-grid .card { opacity: 0; transform: translateY(16px); animation: enter 0.8s var(--ease-out) forwards; }
  .work-grid .card:nth-child(1) { animation-delay: 0.22s; }
  .work-grid .card:nth-child(2) { animation-delay: 0.3s; }
}

/* Contacto: popover anclado al botón del nav */
.contact-pop {
  position: fixed;
  z-index: 150;
  width: 300px;
  padding: 8px;
  border-radius: 16px;
  background: var(--color-bg);
  box-shadow: 0 18px 48px -12px rgba(17, 17, 17, 0.25), 0 0 0 1px rgba(17, 17, 17, 0.06);
  transform-origin: top right;
  opacity: 0;
  transform: scale(0.96) translateY(-4px);
  pointer-events: none;
  transition: opacity 0.18s ease, transform 0.22s var(--ease-out);
}
.contact-pop.is-open { opacity: 1; transform: none; pointer-events: auto; }
.contact-pop__label { padding: 8px 10px 4px; color: var(--color-text-muted); font-size: 13px; }
.contact-pop__item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 10px;
  border: 0;
  border-radius: 10px;
  background: none;
  color: var(--color-text);
  font: inherit;
  font-size: 14px;
  text-align: left;
  cursor: pointer;
  transition: background 0.15s ease, transform 0.16s var(--ease-out);
}
.contact-pop__item:active { transform: scale(0.98); }
@media (hover: hover) and (pointer: fine) { .contact-pop__item:hover { background: var(--color-surface); } }
.contact-pop__item .icon { width: 17px; height: 17px; }
.contact-pop__hint { margin-left: auto; color: var(--color-text-muted); font-size: 13px; }
.contact-pop__item .copy__icons { margin-left: auto; width: 17px; height: 17px; }
.contact-pop__item .copy__label { flex: 1; }
.contact-pop__item .copy__icons .icon { width: 17px; height: 17px; }
@media (max-width: 600px) { .contact-pop { left: 8px !important; right: 8px; width: auto; } }
@media (prefers-reduced-motion: reduce) { .contact-pop, .copy__icons .icon { transition: opacity 0.15s ease; transform: none !important; } }

/* ---------- 404 ---------- */
.nf { max-width: 720px; margin: 0 auto; padding: var(--space-6) var(--gutter) 0; display: grid; justify-items: center; gap: var(--space-4); text-align: center; }
.nf__photo { margin: 0; width: 100%; max-width: 520px; }
.nf__photo img { display: block; width: 100%; height: auto; aspect-ratio: 16 / 8; object-fit: cover; object-position: 50% 60%; border-radius: var(--radius-media); }
.nf__code { margin-top: var(--space-2); font-size: clamp(72px, 10vw, 112px); line-height: 0.85; letter-spacing: -0.06em; font-variant-numeric: tabular-nums; }
.nf__title { margin: 0; font-size: clamp(22px, 2.4vw, 30px); font-weight: 400; line-height: 1.15; letter-spacing: -0.025em; }
.nf__title span { color: var(--color-text-muted); }
.nf__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-2); margin-top: var(--space-2); }
.nf__btn {
  padding: 12px 20px;
  border: 0;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  color: var(--color-text);
  font: inherit;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.2s ease, transform 0.16s var(--ease-out);
}
.nf__btn--primary { background: var(--color-surface-strong); color: #fff; }
.nf__btn:active { transform: scale(0.97); }
@media (hover: hover) and (pointer: fine) { .nf__btn:hover { background: #e4e4e2; } .nf__btn--primary:hover { background: #333; } }
.nf__more { display: grid; gap: var(--space-2); margin-top: var(--space-2); font-size: 14px; }
.nf__more p { color: var(--color-text-muted); }
.nf__more div { display: flex; flex-wrap: wrap; justify-content: center; gap: var(--space-4); }
.nf__more a { text-underline-offset: 3px; }
@media (hover: hover) and (pointer: fine) { .nf__more a:hover { text-decoration: underline; } }
@media (prefers-reduced-motion: no-preference) {
  .nf__title span { display: inline-block; opacity: 0; transform: translateY(6px); animation: enter 0.6s var(--ease-out) 0.55s forwards; }
}

/* Video de la app real dentro de un marco de teléfono */
.phone-video { margin: 0; display: grid; justify-items: center; gap: var(--space-4); }
.phone-video__frame {
  width: min(320px, 78vw);
  padding: 10px;
  border-radius: 52px;
  background: linear-gradient(145deg, #3d413f, #161817 50%, #353937);
  box-shadow: 0 30px 60px -24px rgba(17, 17, 17, 0.45), 0 0 0 1px rgba(255, 255, 255, 0.06) inset;
}
.phone-video__frame video { display: block; width: 100%; height: auto; aspect-ratio: 390 / 844; border-radius: 42px; background: #eeeeec; }
.phone-video figcaption { max-width: 420px; text-align: center; color: var(--color-text-muted); font-size: 15px; line-height: 1.45; }

/* Home: qué hago ahora, debajo de la frase */
.statement p + .statement__now { margin-top: var(--space-2); color: var(--color-text-muted); }

/* Work: tarjeta de texto (trabajo bajo NDA). Mismo sistema, sin imagen ni link. */
.card-text {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr) auto;
  gap: var(--space-6);
  align-items: start;
  padding: var(--space-6);
  border-radius: var(--radius-media);
  background: var(--color-surface);
}
.card-text__body { max-width: 560px; font-size: var(--text-md); line-height: 1.5; color: #222; }
.card-text__tag {
  padding: var(--space-1) var(--space-3);
  border-radius: var(--radius-pill);
  background: var(--color-bg);
  color: var(--color-text-muted);
  font-size: var(--text-xs);
  white-space: nowrap;
}
@media (max-width: 700px) {
  .card-text { grid-template-columns: 1fr; gap: var(--space-3); padding: var(--space-4); }
  .card-text__tag { justify-self: start; }
}