
.tm{background:#201C24;color:#F4EFEA;padding-block:78px 64px;overflow:hidden}
.tm{position:relative}
.tm::before,.tm::after{content:'';position:absolute;left:50%;transform:translateX(-50%);width:min(560px,80%);height:1px;background:linear-gradient(90deg,transparent,rgba(220,207,243,.35),transparent)}
.tm::before{top:0}.tm::after{bottom:0}
@media (max-width:640px){.tm{padding-block:60px 48px}}
.tm .eyebrow{color:rgba(255,255,255,.62)}
.tm-head{max-width:760px}
.tm-comilla{font-family:var(--serif);font-size:120px;line-height:.55;color:#DCCFF3;height:48px;margin-top:22px}
.tm-frase{position:relative;min-height:3.3em;font-size:clamp(31px,5.4vw,50px)}
@media (min-width:900px){.tm-frase{min-height:2.2em}}
.tm-frase blockquote{margin:0;font-family:var(--serif);font-weight:700;font-size:1em;line-height:1.06;
  letter-spacing:-.02em;text-transform:uppercase;text-wrap:balance;transition:opacity .45s,transform .45s}
.tm-frase blockquote i{font-weight:500;font-style:italic;text-transform:none}
.tm-frase .mk{--mk:rgba(190,168,236,.55);color:#fff}
.tm-frase.cambiando blockquote,.tm-frase.cambiando + .tm-firma{opacity:0;transform:translateY(8px)}
.tm-firma{display:flex;align-items:center;gap:11px;margin-top:18px;font-size:14px;line-height:1.4;
  color:rgba(255,255,255,.62);transition:opacity .45s,transform .45s}
.tm-firma img{width:40px;height:40px;border-radius:50%;flex:none;object-fit:cover}
.tm-firma b{color:#fff}
.tm-puntos{display:flex;gap:7px;margin-top:22px}
.tm-puntos button{width:8px;height:8px;border-radius:9px;border:0;padding:0;cursor:pointer;
  background:rgba(255,255,255,.25);transition:width .3s,background .3s}
.tm-puntos button.on{width:26px;background:#DCCFF3}
.tm-sub{margin-top:36px;font-size:15px;color:rgba(255,255,255,.62)}

.tm-muro{position:relative;margin:24px auto 0;max-width:1100px;height:640px;overflow:hidden;
  display:grid;grid-template-columns:repeat(var(--tm-cols,2),1fr);gap:12px;padding-inline:14px;
  -webkit-mask:linear-gradient(transparent,#000 9%,#000 88%,transparent);
          mask:linear-gradient(transparent,#000 9%,#000 88%,transparent)}
@media (min-width:900px){.tm-muro{height:660px;gap:16px;padding-inline:22px}}
.tm-col{overflow-y:auto;scrollbar-width:none;overscroll-behavior-y:auto;cursor:grab;-webkit-overflow-scrolling:touch}
.tm-col::-webkit-scrollbar{display:none}
.tm-col.arrastrando{cursor:grabbing;user-select:none}
.tm-pista{display:flex;flex-direction:column;gap:12px}
@media (min-width:900px){.tm-pista{gap:16px}}
@keyframes tmSube{from{transform:translateY(0)}to{transform:translateY(-50%)}}

.tm-c{border-radius:22px;padding:15px 15px 16px}
.tm-c.lt{background:#FAF6F1;color:var(--ink)}
.tm-c.dk{background:#2F2A33;border:1px solid rgba(255,255,255,.06);color:#F4EFEA}
.tm-who{display:flex;align-items:center;gap:9px;margin-bottom:10px}
.tm-av{width:34px;height:34px;border-radius:50%;flex:none;object-fit:cover}
.tm-ini{display:grid;place-items:center;color:#201C24;font-weight:700;font-size:14px}
.tm-who b{display:block;font-size:13.5px;line-height:1.3}
.tm-who small{display:block;font-size:10.5px;opacity:.55;letter-spacing:.04em;line-height:1.3}
.tm-who .tm-st{margin-left:auto;color:#E8A96F;font-size:10px;letter-spacing:1px}
.tm-c p{margin:0;font-size:14px;line-height:1.52}
/* ── notas de voz dentro del muro ── */
.tm-voz{background:linear-gradient(160deg,#FAF6F1,#F1E9FA);color:var(--ink);border:1px solid rgba(190,168,236,.45)}
.tm-voz.tm-top{background:linear-gradient(155deg,#F6DDA8 0%,#F3C0CB 55%,#D9C6F2 100%);border:0;box-shadow:0 14px 34px rgba(0,0,0,.35)}
.tm-voz p{color:var(--ink2)!important;font-family:var(--serif);font-style:italic;font-size:15.5px!important;line-height:1.4!important}
.tm-voz.tm-top p{font-size:17px!important;color:var(--ink)!important}
.tm-voz p b{color:var(--ink)!important;font-weight:700}
.tm-etq{margin-left:auto;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;background:rgba(32,28,36,.08);color:var(--ink);padding:4px 8px;border-radius:999px;white-space:nowrap}
.tm-top .tm-etq{background:#201C24;color:#fff}
.tm-vel{margin-left:auto;border:0;cursor:pointer;font-family:var(--sans);font-size:12px;font-weight:700;background:rgba(32,28,36,.1);color:var(--ink);padding:5px 10px;border-radius:999px;min-width:44px}
.tm-vel:hover{background:rgba(32,28,36,.18)}
.tm-top .tm-vel{background:#201C24;color:#fff}

@media (max-width:640px){.tm-etq{font-size:0;padding:5px 6px}.tm-etq::first-letter{font-size:13px}.tm-voz .tm-who small{display:none}}
.tm-rep{display:flex;align-items:center;gap:10px;margin:2px 0 12px}
.tm-play{width:44px;height:44px;flex:none;border-radius:50%;border:0;cursor:pointer;background:#201C24;position:relative;box-shadow:0 0 0 5px rgba(32,28,36,.08)}
.tm-top .tm-play{width:52px;height:52px;box-shadow:0 0 0 6px rgba(255,255,255,.45)}
.tm-play::after{content:'';position:absolute;left:54%;top:50%;transform:translate(-50%,-50%);border-left:13px solid #fff;border-top:8px solid transparent;border-bottom:8px solid transparent}
.tm-voz.sonando .tm-play::after{left:50%;border:0;width:12px;height:14px;background:linear-gradient(90deg,#fff 0 35%,transparent 35% 65%,#fff 65%)}
.tm-voz.sonando .tm-play{animation:tmLat 1.6s ease-in-out infinite}
@keyframes tmLat{0%,100%{box-shadow:0 0 0 5px rgba(32,28,36,.10)}50%{box-shadow:0 0 0 10px rgba(32,28,36,.04)}}
.tm-ondas{flex:1;height:30px;display:flex;align-items:center;gap:2px;--p:0%;
  -webkit-mask:linear-gradient(90deg,#000 var(--p),rgba(0,0,0,.32) var(--p));mask:linear-gradient(90deg,#000 var(--p),rgba(0,0,0,.32) var(--p))}
.tm-ondas i{flex:1;min-width:2px;border-radius:2px;background:#201C24}
.tm-t{font-size:11.5px;font-weight:600;font-variant-numeric:tabular-nums;color:var(--ink);opacity:.7}

@media (min-width:900px){.tm-c p{font-size:15px}}
.tm-c.lt p{color:var(--ink2)} .tm-c.lt p b{color:var(--ink)}
.tm-c.dk p{color:rgba(244,239,234,.85)} .tm-c.dk p b{color:#fff}
.tm-c.dk .mk{background:none;padding:0;color:#F6DDA8;text-decoration:underline;
  text-decoration-color:rgba(246,221,168,.75);text-decoration-thickness:2px;text-underline-offset:4px}
.tm-c.lt .mk{color:inherit}
@media (prefers-reduced-motion:reduce){.tm-muro{height:auto;-webkit-mask:none;mask:none}}

.tm{--ink2:#504957;--mk1:#F3C0CB;--mk2:#DCEFF7;--mk3:#F6DDA8;--mk4:#DCCFF3;--mk5:#C8D7C5}.tm-head{margin-inline:auto}.tm .mk{background:var(--mk);padding:0 .12em;border-radius:4px}.tm-toolbar{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-top:32px}.tm-toolbar .tm-sub{margin:0}.tm-toolbar button{background:transparent;color:#DCCFF3;border:1px solid #75677f;border-radius:999px;padding:9px 14px;cursor:pointer;font:12px var(--sans)}.tm button:focus-visible,.tm-col:focus-visible{outline:2px solid #F6DDA8;outline-offset:4px}.tm .tm-frase{min-height:3.3em}.tm .tm-puntos button{height:12px;min-width:12px}.tm .tm-puntos button.on{width:30px}.tm .tm-col{border-radius:22px}.tm .tm-muro{margin-top:24px}@media(max-width:480px){.tm-toolbar{align-items:flex-start}.tm-toolbar .tm-sub{max-width:175px}.tm-muro{gap:8px;padding-inline:12px}.tm-c{padding:12px;border-radius:16px}.tm-c p{font-size:12px}.tm-who{gap:6px;flex-wrap:wrap}.tm-who b{font-size:12px}.tm-who small{font-size:9px}.tm-av{width:28px;height:28px}.tm-rep{gap:6px}.tm-play{width:34px;height:34px}.tm-ondas{gap:1px}.tm-t{font-size:10px}.tm-vel{padding:4px 7px}.tm-voz p{font-size:14px!important}}
@media(min-width:900px){.tm .tm-frase{min-height:2.2em}}
