/* Ajustes de móvil. Capa aparte: no altera el CSS de la entrega. */

@media (max-width: 760px) {
  /* Los puntos «+» sobre las fotografías miden 37px. Se amplía su área
     táctil sin cambiar el tamaño visual: los círculos están colocados
     sobre objetos concretos de la foto y agrandarlos los descuadraría. */
  /* Ojo: .object-point ya es position:absolute y se coloca con left/top
     sobre puntos concretos de la foto. No redeclarar la posición aquí o
     los círculos se descuadran; absolute ya sirve de contenedor. */
  .object-point::after { content: ""; position: absolute; inset: -5px; border-radius: 50%; }

  /* Pestañas y enlaces de acompañamiento, preguntas y pie. */
  .care-options > button { min-height: 44px; }
  .care-glass > button.care-open,
  .question-body > button.resource-link,
  button[class*="explore"], .everyday button:not(.object-point) { min-height: 44px; align-items: center; }
  .cognitive-footer a, .brand { min-height: 44px; display: inline-flex; align-items: center; }

  /* Legibilidad de rótulos. */
  .eyebrow, .section-eyebrow, .header-note, .hint { font-size: 13px; }
}

/* Rótulo a 11px, por debajo del mínimo cómodo de lectura en móvil. */
@media (max-width: 900px) {
  /* Los 11px vienen de selectores compuestos, que ganan al `.eyebrow` suelto */
  .album-intro .eyebrow,
  .questions-intro .eyebrow { font-size: 12px; }

  /* Este enlace medía 23px de alto. Se amplía el área de toque con un
     pseudo-elemento, sin cambiar su tamaño visible. */
  .resource-link { position: relative; }
  .resource-link::after {
    content: ""; position: absolute; left: 0; right: 0;
    top: 50%; height: 44px; transform: translateY(-50%);
  }
}