/* Estilos compartidos. La mayor parte del diseño usa clases de Tailwind; aquí solo lo que Tailwind no cubre. */
html { scroll-behavior: smooth; scroll-padding-top: 88px; }
body { font-family: 'Plus Jakarta Sans', Inter, system-ui, sans-serif; color: #12201a; background: #fff; }

/* Foco visible accesible */
:focus-visible { outline: 3px solid #2ecc71; outline-offset: 2px; border-radius: 6px; }

/* Hero: capas con parallax (se extienden por encima para no dejar huecos al desplazarse) */
.hero-layer { position: absolute; left: 0; right: 0; top: -25%; height: 125%; will-change: transform; }
.hero-layer svg { width: 100%; height: 100%; display: block; }

/* Sección "image expand": estado inicial del recorte (GSAP lo anima hasta inset(0)) */
.expand-frame { clip-path: inset(28% 24% 10% 24% round 28px); }
@media (max-width: 767px) { .expand-frame { clip-path: inset(32% 6% 8% 6% round 20px); } }
.outline-text { color: transparent; -webkit-text-stroke: 2px rgba(212,175,55,.85); }

/* Tarjetas de lote */
.lot-card { transition: box-shadow .25s ease, border-color .25s ease; }
.lot-card:hover { box-shadow: 0 18px 40px -22px rgba(15,46,35,.55); border-color: #cfd9d3; }

/* Filtros */
.filter-btn[aria-pressed="true"] { background: #0f2e23; color: #fff; border-color: #0f2e23; }

/* Enlace de nombre de toro (abre su ficha) */
.bull-link { text-decoration: underline; text-decoration-color: #d4af37; text-decoration-thickness: 2px; text-underline-offset: 4px; cursor: pointer; }
.bull-link:hover { color: #0f2e23; text-decoration-color: #0f2e23; }

/* Modales */
.modal { background: rgba(6, 20, 15, .72); backdrop-filter: blur(4px); }
.modal-panel { max-height: calc(100vh - 2rem); overflow-y: auto; }

/* Preguntas frecuentes */
details.faq > summary { list-style: none; cursor: pointer; }
details.faq > summary::-webkit-details-marker { display: none; }
details.faq[open] .faq-icon { transform: rotate(45deg); }
.faq-icon { transition: transform .2s ease; }

/* Respeta usuarios con movimiento reducido */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation: none !important; transition: none !important; }
  .expand-frame { clip-path: none; }
}