/* Página del dictado (/dictado-por-voz), presentada como una función de ablalo
   con el diseño de la portada: va encima de styles.css (que da las secciones del
   dictado de siempre: problema, cómo funciona, carrusel y «en cualquier
   programa») y de css/inicio.css (menú, píldoras, privacidad, banda y cierre).
   Prefijo dt-. */

/* ───────── Hero ───────── */
.dt-hero { padding: clamp(8rem, 12vw, 10rem) 0 clamp(4rem, 7vw, 6rem); }
.dt-hero__h1 { max-width: 16ch; margin: 28px 0 30px; }

/* El escrito en Word sobre el fondo naranja, con la pastilla del dictado. */
.dt-escena {
  position: relative; display: grid; grid-template-columns: minmax(0, 1fr); place-items: center;
  margin-top: clamp(3rem, 6vw, 4.5rem); min-height: 440px; padding: 56px 24px 104px;
  border-radius: 22px; overflow: hidden;
  background:
    radial-gradient(rgba(255, 255, 255, 0.28) 1px, transparent 1.6px) 0 0 / 7px 7px,
    radial-gradient(120% 90% at 20% 25%, #FFC29E 0%, #F07A3A 38%, #C4440B 70%, #6E2606 100%);
}
.dt-doc { width: min(680px, 100%); padding: 16px 30px 34px; }
.dt-doc__barra {
  display: flex; align-items: center; gap: 12px; padding-bottom: 14px; margin-bottom: 22px;
  border-bottom: 1px solid var(--in-line); font-size: 0.85rem; font-weight: 600; color: var(--in-soft);
}
.dt-doc__barra .in-ventana__puntos { margin-right: 6px; }
.dt-doc__barra span:last-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dt-doc__texto { margin: 0; min-height: 5em; font-family: Georgia, 'Times New Roman', serif; font-size: 1.2rem; line-height: 1.65; color: var(--in-ink); }
.dt-pastilla {
  position: absolute; left: 50%; bottom: 30px; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 14px; padding: 11px 20px; border-radius: 999px;
  background: var(--in-ink); color: #fff; font-size: 0.85rem; font-weight: 500; white-space: nowrap;
  box-shadow: 0 20px 40px -18px rgba(0, 0, 0, 0.6);
}
.dt-pastilla .in-onda__barras { height: 22px; gap: 4px; }
.dt-pastilla .in-onda__barras i { width: 4px; }
.dt-pastilla .in-onda__barras i:nth-child(1) { height: 8px; }
.dt-pastilla .in-onda__barras i:nth-child(2) { height: 16px; }
.dt-pastilla .in-onda__barras i:nth-child(3) { height: 22px; }
.dt-pastilla .in-onda__barras i:nth-child(4) { height: 13px; }
.dt-pastilla .in-onda__barras i:nth-child(5) { height: 7px; }

/* ───────── Secciones de siempre, con los titulares de la portada ───────── */
body.in-dict .problem h2,
body.in-dict .how h2,
body.in-dict .features__title,
body.in-dict .anywhere-text h2 {
  font-family: var(--in-serif); font-weight: 400; letter-spacing: -0.01em; line-height: 1.05;
}
body.in-dict .problem h2,
body.in-dict .how h2 { font-size: clamp(2.2rem, 4.2vw, 3.5rem); }
body.in-dict .features__title { font-size: clamp(2.4rem, 4.4vw, 3.6rem); }
body.in-dict .features__title em,
body.in-dict .features__title-strike { font-style: normal; font-weight: 400; }
body.in-dict .anywhere-text h2 { font-size: clamp(2.2rem, 4vw, 3.3rem); }

/* ───────── Banda de reuniones y cierre ───────── */
.dt-reuniones { margin-top: clamp(5rem, 9vw, 7rem); }
.dt-reuniones .in-memoria__h2 { max-width: 15ch; }
.dt-reuniones__ventana { padding-bottom: 30px; }
.dt-reuniones__ventana .in-ventana__titulo { font-size: 1.6rem; }
.dt-cierre__sub { margin: -12px 0 34px; font-size: 1.2rem; color: var(--in-soft); }

/* ───────── Pantallas pequeñas ───────── */
@media (max-width: 720px) {
  .dt-hero { padding-top: 7rem; }
  .dt-solo-ancho { display: none; }
  .dt-escena { min-height: 0; padding: 28px 14px 92px; border-radius: 18px; }
  .dt-doc { padding: 14px 18px 24px; }
  .dt-doc__texto { font-size: 1.02rem; }
}