/* home-v3 · fotos reales (04-10-2026). Archivo aparte para no tocar home-v3.css.
   Cuando un hueco .ph ya tiene su foto: sin el marco punteado ni el texto del boceto. */
.ph:has(> img), .ph:has(> picture), .ph:has(> .carr) { border-color: transparent; background: #EFE6D4; }
.ph > img + .ph__in, .ph > picture + .ph__in, .ph > .carr ~ .ph__in { display: none; }
.ph > picture { position: absolute; inset: 0; }
.ph > picture img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* Los libros: carrusel de 3 (cerrado, abierto, otro ángulo). PNG/WebP transparente sobre la tarjeta blanca:
   se desliza con el dedo en el celular; en la computadora con los puntos. */
.book__ph:has(> .carr) { background: #F7F2E8; }
.carr { position: absolute; inset: 0; display: flex; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-behavior: smooth; scrollbar-width: none; }
.carr::-webkit-scrollbar { display: none; }
.carr img { flex: 0 0 100%; width: 100%; height: 100%; object-fit: contain; padding: 5% 6% 9%; scroll-snap-align: center; }
.carr__dots { position: absolute; left: 0; right: 0; bottom: 10px; display: flex; justify-content: center; gap: 6px; }
.carr__dots button { width: 28px; height: 28px; padding: 0; border: 0; background: none; cursor: pointer; display: grid; place-items: center; }
.carr__dots button::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: rgba(123, 30, 43, 0.25); transition: background .2s; }
.carr__dots button[aria-current="true"]::before { background: #7B1E2B; }
.carr__dots button:focus-visible { outline: 2px solid #7B1E2B; outline-offset: -4px; border-radius: 50%; }
@media (prefers-reduced-motion: reduce) { .carr { scroll-behavior: auto; } .carr__dots button::before { transition: none; } }