/* «Qué he construido»: todos los casos con la misma estructura — texto a la izquierda, muestra a la derecha.
   Muestras: ventana de navegador (capturas web), móvil (Telegram) y el chat abierto. */
.t-case { align-items: center; }
.t-case__text { min-width: 0; }
.t-case__kicker { margin-bottom: 14px; font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--accent); }
.t-case__text .t-case__desc { margin-top: 14px; }
.t-case__text .t-rows { margin-top: 26px; }
.t-case__text .t-rows > div { grid-template-columns: 1fr !important; gap: 4px; padding: 12px 0; }
.t-case__text .t-rows dd { font-size: 14px; line-height: 1.6; }
.t-case__media { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 14px; }

/* Marco común de las muestras */
.t-frame { width: 100%; margin: 0; overflow: hidden; border: 1px solid rgba(255, 255, 255, 0.12); background: #121619; box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45); }
.t-frame--browser { border-radius: 12px; }
.t-frame__bar { display: flex; align-items: center; gap: 6px; padding: 10px 12px; border-bottom: 1px solid rgba(255, 255, 255, 0.08); background: #1a1f23; }
.t-frame__bar i { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.18); }
.t-frame__url { flex: 1; max-width: 60%; margin: 0 auto; padding: 4px 12px; border-radius: 999px; background: rgba(0, 0, 0, 0.35); color: var(--muted); font: 400 12px/1.2 -apple-system, BlinkMacSystemFont, system-ui, sans-serif; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.t-frame--phone { width: min(300px, 78%); padding: 10px; border-radius: 40px; background: #0b0d0f; border: 1px solid rgba(255, 255, 255, 0.16); }
.t-frame--phone .t-gallery { border-radius: 30px; overflow: hidden; }

/* Galería rotatoria: capturas apiladas, solo la activa es visible */
.t-gallery { position: relative; display: grid; }
.t-gallery__slide { grid-area: 1 / 1; display: block; opacity: 0; visibility: hidden; transition: opacity 0.6s ease, visibility 0s 0.6s; }
.t-gallery__slide.is-active { opacity: 1; visibility: visible; transition: opacity 0.6s ease; }
.t-gallery__slide img { display: block; width: 100%; height: auto; }
a.t-gallery__slide:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }
.t-gallery__dots { display: flex; gap: 8px; }
.t-gallery__dots button { width: 22px; height: 4px; padding: 0; border: 0; border-radius: 2px; background: rgba(255, 255, 255, 0.2); cursor: pointer; transition: background 0.25s, width 0.25s; }
.t-gallery__dots button[aria-current="true"] { width: 34px; background: var(--accent); }
.t-gallery__dots button:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* Chat abierto dentro de su caso */
.c-inline { display: flex; flex-direction: column; width: 100%; max-width: 420px; height: 540px; }
.c-note--out { max-width: 420px; padding: 0; text-align: center; }
.c-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

@media (min-width: 900px) {
  .t-case { grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr) !important; gap: clamp(40px, 5vw, 72px); }
}
@media (max-width: 899px) { .c-inline { height: 480px; } }
@media (prefers-reduced-motion: reduce) { .t-gallery__slide, .t-gallery__slide.is-active { transition: none; } }