/* Jerarquía común para español e inglés. Los textos de oración conservan
   su tamaño elegido con A−/A+; estas reglas solo ordenan títulos y rótulos. */
body.en-oracion #cabecera .titulo-escena #misterio-actual {
  margin-top: 5px;
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(21px, calc(1.75vw + 2px), 28px);
  font-weight: 400;
  line-height: 1.18;
  letter-spacing: -.012em;
  text-wrap: balance;
  overflow-wrap: break-word;
}

body.en-oracion #cabecera .titulo-escena #grupo-actual,
#guia-oracion .guia-eyebrow {
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.4;
  letter-spacing: .12em;
}

#guia-oracion .guia-encabezado { margin-bottom: 10px; }
#guia-oracion[data-etapa] #oracion-titulo {
  font-family: Georgia, "Times New Roman", serif;
  font-size: clamp(25px, 2vw, 29px);
  font-weight: 400;
  line-height: 1.2;
  letter-spacing: -.012em;
  text-wrap: balance;
  overflow-wrap: break-word;
}
#guia-oracion #oracion-contador {
  margin-top: 7px;
  color: #6c5432;
  font-size: 13px;
  line-height: 1.4;
  font-variant-numeric: lining-nums tabular-nums;
  text-wrap: balance;
}
#guia-oracion #oracion-contador::after { margin-top: 12px; }
#guia-oracion #lectura-ayuda { font-size: 12px; line-height: 1.4; }

/* Las etiquetas del recorrido comparten tamaño sin cambiar las cuentas. */
#rosario-cuentas .cuentas-cabecera {
  font-size: 12px;
  line-height: 1.4;
  font-weight: 500;
  font-variant-numeric: lining-nums tabular-nums;
}
#rosario-cuentas .cuentas-etiquetas,
#rosario-cuentas #cuentas-gloria > span {
  font-family: "Segoe UI", Arial, sans-serif;
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: .015em;
}

/* En la vista sencilla, los nombres largos tienen el mismo peso visual
   que los breves y el contador sigue siendo secundario al nombre. */
body[data-vista="rosario"].en-oracion #cabecera .titulo-escena #misterio-actual {
  font-size: clamp(23px, 5.8vw, 29px);
  margin-top: 6px;
}
body[data-vista="rosario"].en-oracion .titulo-escena::after { margin-top: 12px; }
body[data-vista="rosario"].en-oracion #solo-titulo {
  font-size: clamp(26px, 7vw, 36px);
  line-height: 1.16;
  letter-spacing: -.012em;
}
body[data-vista="rosario"].en-oracion #solo-contador {
  margin-top: 9px;
  font-size: clamp(20px, 5.6vw, 26px);
  line-height: 1.25;
  text-wrap: balance;
  font-variant-numeric: lining-nums tabular-nums;
}
body[data-vista="rosario"].en-oracion #solo-contador::after { margin-top: 11px; }
body[data-vista="rosario"].en-oracion .solo-etiqueta-padre,
body[data-vista="rosario"].en-oracion #solo-recorrido #cuentas-gloria > span,
body[data-vista="rosario"].en-oracion #cuentas-lectura > span {
  font-size: clamp(14px, 3.6vw, 16px);
  font-weight: 400;
  line-height: 1.3;
}
body[data-vista="rosario"].en-oracion #solo-lectura-slot #oracion-titulo {
  font-size: clamp(24px, 6vw, 27px);
  line-height: 1.2;
}

@media (min-width: 851px) and (max-height: 800px) {
  #guia-oracion .guia-encabezado { margin-bottom: 8px; }
  #guia-oracion #oracion-contador { margin-top: 5px; }
  #guia-oracion #oracion-contador::after { margin-top: 9px; }
}

@media (max-width: 600px) {
  body.en-oracion #cabecera .titulo-escena #grupo-actual,
  #guia-oracion .guia-eyebrow {
    font-size: 10px;
    letter-spacing: .1em;
  }
  #rosario-cuentas .cuentas-cabecera { font-size: 11px; }
  #rosario-cuentas .cuentas-etiquetas,
  #rosario-cuentas #cuentas-gloria > span { font-size: 10px; }
}

@media (forced-colors: active) {
  #guia-oracion #oracion-contador { color: CanvasText; }
}