/* Guías de razas: usa la base del directorio (directorio.css) */
.guia-cab { padding-block: 16px; }
.guia-cab .lead { margin: 0; }
.guia-foto { margin: 4px 0 20px; }
/* Foto a todo el ancho; el alto máximo recorta arriba y abajo, y el object-position de cada guía elige qué parte queda (la cara completa). */
.guia-foto img { width: 100%; height: auto; aspect-ratio: 16 / 9; max-height: 500px; object-fit: cover; display: block; border-radius: var(--radio); background: #000; }
.guia-foto figcaption { font-size: .8rem; color: var(--texto-2); margin-top: 6px; }
.guia-ficha { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; margin: 8px 0 0; }
.guia-ficha div { background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px 16px; }
.guia-ficha dt { font: 600 .82rem/1.2 var(--f-display); letter-spacing: .08em; text-transform: uppercase; color: var(--acento); margin-bottom: 4px; }
.guia-ficha dd { margin: 0; }
.guia p { max-width: 75ch; }
.guia-vet { margin-top: 40px; background: var(--pino); color: var(--crema); border-radius: var(--radio); padding: 24px; }
.guia-vet h2 { color: var(--mango); }
.guia-vet a:not(.btn) { color: var(--mango); }
.guia-nota { margin-top: 32px; }
.guia-cards { list-style: none; padding: 0; margin: 8px 0 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 16px; }
.guia-card a { display: flex; flex-direction: column; height: 100%; background: var(--superficie); border: 1px solid var(--borde); border-radius: var(--radio); overflow: hidden; color: var(--texto); text-decoration: none; box-shadow: var(--sombra); }
.guia-card img { width: 100%; height: auto; aspect-ratio: 16 / 9; object-fit: cover; display: block; }
.guia-card-txt { display: grid; gap: 4px; padding: 14px 16px; }
.guia-card-txt strong { font: 600 1.15rem/1.2 var(--f-display); color: var(--acento); }
.guia-card-txt span { font-size: .95rem; color: var(--texto-2); }
.guia-card a:hover strong { text-decoration: underline; }
.descubrir-fotos { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; }
.descubrir-fotos img { height: auto; aspect-ratio: 16 / 9; }
.guia-card-pronto > div { height: 100%; background: var(--suave); border: 1px dashed var(--borde); border-radius: var(--radio); }