/* JCastorena · maqueta con imágenes · v1 · 2026-10-04
   Figuras fotográficas de la maqueta: los retratos de la serie del 2 de octubre de 2026 y las
   fotografías de banco. Usa los tokens del sistema; no define colores ni tipografías nuevas.
   Ningún texto va encima de una fotografía: la única pieza sobre la imagen es la etiqueta
   «Imagen ilustrativa», que trae su propio fondo. */

/* ── Figura base ──────────────────────────────────────────────────────────────── */
.foto { margin: 0; position: relative; }
.foto picture { display: block; }
.foto img { display: block; width: 100%; height: auto; border-radius: var(--jc-radio-l); background: var(--jc-color-superficie); }
/* Lo generado se etiqueta en la propia imagen. */
.foto__etiqueta { position: absolute; left: var(--jc-espacio-3); bottom: var(--jc-espacio-3); }

/* ── Inicio: el retrato de la sección «Juan Carlos» ───────────────────────────── */
.persona__retrato > picture { position: relative; display: block; width: min(100%, 22.5rem); margin: 0 auto; }
.persona__retrato > picture img { display: block; width: 100%; height: auto; border-radius: var(--jc-radio-l); }

/* El campo laminar sale del retrato a propósito; en teléfono sacaba 27 px de la página (medido el
   2026-10-04 en la maqueta anterior). Se recorta en el borde de la sección. */
#juan-carlos { overflow-x: clip; }

/* ── Inicio: la fotografía de cada tarjeta de servicio ────────────────────────── */
.tarjeta-servicio__medio picture { display: block; width: 100%; height: 100%; }
.jc-tarjeta .tarjeta-servicio__medio img { transition: transform 400ms var(--jc-curva); }
.jc-tarjeta:focus-within .tarjeta-servicio__medio img { transform: scale(1.03); }
@media (hover: hover) and (pointer: fine) { .jc-tarjeta:hover .tarjeta-servicio__medio img { transform: scale(1.03); } }

/* ── Banda a lo ancho del contenedor ──────────────────────────────────────────── */
.banda-foto { margin: 0 0 var(--jc-espacio-7); }
.banda-foto img { aspect-ratio: 16 / 9; object-fit: cover; }
.bloque--foto .banda-foto { margin: 0; }
@media (min-width: 48rem) { .banda-foto img { aspect-ratio: 3 / 1; } }

/* ── Figura bajo el título de un bloque ───────────────────────────────────────── */
.bloque__lado { display: grid; gap: var(--jc-espacio-5); align-content: start; }
.foto--lado img { aspect-ratio: 16 / 9; object-fit: cover; }
.foto--lado.foto--escena img { aspect-ratio: 3 / 2; }
@media (min-width: 48rem) {
  .foto--lado { max-width: 20rem; }
  .foto--lado img, .foto--lado.foto--escena img { aspect-ratio: 4 / 5; }
}

/* ── Figura dentro del contenido de un bloque ─────────────────────────────────── */
.foto--contenido { margin-top: var(--jc-espacio-5); max-width: 34rem; }

/* ── Contacto: quién responde ─────────────────────────────────────────────────── */
.foto--contacto { max-width: 22rem; }

/* ── Gracias ──────────────────────────────────────────────────────────────────── */
.gracias { display: grid; gap: var(--jc-espacio-6); align-items: center; }
.gracias__retrato picture { display: block; width: 8rem; }
.gracias__retrato img { display: block; width: 100%; height: auto; border-radius: var(--jc-radio-l); }
@media (min-width: 48rem) {
  .gracias { grid-template-columns: 10rem minmax(0, 1fr); gap: var(--jc-espacio-7); }
  .gracias__retrato picture { width: 10rem; }
}

/* ── Casos: la portada con figura ─────────────────────────────────────────────── */
.portada-pagina--texto .portada-pagina__rejilla > * { min-width: 0; }

@media (prefers-reduced-motion: reduce) {
  .jc-tarjeta .tarjeta-servicio__medio img { transition: none; }
  .jc-tarjeta:hover .tarjeta-servicio__medio img, .jc-tarjeta:focus-within .tarjeta-servicio__medio img { transform: none; }
}