/* ═══════════════════════════════════════════════════════════════════════════
   Ópera de Morelia — FASE U · Design System layer
   Capa final autoritativa de tokens (Atomic Design, Brad Frost).
   Cada bloque cita el principio que aplica.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ──────────── TOKENS (Refactoring UI: "limit your choices") ──────────── */
:root{
  /* Grid — Müller-Brockmann: UNA retícula, UN gutter */
  --ds-container: 1180px;
  --ds-container-wide: 1280px;   /* solo nav + flyout */
  --ds-gutter: clamp(24px, 5vw, 64px);

  /* Escala de espaciado base-8 (Refactoring UI) */
  --ds-s1: 8px;  --ds-s2: 16px; --ds-s3: 24px; --ds-s4: 32px;
  --ds-s5: 48px; --ds-s6: 64px; --ds-s7: 96px; --ds-s8: 128px;

  /* Superficies — elevación por color en dark UI (Refactoring UI cap. Depth) */
  --ds-surface-0: #000000;
  --ds-surface-1: #101013;
  --ds-surface-2: #16161a;
  --ds-line: rgba(255,255,255,0.07);

  /* Sombras: 2 niveles, una sola fuente de luz (Refactoring UI) */
  --ds-shadow-sm: 0 8px 24px -12px rgba(0,0,0,0.55);
  --ds-shadow-md: 0 24px 56px -20px rgba(0,0,0,0.7);

  /* Radii: 3 valores */
  --ds-radius-sm: 10px; --ds-radius-md: 14px; --ds-radius-lg: 18px;

  /* Measure tipográfico (Lupton: 45–75 caracteres) */
  --ds-measure-prose: 62ch;
  --ds-measure-lede: 52ch;
}

/* ──────────── GRID UNIFICADO (Müller-Brockmann) ────────────
   Antes: 1080/1180/1280 mezclados + 3 gutters distintos.
   Ahora: TODO contenido = 1180px + gutter único. Nav/flyout = 1280px. */
.mod-inner,
.opm-numbers-inner,
.opm-newsletter-inner,
.mod-quote-inner,
.mod-portrait-inner,
.mod-final-cta .mod-inner,
.estudia .section-inner,
#contacto .section-inner,
.mod-photomoment .mod-inner,
.mod-photomoment-text,
.mod-historia{
  max-width: var(--ds-container) !important;
  padding-left: var(--ds-gutter) !important;
  padding-right: var(--ds-gutter) !important;
}
.mod-cards-3,
.mod-cards-2,
.mod-collab,
.mod-timeline-list,
.contacto-grid{
  max-width: calc(var(--ds-container) - (2 * 24px)) !important;
}

/* Flyout alineado con nav (mismo left edge que wordmark) */
.apple-flyout-inner{
  max-width: var(--ds-container-wide) !important;
  padding-left: clamp(20px, 4vw, 48px) !important;
  padding-right: clamp(20px, 4vw, 48px) !important;
}

/* Hero full-bleed BAJO el nav translúcido (patrón Apple correcto) —
   el padding-top de body creaba una franja negra arriba del hero */
body{
  padding-top: 0 !important;
}

/* ──────────── MEASURE (Lupton: Thinking with Type) ────────────
   ch en vez de px: la medida sigue al tamaño de fuente real */
.mod-prose p{
  max-width: var(--ds-measure-prose) !important;
}
.mod-lede,
.opm-newsletter-lede,
.section-lede,
.opm-numbers-hero-lede{
  max-width: var(--ds-measure-lede) !important;
}
.hero-lede{
  max-width: 48ch !important;
}
/* En contextos centrados el margin auto ya existe; en historia (left) margin 0 ya existe */

/* ──────────── ELEVACIÓN SIN BORDES (Refactoring UI: "use fewer borders") ────────────
   Cards: superficie elevada + sombra en vez de borde 1px */
.mod-card,
.mod-cards-3 .mod-card,
.mod-card-2,
.mod-cards-2 .mod-card-2,
.contacto-card,
.contacto-grid .contacto-card,
.mod-collab-item,
.mod-collab .mod-collab-item,
.programa-card,
.esc-program{
  border: none !important;
  background: var(--ds-surface-1) !important;
  box-shadow: var(--ds-shadow-sm) !important;
}
.mod-card:hover,
.mod-cards-3 .mod-card:hover,
.mod-card-2:hover,
.mod-cards-2 .mod-card-2:hover,
.contacto-card:hover,
.contacto-grid .contacto-card:hover,
.mod-collab-item:hover,
.mod-collab .mod-collab-item:hover{
  background: var(--ds-surface-2) !important;
  box-shadow: var(--ds-shadow-md) !important;
  border: none !important;
}

/* Inputs: borde solo donde hay interacción de entrada (Norman: affordance real) */
.opm-newsletter-input,
.estudia input, .estudia textarea, .estudia select,
#contacto input, #contacto textarea, #contacto select{
  background: var(--ds-surface-1) !important;
  border: 1px solid rgba(255,255,255,0.14) !important;
}
.opm-newsletter-input:focus,
.estudia input:focus, .estudia textarea:focus, .estudia select:focus{
  border-color: rgba(189,176,157,0.7) !important;
  background: var(--ds-surface-2) !important;
}

/* ──────────── DE-ÉNFASIS (Refactoring UI: "emphasize by de-emphasizing") ──────────── */
.mod-timeline-badge{
  border: none !important;
  background: rgba(255,255,255,0.05) !important;
  padding: 6px 12px !important;
  border-radius: 980px !important;
  color: rgba(189,176,157,0.62) !important;
}
.mod-card-year{
  border: none !important;
}

/* ──────────── ESTADOS :active (About Face: feedback de presión) ──────────── */
.btn-primary:active,
.btn-secondary:active,
.mod-btn:active,
.an-btn-primary:active,
.opm-newsletter-submit:active,
.estudia button[type=submit]:active,
#contacto button[type=submit]:active{
  transform: scale(0.985) !important;
  transition-duration: .08s !important;
}

/* ──────────── TOUCH TARGETS ≥44px (Pickering / WCAG 2.5.8) ──────────── */
@media (pointer: coarse){
  .opm-search-trigger{
    width: 44px !important;
    height: 44px !important;
  }
  .an-ham{
    width: 44px !important;
    height: 44px !important;
  }
  .footer-col li a{
    display: inline-block !important;
    padding: 10px 0 !important;
  }
  .mod-faq-item summary,
  details summary{
    min-height: 44px !important;
  }
}

/* ──────────── HERO VIDEO TOGGLE (WCAG 2.2.2 — Pickering) ────────────
   Botón pausa/reproducir para el video autoplay. Patrón Apple real
   (apple.com usa exactamente este pill bottom-right en sus ambient videos) */
.hero-video-toggle{
  position: absolute !important;
  right: clamp(20px, 4vw, 48px);
  bottom: clamp(20px, 4vh, 40px);
  z-index: 7;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: none;
  background: rgba(20,20,22,0.55);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
  color: rgba(255,255,255,0.85);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .2s ease, color .2s ease, transform .15s ease;
}
.hero-video-toggle:hover{
  background: rgba(30,30,34,0.75);
  color: #fff;
}
.hero-video-toggle:active{
  transform: scale(0.94);
}
.hero-video-toggle:focus-visible{
  outline: 2px solid rgba(189,176,157,0.85);
  outline-offset: 3px;
}
.hero-video-toggle svg{
  width: 16px;
  height: 16px;
  display: block;
}
.hero-video-toggle .ico-play{ display: none; }
.hero-video-toggle.is-paused .ico-pause{ display: none; }
.hero-video-toggle.is-paused .ico-play{ display: block; }

/* Mobile: el video está oculto (fotos fallback) → ocultar toggle */
@media (max-width: 768px){
  .hero-video-toggle{ display: none !important; }
}

/* ──────────── CONSISTENCIA DE FOTOS EN CARDS (Universal Principles: similarity) ──────────── */
.mod-card-img img,
.mod-card-2-img img{
  filter: saturate(0.92) contrast(1.02);
}

/* ──────────── SCROLLBAR-SAFE LAYOUT ──────────── */
html{
  scrollbar-gutter: stable;
}