/* ═══════════════════════════════════════════════════════════════════════════
   Ópera de Morelia — Accessibility + Performance polish
   - Focus-visible system global (Apple-style)
   - Reduced motion comprehensive
   - Print stylesheet sensible
   - Selection color brand
   - Scrollbar refined (webkit)
   - Loading states discreet
   ═══════════════════════════════════════════════════════════════════════════ */

/* ──────────── FOCUS VISIBLE (global premium) ──────────── */
:where(a, button, [role="button"], [tabindex], input, select, textarea, summary):focus{
  outline: none;
}
:where(a, button, [role="button"], [tabindex], input, select, textarea, summary):focus-visible{
  outline: 2px solid rgba(189, 176, 157, 0.85);
  outline-offset: 3px;
  border-radius: 2px;
}

/* Buttons pill mantienen su shape */
.mod-btn:focus-visible,
.apple-nav .an-btn:focus-visible{
  outline-offset: 4px;
  border-radius: 980px;
}

/* Inputs y forms */
input:focus-visible,
textarea:focus-visible,
select:focus-visible{
  outline-color: rgba(189, 176, 157, 1);
  outline-offset: 1px;
}

/* ──────────── SELECTION color (brand) ──────────── */
::selection{
  background: rgba(189, 176, 157, 0.32);
  color: #F2EDE2;
}

/* ──────────── SCROLLBAR refinada (webkit) ──────────── */
::-webkit-scrollbar{ width: 12px; height: 12px; }
::-webkit-scrollbar-track{ background: transparent; }
::-webkit-scrollbar-thumb{
  background: rgba(255, 255, 255, 0.12);
  border-radius: 980px;
  border: 3px solid transparent;
  background-clip: content-box;
}
::-webkit-scrollbar-thumb:hover{
  background: rgba(189, 176, 157, 0.42);
  background-clip: content-box;
  border: 3px solid transparent;
}

/* Firefox */
html{ scrollbar-color: rgba(255,255,255,0.18) transparent; scrollbar-width: thin; }

/* ──────────── REDUCED MOTION (comprehensive) ──────────── */
@media (prefers-reduced-motion: reduce){
  *, *::before, *::after{
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  /* Mantener un mínimo de feedback en hover */
  a:hover, button:hover{
    transition-duration: 0.15s !important;
  }
  /* Hero photos no rotan */
  .hero-bg img{ animation: none !important; opacity: 1 !important; }
  .hero-bg img:nth-child(n+2){ display: none !important; }
}

/* ──────────── PRINT stylesheet ──────────── */
@media print{
  body{ background: white !important; color: #000 !important; font-size: 12pt; }
  .apple-nav, .apple-flyout, .apple-mobmenu, .announce, .scroll-indicator,
  .mod-photomoment, .mod-final-cta .mod-cta-row, footer .mob-social{
    display: none !important;
  }
  .mod-section{ padding: 24px 0 !important; page-break-inside: avoid; }
  .mod-h2, .mod-eyebrow, .mod-prose, h1, h2, h3{ color: #000 !important; }
  .mod-eyebrow, .mod-h2 em{ color: #6B5A40 !important; }
  a{ color: #000 !important; text-decoration: underline; }
  a[href^="http"]::after{
    content: " (" attr(href) ")";
    font-size: 9pt; color: #555;
  }
  img{ max-width: 100% !important; page-break-inside: avoid; }
}

/* ──────────── LOADING state discreet (fonts loading) ──────────── */
html:not(.fonts-loaded) .mod-h2,
html:not(.fonts-loaded) h1,
html:not(.fonts-loaded) h2{
  /* Mientras carga Bodoni Moda, fallback a Georgia sin layout shift */
  font-display: swap;
}

/* ──────────── WCAG AA bumps en textos muted ──────────── */
/* Subir mínimo del muted text para garantizar 4.5:1 sobre dark */
.mod-card-meta,
.mod-faq-answer p,
.omar-form-body,
.coro-info-val small,
.pr-post-excerpt{
  color: rgba(255, 255, 255, 0.7) !important;
}

/* ──────────── SKIP LINK (estilizado correcto) ──────────── */
.skip-link{
  position: absolute;
  top: -100px;
  left: 0;
  z-index: 99999;
  padding: 14px 22px;
  background: #BDB09D;
  color: #11100E;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  border-radius: 0 0 4px 0;
  transition: top .25s ease;
}
.skip-link:focus,
.skip-link:focus-visible{
  top: 0;
  outline: 3px solid #F2EDE2;
  outline-offset: 0;
}

/* ──────────── IMG decoding hint (CSS only) ──────────── */
img{ image-rendering: -webkit-optimize-contrast; }

/* Decorative images contadas como background visual */
img[alt=""]:not([role]){
  /* En navegadores que respetan, esto refuerza decorative */
  pointer-events: none;
}

/* ──────────── ARIA polish ──────────── */
[aria-current="page"]{
  font-weight: 600;
}

/* ──────────── DETAILS / SUMMARY a11y ──────────── */
details summary{
  cursor: pointer;
  user-select: none;
}
details summary:focus-visible{
  outline: 2px solid rgba(189, 176, 157, 0.85);
  outline-offset: 4px;
}