/* /testimonio — página para que los clientes graben y envíen su testimonio en video.
   Sistema Merol (New Design) en contexto Shopify: crema + bosque + lima, el rojo solo en el logo
   y en el punto de grabar. Tokens de la home (proposal-v2_v05.css) y del skill merol-media-design. */

@font-face { font-family: 'Fraunces'; src: url('/testimonio/assets/Fraunces-Italic-latin_v01.woff2') format('woff2'); font-weight: 400 500; font-style: italic; font-display: swap; }

:root {
  --tm-cream: #fcfaf5;
  --tm-sand: #f3eee4;
  --tm-forest: #1a211a;
  --tm-forest-deep: #131813;
  --tm-lime: #c3f87c;
  --tm-lime-hover: #d3ff92;
  --tm-green: #376b39;
  --tm-ink: #221e19;
  --tm-muted: #6f675c;
  --tm-on-dark: #fdf8ee;
  --tm-on-dark-muted: #c9bbb0;
  --tm-line: rgba(34, 30, 25, 0.12);
  --tm-line-dark: rgba(246, 239, 226, 0.16);
  --tm-rec: #d32f2f;
  --tm-error-dark: #ffb3a6;
  --tm-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --tm-sans: 'Grift', ui-sans-serif, system-ui, -apple-system, sans-serif;
  --tm-serif: 'Fraunces', Georgia, serif;
  --tm-header: 64px;
  --tm-logo: 30px;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-padding-top: calc(var(--tm-header) + 16px); }
html.is-studio-open, html.is-studio-open body { overflow: hidden; background: var(--tm-forest-deep); }
/* Con el teclado abierto, iOS desplaza la vista y se asomaba la página de atrás: se oculta mientras el estudio está abierto. */
html.is-studio-open body > :not(dialog) { visibility: hidden; }
/* Safari (iOS 26) pinta la franja de la hora con el color del encabezado pegado arriba, aunque esté oculto:
   con el estudio abierto deja de estar pegado y Safari toma el fondo oscuro de la página */
html.is-studio-open .tm-header { position: static; }
body.tm { margin: 0; background: var(--tm-cream); color: var(--tm-ink); font-family: var(--tm-sans); font-size: 17px; line-height: 1.6; }
/* Resets sin especificidad (:where) para que las clases de cada bloque siempre ganen */
:where(.tm) img { max-width: 100%; height: auto; }
:where(.tm) :where(h1, h2, h3, p, figure, blockquote) { margin: 0; }
:where(.tm) :where(button, input) { font: inherit; }
.tm :focus-visible { outline: 3px solid var(--tm-green); outline-offset: 3px; }

.tm-wrap { width: min(1180px, 100% - 40px); margin-inline: auto; }
.tm-visually-hidden { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.tm-skip { position: absolute; left: 12px; top: -60px; z-index: 50; padding: 10px 14px; border-radius: 6px; background: var(--tm-ink); color: var(--tm-cream); text-decoration: none; }
.tm-skip:focus { top: 12px; }

.tm-icon { width: 24px; height: 24px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.tm-icon--sm { width: 18px; height: 18px; }

/* ── Header ─────────────────────────────────────────────────────────── */
.tm-header { position: sticky; top: 0; z-index: 20; background: var(--tm-cream); border-bottom: 1px solid var(--tm-line); }
.tm-header__inner { width: min(1340px, 100% - 32px); height: var(--tm-header); margin-inline: auto; display: flex; align-items: center; justify-content: center; }
/* Merol × Shopify al centro y a la misma altura (pedido de Renato, 1-oct) */
.tm-brand { display: inline-flex; align-items: center; gap: calc(var(--tm-logo) * 0.5); line-height: 0; }
.tm-brand img { display: block; width: auto; height: var(--tm-logo); }
.tm-brand .tm-brand__x { height: calc(var(--tm-logo) * 0.42); }

/* ── Draft banner (a recorded video that was never sent) ────────────── */
.tm-draft { background: var(--tm-sand); border-bottom: 1px solid var(--tm-line); }
.tm-draft__inner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 20px; padding-block: 14px; }
.tm-draft p { font-size: 16px; line-height: 1.45; color: var(--tm-ink); }
.tm-draft__actions { display: flex; align-items: center; gap: 16px; }

/* ── Buttons ────────────────────────────────────────────────────────── */
.tm-btn { display: inline-flex; align-items: center; justify-content: center; gap: 12px; min-height: 50px; padding: 13px 22px; border: 1.5px solid transparent; border-radius: 8px; font-weight: 600; font-size: 16px; line-height: 1.25; text-decoration: none; cursor: pointer; transition: background-color 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; -webkit-tap-highlight-color: transparent; }
.tm-btn:hover { transform: translateY(-1px); }
.tm-btn:active { opacity: 0.9; transform: none; }
.tm-btn[disabled] { opacity: 0.55; cursor: progress; transform: none; }
.tm-btn--big { min-height: 58px; padding: 15px 28px; font-size: 18px; }
.tm-btn--lime { background: var(--tm-lime); color: var(--tm-forest-deep); }
.tm-btn--lime:hover { background: var(--tm-lime-hover); box-shadow: 0 6px 18px rgba(195, 248, 124, 0.18); }
.tm-btn--dark { background: var(--tm-ink); color: var(--tm-cream); }
.tm-btn--dark:hover { background: #3b352d; }
.tm-btn--ghost { background: transparent; color: var(--tm-on-dark); border-color: rgba(253, 248, 238, 0.4); }
.tm-btn--ghost:hover { background: rgba(253, 248, 238, 0.08); border-color: rgba(253, 248, 238, 0.7); }
.tm-btn__rec { width: 14px; height: 14px; border-radius: 50%; background: var(--tm-rec); box-shadow: 0 0 0 3px rgba(211, 47, 47, 0.18); flex: none; }
.tm-textbtn { padding: 8px 2px; border: 0; background: none; color: var(--tm-ink); font-size: 16px; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.tm-textbtn--light { color: var(--tm-on-dark-muted); }
.tm-textbtn--light:hover { color: var(--tm-on-dark); }

/* ── Hero (bosque) ──────────────────────────────────────────────────── */
.tm-hero { position: relative; overflow: hidden; background: var(--tm-forest); color: var(--tm-on-dark); padding: 44px 0 56px; }
.tm-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(90% 70% at 92% 0%, #2a3a28 0%, var(--tm-forest) 62%); pointer-events: none; }
.tm-hero__grid { position: relative; display: grid; gap: 44px; }
.tm-kicker { font-family: var(--tm-mono); font-size: 12px; line-height: 1.5; letter-spacing: 0.1em; text-transform: uppercase; color: var(--tm-lime); }
.tm-hero h1 { margin-top: 18px; max-width: 12ch; font-size: clamp(44px, 11.5vw, 80px); font-weight: 900; line-height: 0.96; letter-spacing: -0.035em; color: var(--tm-on-dark); text-wrap: balance; }
.tm-hero h1 span { display: block; margin-top: 0.12em; color: var(--tm-lime); }
.tm-lead { margin-top: 22px; max-width: 34em; font-size: 18px; line-height: 1.6; color: var(--tm-on-dark); opacity: 0.88; }
.tm-actions { display: grid; gap: 14px; margin-top: 30px; }
.tm-actions .tm-btn--big { width: 100%; }
.tm-filelink { display: inline-flex; justify-self: start; align-items: center; min-height: 44px; font-size: 17px; color: var(--tm-on-dark-muted); cursor: pointer; }
.tm-filelink u { color: var(--tm-on-dark); text-decoration-color: var(--tm-lime); text-underline-offset: 4px; text-decoration-thickness: 1.5px; }
.tm-filelink:hover u { color: var(--tm-lime); }
.tm-filelink:focus-within { outline: 3px solid var(--tm-lime); outline-offset: 4px; border-radius: 4px; }
.tm-filemsg { margin-top: 12px; padding: 10px 12px; border-radius: 8px; background: rgba(255, 179, 166, 0.12); font-size: 15px; line-height: 1.45; color: var(--tm-error-dark); }
.tm-note { margin-top: 14px; font-size: 15px; line-height: 1.5; color: var(--tm-on-dark-muted); }
.tm-hero :focus-visible, .tm-close :focus-visible, .tm-studio :focus-visible { outline-color: var(--tm-lime); }

/* Visor de muestra: lo que verán al grabar */
.tm-finder { justify-self: center; width: min(60vw, 240px); }
.tm-finder__screen { position: relative; aspect-ratio: 9 / 16; border-radius: 34px; overflow: hidden; background: radial-gradient(70% 45% at 50% 58%, rgba(253, 248, 238, 0.09), transparent 70%), radial-gradient(120% 80% at 25% 15%, #3b4636 0%, #232b21 46%, #151a15 100%); box-shadow: 0 0 0 1px rgba(246, 239, 226, 0.14), 0 30px 60px rgba(0, 0, 0, 0.32); }
/* Personas hechas con IA grabando (Atlas, 1-oct): bajan un poco y se funden arriba para que la tarjeta
   de preguntas no les tape la cara */
.tm-finder__media { position: absolute; inset: 0; }
.tm-finder__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 0; opacity: 0; transform: translateY(10%); transition: opacity 0.45s ease; -webkit-mask-image: linear-gradient(to bottom, transparent 0, #000 18%); mask-image: linear-gradient(to bottom, transparent 0, #000 18%); }
.tm-finder__video.is-on { opacity: 1; }
.tm-finder__top { position: absolute; top: 16px; left: 16px; right: 16px; display: flex; }
.tm-recchip { display: inline-flex; align-items: center; gap: 7px; padding: 6px 10px; border-radius: 999px; background: rgba(19, 24, 19, 0.6); font-family: var(--tm-mono); font-size: 11px; letter-spacing: 0.06em; color: var(--tm-on-dark); }
.tm-recchip__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--tm-rec); animation: tm-blink 1.4s ease-in-out infinite; }
.tm-finder .tm-prompt { position: absolute; top: 56px; left: 14px; right: 14px; }
.tm-finder__corner { position: absolute; width: 22px; height: 22px; border: 2px solid rgba(253, 248, 238, 0.42); }
.tm-finder__corner--tl { top: 42%; left: 18%; border-right: 0; border-bottom: 0; border-top-left-radius: 6px; }
.tm-finder__corner--tr { top: 42%; right: 18%; border-left: 0; border-bottom: 0; border-top-right-radius: 6px; }
.tm-finder__corner--bl { bottom: 21%; left: 18%; border-right: 0; border-top: 0; border-bottom-left-radius: 6px; }
.tm-finder__corner--br { bottom: 21%; right: 18%; border-left: 0; border-top: 0; border-bottom-right-radius: 6px; }
.tm-finder__bottom { position: absolute; bottom: 18px; left: 0; right: 0; display: flex; justify-content: center; }
.tm-finder__btn { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 50%; border: 4px solid var(--tm-on-dark); }
.tm-finder__btn span { width: 22px; height: 22px; border-radius: 6px; background: var(--tm-rec); }
.tm-finder figcaption { margin-top: 16px; font-size: 14px; line-height: 1.45; text-align: center; color: var(--tm-on-dark-muted); }

/* Tarjeta de preguntas: la misma en el visor de muestra y sobre la cámara */
.tm-prompt { border-radius: 16px; padding: 13px 15px; background: rgba(19, 24, 19, 0.74); border: 1px solid rgba(195, 248, 124, 0.22); color: var(--tm-on-dark); -webkit-backdrop-filter: blur(12px) saturate(1.2); backdrop-filter: blur(12px) saturate(1.2); }
.tm-prompt__count { font-family: var(--tm-mono); font-size: 11px; line-height: 1.4; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tm-lime); }
.tm-prompt__q { margin-top: 6px; font-size: 19px; font-weight: 700; line-height: 1.22; letter-spacing: -0.01em; color: var(--tm-on-dark); }
.tm-prompt--demo .tm-prompt__q { font-size: 17px; }
.tm-prompt__q, .tm-prompt__count { transition: opacity 0.28s ease-out, transform 0.28s ease-out; }
.tm-prompt.is-swapping .tm-prompt__q, .tm-prompt.is-swapping .tm-prompt__count { opacity: 0; transform: translateY(6px); }

/* ── Guía de preguntas (crema) ──────────────────────────────────────── */
.tm-guide { padding: 64px 0; }
.tm-guide__grid { display: grid; gap: 34px; }
.tm-guide h2, .tm-tips h2 { font-size: clamp(32px, 7.4vw, 48px); font-weight: 900; line-height: 1.02; letter-spacing: -0.035em; color: var(--tm-ink); text-wrap: balance; }
.tm-guide__intro p { margin-top: 18px; max-width: 30em; font-size: 18px; line-height: 1.6; color: var(--tm-muted); }
.tm-questions { list-style: none; margin: 0; padding: 0; }
.tm-questions li { display: grid; grid-template-columns: 44px 1fr; gap: 16px; padding: 22px 0; border-top: 1px solid var(--tm-line); }
.tm-questions li:last-child { border-bottom: 1px solid var(--tm-line); }
.tm-num { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--tm-sand); font-family: var(--tm-mono); font-size: 13px; color: var(--tm-green); }
.tm-questions h3 { padding-top: 9px; font-size: 21px; font-weight: 700; line-height: 1.22; letter-spacing: -0.012em; color: var(--tm-ink); }
.tm-questions p { margin-top: 6px; font-size: 16.5px; line-height: 1.55; color: var(--tm-muted); }

/* ── Consejos (arena) ───────────────────────────────────────────────── */
.tm-tips { padding: 64px 0; background: var(--tm-sand); }
.tm-tips__list { list-style: none; margin: 34px 0 0; padding: 0; display: grid; gap: 36px; }
/* Ilustraciones tipo instructivo (Codex, 1-oct): fondo crema sobre la banda arena */
.tm-tips__art { display: block; width: 100%; height: auto; aspect-ratio: 3 / 2; border-radius: 14px; background: var(--tm-cream); box-shadow: 0 0 0 1px var(--tm-line); }
.tm-tips__list h3 { margin-top: 18px; font-size: 19px; font-weight: 700; line-height: 1.25; letter-spacing: -0.01em; color: var(--tm-ink); }
.tm-tips__list p { margin-top: 6px; font-size: 16px; line-height: 1.55; color: var(--tm-muted); }

/* ── Cierre (bosque profundo) ───────────────────────────────────────── */
.tm-close { padding: 64px 0 72px; background: var(--tm-forest-deep); color: var(--tm-on-dark); }
.tm-close__grid { display: grid; gap: 48px; }
.tm-letter blockquote p { font-family: var(--tm-serif); font-style: italic; font-weight: 400; font-size: clamp(22px, 5.6vw, 29px); line-height: 1.42; color: var(--tm-on-dark); }
.tm-letter figcaption { display: flex; align-items: center; gap: 14px; margin-top: 24px; }
.tm-letter img { width: 56px; height: 56px; border-radius: 50%; object-fit: cover; object-position: 50% 18%; }
.tm-letter strong { display: block; font-size: 16px; font-weight: 700; color: var(--tm-on-dark); }
.tm-letter figcaption span { font-size: 15px; line-height: 1.4; color: var(--tm-on-dark-muted); }
.tm-close h2 { font-size: clamp(44px, 10vw, 64px); font-weight: 900; line-height: 0.96; letter-spacing: -0.035em; color: var(--tm-on-dark); }
.tm-close__cta .tm-btn { margin-top: 26px; width: 100%; }
.tm-sharenote { max-width: 30em; margin-top: 18px; font-size: 15px; line-height: 1.5; color: var(--tm-on-dark-muted); }

/* ── Footer ─────────────────────────────────────────────────────────── */
.tm-footer { padding: 28px 0 calc(28px + env(safe-area-inset-bottom)); border-top: 1px solid var(--tm-line); }
.tm-footer__inner { display: flex; flex-wrap: wrap; gap: 6px 24px; align-items: center; }
.tm-footer p, .tm-footer a { font-size: 14px; line-height: 1.5; color: var(--tm-muted); }
.tm-footer a { text-underline-offset: 3px; }
.tm-footer a:hover { color: var(--tm-ink); }

/* ── Estudio: grabar, revisar, enviar ───────────────────────────────── */
.tm-studio { position: fixed; inset: 0; width: 100%; height: 100%; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: var(--tm-forest-deep); color: var(--tm-on-dark); overflow: hidden; }
.tm-studio[open] { display: flex; flex-direction: column; }
.tm-studio:focus { outline: none; }
.tm-studio::backdrop { background: var(--tm-forest-deep); }
.tm-studio__bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 64px; padding: calc(8px + env(safe-area-inset-top)) max(12px, env(safe-area-inset-right)) 8px max(12px, env(safe-area-inset-left)); }
.tm-studio__status { flex: 1; text-align: center; font-family: var(--tm-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--tm-on-dark-muted); }
.tm-iconbtn { display: grid; place-items: center; width: 46px; height: 46px; border: 0; border-radius: 50%; background: rgba(253, 248, 238, 0.1); color: var(--tm-on-dark); cursor: pointer; }
.tm-iconbtn:hover { background: rgba(253, 248, 238, 0.18); }
.tm-iconbtn[hidden] { display: grid; visibility: hidden; }
.tm-step { flex: 1; min-height: 0; }
.tm-step[hidden] { display: none !important; }

/* La cámara ocupa toda la pantalla (pedido de Renato, 1-oct): la barra, las preguntas y los controles van encima */
.tm-studio[data-current="camara"] .tm-studio__bar { position: absolute; top: 0; left: 0; right: 0; z-index: 6; background: linear-gradient(rgba(13, 17, 13, 0.55), rgba(13, 17, 13, 0)); }
.tm-studio[data-current="camara"] .tm-iconbtn { background: rgba(13, 17, 13, 0.45); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.tm-studio[data-current="camara"] .tm-iconbtn:hover { background: rgba(13, 17, 13, 0.65); }
.tm-studio[data-current="camara"] .tm-studio__status { color: var(--tm-on-dark); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5); }
.tm-camera { position: absolute; inset: 0; }
.tm-camera__frame { position: absolute; inset: 0; overflow: hidden; background: #0d110d; }
.tm-camera__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; background: #0d110d; }
.tm-camera__video.is-mirrored { transform: scaleX(-1); }
.tm-camera .tm-prompt { position: absolute; top: calc(env(safe-area-inset-top) + 66px); left: max(12px, env(safe-area-inset-left)); right: max(12px, env(safe-area-inset-right)); max-width: 600px; margin-inline: auto; z-index: 2; }
.tm-camera .tm-prompt__q { font-size: 22px; line-height: 1.2; }
.tm-prompt__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.tm-prompt__hide { min-height: 32px; padding: 4px 2px; border: 0; background: none; color: var(--tm-on-dark-muted); font-size: 14px; text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.tm-prompt__hint { margin-top: 6px; font-size: 15px; line-height: 1.45; color: var(--tm-on-dark-muted); }
.tm-prompt__nav { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.tm-prompt__arrow { display: grid; place-items: center; width: 44px; height: 40px; border: 0; border-radius: 10px; background: rgba(253, 248, 238, 0.08); color: var(--tm-on-dark); cursor: pointer; }
.tm-prompt__arrow:hover { background: rgba(253, 248, 238, 0.16); }
.tm-prompt__arrow[disabled] { opacity: 0.35; cursor: default; }
.tm-prompt__dots { display: flex; gap: 6px; }
.tm-prompt__dots i { width: 7px; height: 7px; border-radius: 50%; background: rgba(253, 248, 238, 0.3); transition: background-color 0.2s, transform 0.2s; }
.tm-prompt__dots i.is-on { background: var(--tm-lime); transform: scale(1.15); }
.tm-prompt.is-collapsed .tm-prompt__body { display: none; }
/* Tiempo de cada pregunta mientras graban: al llenarse, pasa a la siguiente en la próxima pausa */
.tm-prompt__timer { display: block; height: 3px; margin-top: 10px; border-radius: 999px; background: rgba(253, 248, 238, 0.14); overflow: hidden; }
.tm-prompt__timer[hidden] { display: none; }
.tm-prompt__timer span { display: block; width: 100%; height: 100%; border-radius: inherit; background: var(--tm-lime); transform: scaleX(0); transform-origin: left center; }
.tm-prompt__timer.is-running span { animation: tm-qtimer var(--tm-q-seconds, 25s) linear forwards; }
.tm-countdown { position: absolute; inset: 0; z-index: 3; display: grid; place-items: center; pointer-events: none; font-weight: 900; font-size: clamp(110px, 30vw, 180px); line-height: 1; color: var(--tm-lime); text-shadow: 0 8px 40px rgba(0, 0, 0, 0.45); }
.tm-countdown span { animation: tm-count 0.8s ease-out both; }
.tm-camera__msg { position: absolute; inset: 0; z-index: 4; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 12px; padding: calc(env(safe-area-inset-top) + 76px) 24px calc(env(safe-area-inset-bottom) + 28px); text-align: center; background: rgba(19, 24, 19, 0.94); overflow-y: auto; }
.tm-camera__msg[hidden] { display: none; }
.tm-camera__title { max-width: 18em; font-size: 25px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; color: var(--tm-on-dark); }
.tm-camera__title:focus { outline: none; }
.tm-camera__msg p { max-width: 30em; font-size: 16.5px; line-height: 1.55; color: var(--tm-on-dark-muted); }
.tm-camera__help { padding: 12px 14px; border-radius: 10px; background: rgba(253, 248, 238, 0.06); font-size: 15px !important; text-align: left; }
.tm-camera__actions { display: grid; gap: 10px; width: min(100%, 340px); margin-top: 8px; }
.tm-camera__actions .tm-btn { width: 100%; }
.tm-spinner { width: 34px; height: 34px; border-radius: 50%; border: 3px solid rgba(253, 248, 238, 0.18); border-top-color: var(--tm-lime); animation: tm-spin 0.9s linear infinite; }

.tm-controls { position: absolute; left: 0; right: 0; bottom: 0; z-index: 3; display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 56px 16px calc(16px + env(safe-area-inset-bottom)); background: linear-gradient(rgba(13, 17, 13, 0), rgba(13, 17, 13, 0.62) 55%); }
.tm-timer { display: inline-flex; align-items: center; gap: 8px; min-height: 22px; font-family: var(--tm-mono); font-size: 15px; letter-spacing: 0.04em; color: var(--tm-on-dark); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.5); font-variant-numeric: tabular-nums; }
.tm-timer.is-live::before { content: ""; width: 9px; height: 9px; border-radius: 50%; background: var(--tm-rec); animation: tm-blink 1.4s ease-in-out infinite; }
.tm-recbtn { display: grid; place-items: center; width: 78px; height: 78px; padding: 0; border: 4px solid var(--tm-on-dark); border-radius: 50%; background: transparent; cursor: pointer; -webkit-tap-highlight-color: transparent; }
.tm-recbtn span { width: 60px; height: 60px; border-radius: 50%; background: var(--tm-rec); transition: width 0.2s ease, height 0.2s ease, border-radius 0.2s ease; }
.tm-recbtn.is-recording span { width: 30px; height: 30px; border-radius: 7px; }
.tm-recbtn[disabled] { opacity: 0.4; cursor: default; }
.tm-controls__hint { max-width: 26em; min-height: 24px; font-size: 15px; line-height: 1.45; text-align: center; text-wrap: balance; color: var(--tm-on-dark); text-shadow: 0 1px 6px rgba(0, 0, 0, 0.55); }

.tm-review { overflow-y: auto; padding: 4px max(16px, env(safe-area-inset-right)) calc(28px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); -webkit-overflow-scrolling: touch; }
.tm-review__media { width: 100%; max-width: 620px; margin-inline: auto; }
.tm-review__video { display: block; width: 100%; max-height: 46vh; max-height: 46dvh; border-radius: 16px; background: #000; object-fit: contain; }
.tm-review__note { margin-top: 10px; font-size: 15px; line-height: 1.5; color: var(--tm-on-dark-muted); text-align: center; }
.tm-form { width: 100%; max-width: 520px; margin: 24px auto 0; }
.tm-form__title { font-size: 32px; font-weight: 900; line-height: 1; letter-spacing: -0.03em; color: var(--tm-on-dark); }
.tm-form__title:focus { outline: none; }
.tm-form__lead { margin-top: 10px; font-size: 16.5px; line-height: 1.55; color: var(--tm-on-dark-muted); }
.tm-field { margin-top: 20px; }
.tm-field label { display: block; margin-bottom: 8px; font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--tm-on-dark); }
.tm-field input { width: 100%; min-height: 54px; padding: 12px 14px; border: 1.5px solid rgba(253, 248, 238, 0.22); border-radius: 8px; background: rgba(253, 248, 238, 0.06); color: var(--tm-on-dark); font-size: 17px; }
.tm-field input:focus { outline: none; border-color: var(--tm-lime); box-shadow: 0 0 0 3px rgba(195, 248, 124, 0.22); }
.tm-field input[aria-invalid="true"] { border-color: var(--tm-error-dark); }
/* Aviso al enviar: compartimos el video (pedido de Renato, 1-oct: avisar, no pedir permiso) */
.tm-field__help { margin-top: 8px; font-size: 14.5px; line-height: 1.45; color: var(--tm-on-dark-muted); }
.tm-field__opt { margin-left: 6px; font-size: 14px; font-weight: 400; color: var(--tm-on-dark-muted); }
/* Emoji for the title (Renato, Oct 1): optional; tapping the chosen one again clears it (testimonio_v08.js). */
.tm-emojis { min-width: 0; margin: 20px 0 0; padding: 0; border: 0; }
.tm-emojis legend { display: block; margin-bottom: 8px; padding: 0; font-size: 16px; font-weight: 600; line-height: 1.35; color: var(--tm-on-dark); }
.tm-emojis__list { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 8px; max-width: 400px; }
.tm-emojis__list label { position: relative; display: grid; place-items: center; aspect-ratio: 1; border: 1.5px solid rgba(253, 248, 238, 0.22); border-radius: 10px; background: rgba(253, 248, 238, 0.06); font-size: clamp(20px, 6vw, 25px); line-height: 1; cursor: pointer; transition: border-color 0.15s ease, background-color 0.15s ease, transform 0.15s ease; -webkit-tap-highlight-color: transparent; }
.tm-emojis__list input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
@media (hover: hover) { .tm-emojis__list label:hover { border-color: rgba(253, 248, 238, 0.5); } }
.tm-emojis__list label:has(input:focus-visible) { outline: 2px solid var(--tm-lime); outline-offset: 2px; }
.tm-emojis__list label.is-on { border-color: var(--tm-lime); background: rgba(195, 248, 124, 0.16); transform: scale(1.06); }
.tm-form__notice { margin-top: 22px; font-size: 15px; line-height: 1.5; color: var(--tm-on-dark-muted); }
.tm-form__error { min-height: 24px; margin-top: 10px; font-size: 15.5px; line-height: 1.45; color: var(--tm-error-dark); }
.tm-form__actions { display: grid; gap: 12px; margin-top: 10px; }
.tm-form__actions .tm-btn { width: 100%; }

.tm-sending, .tm-failed, .tm-done { display: flex; align-items: center; justify-content: center; overflow-y: auto; padding: 24px max(20px, env(safe-area-inset-right)) calc(32px + env(safe-area-inset-bottom)) max(20px, env(safe-area-inset-left)); }
.tm-sending__box { width: 100%; max-width: 460px; text-align: center; }
.tm-sending__box h2 { font-size: 30px; font-weight: 700; line-height: 1.1; letter-spacing: -0.02em; color: var(--tm-on-dark); }
.tm-sending__box h2:focus { outline: none; }
.tm-sending__box > p { margin-top: 14px; font-size: 17px; line-height: 1.55; color: var(--tm-on-dark-muted); }
.tm-sending__pct { margin-top: 22px !important; font-weight: 900; font-size: 76px !important; line-height: 1 !important; letter-spacing: -0.04em; color: var(--tm-lime) !important; font-variant-numeric: tabular-nums; }
.tm-progress { height: 10px; margin-top: 20px; border-radius: 999px; background: rgba(253, 248, 238, 0.12); overflow: hidden; }
.tm-progress span { display: block; width: 0; height: 100%; border-radius: inherit; background: var(--tm-lime); transition: width 0.3s ease-out; }
.tm-sending .tm-textbtn { margin-top: 18px; }
.tm-failed .tm-form__actions, .tm-done .tm-form__actions { margin-top: 26px; justify-items: center; }
.tm-failed__hint { font-size: 15px !important; }
.tm-failed__hint a { color: var(--tm-on-dark); text-underline-offset: 3px; }
.tm-done__check { display: inline-grid; place-items: center; width: 76px; height: 76px; margin-bottom: 22px; border-radius: 50%; background: var(--tm-lime); color: var(--tm-forest-deep); }
.tm-done__check .tm-icon { width: 38px; height: 38px; stroke-width: 2.5; }
.tm-done h2 { font-weight: 900; font-size: clamp(40px, 11vw, 56px); line-height: 0.98; letter-spacing: -0.035em; text-wrap: balance; }
.tm-done .tm-sending__box > p { text-wrap: balance; }
.tm-done__sign { display: inline-flex; align-items: center; gap: 12px; margin-top: 22px; text-align: left; }
.tm-done__sign img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; object-position: 50% 18%; }
.tm-done__sign span { font-size: 14px; line-height: 1.4; color: var(--tm-on-dark-muted); }
.tm-done__sign strong { display: block; font-size: 15px; font-weight: 700; color: var(--tm-on-dark); }

/* ── Tablet y escritorio ────────────────────────────────────────────── */
@media (min-width: 640px) {
  .tm-tips__list { grid-template-columns: 1fr 1fr; gap: 32px 40px; }
  .tm-actions { grid-template-columns: auto; justify-content: start; }
  .tm-actions .tm-btn--big, .tm-close__cta .tm-btn { width: auto; }
  .tm-form__actions { grid-template-columns: auto auto; justify-content: start; }
  .tm-form__actions .tm-btn { width: auto; }
  .tm-failed .tm-form__actions, .tm-done .tm-form__actions { justify-content: center; }
}

@media (min-width: 900px) {
  :root { --tm-header: 82px; --tm-logo: 38px; }
  .tm-hero { padding: 72px 0 84px; }
  .tm-hero__grid { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); align-items: center; gap: 56px; }
  .tm-hero h1 { font-size: clamp(56px, 5.6vw, 80px); }
  .tm-finder { width: 320px; }
  .tm-finder .tm-prompt--demo .tm-prompt__q { font-size: 18px; }
  .tm-guide, .tm-tips { padding: 104px 0; }
  .tm-guide__grid { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); gap: 72px; align-items: start; }
  .tm-guide__intro { position: sticky; top: calc(var(--tm-header) + 40px); }
  .tm-tips__list { grid-template-columns: repeat(4, 1fr); gap: 40px 32px; margin-top: 48px; }
  .tm-close { padding: 104px 0 112px; }
  .tm-close__grid { grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 88px; align-items: center; }
  .tm-footer__inner { justify-content: space-between; }

  .tm-camera .tm-prompt { top: 80px; }
  .tm-camera .tm-prompt__q { font-size: 24px; }
  .tm-review { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.9fr); gap: 48px; align-items: center; align-content: center; padding-inline: 40px; }
  .tm-review__media { max-width: none; }
  .tm-review__video { max-height: calc(100dvh - 140px); }
  .tm-form { margin-top: 0; }
}

/* ── Celular y tablet (pedido de Renato, 1-oct): el teléfono de ejemplo sube bajo el título y el botón
   de grabar se queda fijo abajo hasta que aparece el botón del cierre ─────────────────────────────── */
@media (max-width: 899px) {
  html { scroll-padding-bottom: 104px; }
  .tm-hero__grid { display: flex; flex-direction: column; gap: 0; }
  .tm-hero__copy { display: contents; }
  .tm-kicker { order: 1; }
  .tm-hero h1 { order: 2; }
  .tm-finder { order: 3; align-self: center; width: min(58vw, 230px); margin-top: 30px; }
  .tm-finder .tm-prompt--demo .tm-prompt__q { font-size: 15px; }
  .tm-lead { order: 4; margin-top: 30px; }
  .tm-actions { order: 5; margin-top: 16px; }
  .tm-filemsg { order: 6; }
  .tm-note { order: 7; }
  /* Fija al borde de abajo: Safari la pone justo encima de sus botones, con la barra abierta o encogida
     (medido en el simulador con iOS 26), y pinta su franja con el mismo color. */
  .tm-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 15; padding: 10px max(16px, env(safe-area-inset-right)) calc(10px + env(safe-area-inset-bottom)) max(16px, env(safe-area-inset-left)); background: var(--tm-forest-deep); border-top: 1px solid var(--tm-line-dark); transition: transform 0.3s ease, visibility 0.3s; }
  .tm-dock .tm-btn--big { display: flex; width: min(100%, 520px); margin-inline: auto; }
  html.is-dock-hidden .tm-dock { transform: translateY(110%); visibility: hidden; }
}

/* Pantalla horizontal (computadora): la cámara se ve completa, sin recortar */
@media (min-aspect-ratio: 1/1) {
  .tm-camera__video { object-fit: contain; }
}

/* Teléfono de lado (pantalla baja): preguntas a la izquierda y el botón a la derecha, como la app de cámara */
@media (min-aspect-ratio: 1/1) and (max-height: 500px) {
  .tm-camera .tm-prompt { top: calc(env(safe-area-inset-top) + 58px); left: max(12px, env(safe-area-inset-left)); right: calc(max(12px, env(safe-area-inset-right)) + 150px); max-width: 520px; margin-inline: 0; padding: 10px 14px; }
  .tm-camera .tm-prompt__q { font-size: 19px; }
  .tm-camera .tm-prompt__hint { display: none; }
  .tm-camera .tm-prompt__nav { margin-top: 4px; }
  .tm-controls { top: 0; left: auto; width: calc(max(12px, env(safe-area-inset-right)) + 150px); justify-content: center; padding: 12px max(12px, env(safe-area-inset-right)) 12px 12px; background: linear-gradient(to left, rgba(13, 17, 13, 0.62), rgba(13, 17, 13, 0)); }
  .tm-controls__hint { font-size: 14px; }
}

@keyframes tm-blink { 50% { opacity: 0.25; } }
@keyframes tm-count { from { opacity: 0; transform: scale(1.25); } 30% { opacity: 1; } to { opacity: 1; transform: scale(1); } }
@keyframes tm-spin { to { transform: rotate(360deg); } }
@keyframes tm-qtimer { to { transform: scaleX(1); } }

@media (prefers-reduced-motion: reduce) {
  .tm-btn, .tm-recbtn span, .tm-prompt__q, .tm-prompt__count, .tm-progress span, .tm-dock, .tm-finder__video, .tm-emojis__list label { transition: none; }
  .tm-emojis__list label.is-on { transform: none; }
  .tm-recchip__dot, .tm-timer.is-live::before, .tm-countdown span { animation: none; }
  .tm-spinner { animation-duration: 2.4s; }
}