/* ===================================================
   FINBA 2026 — Responsive Styles
   Mobile: ≤768px  |  Tablet: 769px–1024px
   =================================================== */

/* ── NAV ── */
.r-nav-links { display: flex; }
.r-nav-btn { }

/* Fixed nav — works regardless of ancestor overflow or DC scroll context */
.r-nav {
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  z-index: 200 !important;
}

/* Spacer so content is not hidden behind the fixed nav.
   No usamos "body{padding-top}" porque cada página trae su propio
   "html,body{margin:0;padding:0}" en un <style> que se carga después de
   este archivo — con la misma prioridad, esa regla ganaba y cancelaba el
   espacio por completo (esa era la causa real de que el menú tapara el
   contenido en todas las páginas). En su lugar, el espacio se pone
   directamente en el contenedor real de cada página:
   - index.html / un-chance.html / un-futuro.html usan el mismo
     runtime (dc-runtime) que siempre monta el contenido en un
     <div id="dc-root">, así que un solo selector cubre las 3.
   - Las páginas estáticas (companias, programación, larreal) no tienen
     ese contenedor: se les da el espacio al primer bloque que sigue al
     menú móvil. */
body { padding-top: 0 !important; }
#dc-root { padding-top: 92px !important; box-sizing: border-box; }
.r-mobile-menu + * { padding-top: 92px !important; box-sizing: border-box; }

/* Anchor-jump targets (#formulario, #proximamente, etc.): el nav es fixed,
   así que un salto nativo del navegador a un ancla deja su encabezado tapado
   detrás del nav a menos que reservemos el mismo espacio con scroll-margin-top. */
#formulario, #proximamente, [data-success] { scroll-margin-top: 92px; }
@media (max-width: 768px) {
  #formulario, #proximamente, [data-success] { scroll-margin-top: 68px; }
}

/* Insignia "Próximamente" pegajosa sobre las secciones difuminadas del home:
   se mantiene visible mientras se hace scroll por toda la sección, en vez de
   quedar centrada en medio de un bloque largo donde nadie la ve de entrada. */
.r-proximamente-badge { top: 112px !important; }
@media (max-width: 768px) {
  .r-proximamente-badge { top: 84px !important; max-width: 240px !important; padding: 20px 22px !important; }
}

@media (max-width: 1024px) {
  .r-nav { padding: 0 28px !important; }
}
@media (max-width: 768px) {
  .r-nav  { padding: 0 18px !important; height: 68px !important; }
  .r-nav-links { display: none !important; }
  .r-nav-logo img { height: 58px !important; }
  .r-nav-btn { font-size: 13px !important; padding: 9px 16px !important; }
  body { padding-top: 0 !important; }
  #dc-root { padding-top: 68px !important; }
  .r-mobile-menu + * { padding-top: 68px !important; }
}

/* ── HERO HOME ── */
@media (max-width: 1024px) {
  .r-hero { height: 700px !important; }
  .r-hero-title { font-size: 86px !important; }
  .r-hero-dancers { height: 85% !important; }
}
@media (max-width: 768px) {
  .r-hero { height: auto !important; min-height: 620px !important; padding-bottom: 0 !important; }
  .r-hero-title { font-size: 46px !important; line-height: .88 !important; }
  .r-hero-sub  { font-size: 14px !important; }
  .r-hero-date { font-size: 12px !important; padding: 9px 13px !important; }
  /* texto confinado a la mitad izquierda para dejar espacio al bailarín */
  .r-hero-headline { left: 18px !important; top: 72px !important; right: 36% !important; }
  .r-hero-ctas { left: 18px !important; bottom: 28px !important; right: 18px !important; }
  .r-hero-ctas > div { flex-direction: column !important; gap: 10px !important; }
  .r-hero-btn  { font-size: 15px !important; padding: 14px 24px !important; width: 100% !important; text-align: center !important; display: block !important; }
  /* bailarín: más grande, visible y centrado a la derecha */
  .r-hero-dancers { height: 83% !important; right: -3% !important; opacity: .97 !important; }
}

/* ── SECTION PADDING ── */
@media (max-width: 1024px) {
  .r-section { padding-left: 32px !important; padding-right: 32px !important; }
}
@media (max-width: 768px) {
  .r-section { padding-left: 18px !important; padding-right: 18px !important;
                padding-top: 48px !important; padding-bottom: 52px !important; }
}

/* ── COUNTDOWN ── */
@media (max-width: 1024px) {
  .r-countdown { padding: 44px 32px 0 !important; }
}
@media (max-width: 768px) {
  .r-countdown { padding: 36px 18px 0 !important; }
  .r-cd-boxes  { gap: 8px !important; }
  .r-cd-box    { width: 132px !important; padding: 16px 4px 12px !important; }
  .r-cd-num    { font-size: 64px !important; }
}

/* ── STATS 4-COL GRID ── */
@media (max-width: 1024px) {
  .r-stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 768px) {
  .r-stats-grid { grid-template-columns: repeat(2, 1fr) !important; }
  .r-stats-grid > div { padding: 32px 20px !important; }
  .r-stats-num { font-size: 60px !important; }
}

/* ── INTRO ── */
@media (max-width: 1024px) {
  .r-intro-logo { height: 200px !important; }
}
@media (max-width: 768px) {
  .r-intro-logo { height: 160px !important; margin-bottom: 28px !important; }
  .r-intro h2 { font-size: 38px !important; }
  .r-intro p  { font-size: 16px !important; }
}

/* ── SECTION HEADERS (title + link row) ── */
@media (max-width: 768px) {
  .r-section-header { flex-direction: column !important; align-items: flex-start !important; gap: 10px !important; margin-bottom: 24px !important; }
  .r-section-h2     { font-size: 44px !important; }
}

/* ── COMPANIES FEATURED CARD ── */
@media (max-width: 1024px) {
  .r-companies-hero { height: 300px !important; }
}
@media (max-width: 768px) {
  .r-companies-hero { height: 240px !important; }
  .r-companies-hero-content { left: 22px !important; right: 22px !important; }
  .r-companies-hero-content h3 { font-size: 48px !important; }
  .r-companies-hero-content p  { font-size: 14px !important; }
  .r-companies-hero-content .r-hero-inner-badge { font-size: 11px !important; }
}

/* ── COMPANIES 4-COL GRID ── */
@media (max-width: 1024px) {
  .r-companies-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 768px) {
  .r-companies-grid { grid-template-columns: repeat(2, 1fr) !important; gap: 12px !important; }
  .r-companies-grid h3 { font-size: 18px !important; }
}

/* ── FEATURED EVENT ROWS ── */
@media (max-width: 768px) {
  .r-event-row  { flex-direction: column !important; gap: 8px !important; padding: 18px !important; align-items: stretch !important; }
  .r-event-date { width: auto !important; border-right: none !important; padding-right: 0 !important;
                  border-bottom: 1px solid #e4ebf4; padding-bottom: 10px !important;
                  display: flex !important; flex-direction: row !important; align-items: center !important; gap: 10px !important; }
  .r-event-date .r-day-num { font-size: 36px !important; }
  .r-event-time { text-align: left !important; min-width: auto !important; }
  .r-event-time > div:first-child { font-size: 20px !important; justify-content: flex-start !important; }
}

/* ── EDUCATIONAL 2-COL GRID ── */
@media (max-width: 1024px) {
  .r-edu-grid { grid-template-columns: 1fr !important; }
}

/* ── NEWS 3-COL GRID ── */
@media (max-width: 1024px) {
  .r-news-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 768px) {
  .r-news-grid { grid-template-columns: 1fr !important; }
}

/* ── PODCAST 3-COL GRID ── */
@media (max-width: 1024px) {
  .r-podcast-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 768px) {
  .r-podcast-grid { grid-template-columns: 1fr !important; }
}

/* ── CTA SECTION ── */
@media (max-width: 768px) {
  .r-cta-inner { flex-direction: column !important; gap: 28px !important; }
  .r-cta-h2 { font-size: 44px !important; }
}

/* ── FOOTER ── */
@media (max-width: 1024px) {
  .r-footer-grid  { grid-template-columns: 1fr 1fr !important; }
  .r-footer-inner { padding: 48px 32px 32px !important; }
}
@media (max-width: 768px) {
  .r-footer-grid  { grid-template-columns: 1fr !important; }
  .r-footer-inner { padding: 36px 18px 24px !important; }
}

/* ── PROGRAMACION PAGE ── */
@media (max-width: 1024px) {
  .r-prog-header { padding: 40px 32px 32px !important; }
  .r-prog-filters { padding: 14px 32px !important; }
}
@media (max-width: 768px) {
  .r-prog-header { padding: 32px 18px 28px !important; }
  .r-prog-header h1 { font-size: 50px !important; }
  .r-prog-header p  { font-size: 15px !important; }
  .r-prog-filters { padding: 14px 18px !important; top: 68px !important; }
  .r-prog-filters > div { flex-wrap: wrap !important; gap: 10px !important; }
  .r-prog-filters > div:first-child > div:first-child { flex-wrap: wrap !important; }
  .r-prog-filters > div:first-child > div:nth-child(2) { display: none !important; }
  .r-prog-panel { padding-left: 18px !important; padding-right: 18px !important; padding-bottom: 48px !important; }
  .r-prog-list-grid { grid-template-columns: 1fr !important; }
  /* List row: date+title on row 1, time+venue full-width on row 2 */
  .r-lista-row { flex-direction: row !important; flex-wrap: wrap !important; gap: 10px !important; padding: 14px 16px !important; align-items: flex-start !important; }
  .r-lista-row > div:first-child { flex: none !important; width: 60px !important; }
  .r-lista-row > div:nth-child(2) { flex: 1 !important; min-width: 0 !important; }
  .r-lista-row > div:nth-child(3) { width: 100% !important; text-align: left !important; min-width: 0 !important; border-top: 1px solid #eef2f8 !important; padding-top: 8px !important; }
  .r-lista-row .ev-thumb { display: none !important; }
  .r-lista-row h3 { font-size: 20px !important; margin: 4px 0 2px !important; }
  /* Stats strip compact on mobile */
  .r-maestros-stats > div { padding: 16px 8px !important; }
  .r-maestros-stats > div > div:first-child { font-size: 40px !important; }
}

/* ── UN CHANCE PAGE ── */
@media (max-width: 1024px) {
  .r-uc-hero-content { padding: 40px 32px 36px !important; }
  .r-uc-form-outer { padding: 36px 32px 64px !important; }
  .r-uc-form-section { padding: 28px 28px !important; }
}
@media (max-width: 768px) {
  .r-uc-hero h1 { font-size: 54px !important; }
  .r-uc-hero-content { padding: 32px 18px 32px !important; }
  .r-uc-form-outer { padding: 24px 18px 48px !important; }
  .r-uc-form-section { padding: 22px 18px !important; }
  .r-form-grid-2 { grid-template-columns: 1fr !important; }
  .r-form-grid-3 { grid-template-columns: 1fr !important; }
  .r-uc-dates-strip { padding: 16px 18px !important; }
}

/* ── LARREAL PAGE ── */
@media (max-width: 1024px) {
  .r-larreal-hero { height: 420px !important; }
  .r-larreal-hero-content { left: 32px !important; right: 32px !important; }
  .r-larreal-content { grid-template-columns: 1fr !important; padding: 56px 32px !important; }
  .r-larreal-credits { grid-template-columns: 1fr !important; }
  .r-larreal-credits-outer { padding: 48px 32px !important; }
  .r-larreal-info-bar { padding: 24px 32px !important; }
  .r-larreal-repertorio { padding: 60px 32px !important; }
}
@media (max-width: 768px) {
  .r-larreal-breadcrumb { padding-left: 18px !important; padding-right: 18px !important; }
  .r-larreal-hero { height: 340px !important; }
  .r-larreal-hero-content { left: 18px !important; right: 18px !important; bottom: 28px !important; }
  .r-larreal-hero-content h1 { font-size: 68px !important; }
  .r-larreal-hero-content p  { font-size: 15px !important; }
  .r-larreal-info-bar { padding: 20px 18px !important; }
  .r-larreal-info-bar > div { gap: 20px !important; flex-wrap: wrap !important; }
  .r-larreal-info-bar .r-info-divider { display: none !important; }
  .r-larreal-info-bar .r-info-links { margin-left: 0 !important; width: 100% !important; }
  .r-larreal-content { grid-template-columns: 1fr !important; padding: 40px 18px !important; gap: 28px !important; }
  .r-larreal-sticky { position: static !important; }
  .r-larreal-repertorio { padding: 48px 18px !important; }
  .r-larreal-obra { padding: 22px 18px !important; grid-template-columns: 48px 1fr !important; gap: 16px !important; }
  .r-larreal-obra-num { font-size: 32px !important; }
  .r-larreal-obra h3 { font-size: 26px !important; }
  .r-larreal-credits { grid-template-columns: 1fr !important; }
  .r-larreal-credits-outer { padding: 40px 18px !important; }
  .r-larreal-cta { padding: 36px 18px !important; }
  .r-larreal-gallery-outer { padding: 48px 18px !important; }
  .r-larreal-gallery { grid-template-columns: 1fr !important; grid-template-rows: 220px 220px !important; }
  .r-larreal-gallery > div:first-child { grid-row: auto !important; }
}

/* ── MODAL EVENTO ── */
#ev-modal > div {
  max-width: calc(100vw - 32px);
}
@media (max-width: 768px) {
  #ev-modal { padding: 12px !important; align-items: flex-end !important; }
  #ev-modal > div { border-radius: 20px 20px 0 0 !important; max-height: 92vh !important; }
  #ev-modal h2 { font-size: 32px !important; }
  #ev-modal-img { height: 180px !important; }
}

/* ── SPLASH ── */
@media (max-width: 768px) {
  #splash-logo { height: 110px !important; }
}

/* ── NAV SELLO: ocultar en móvil ── */
@media (max-width: 768px) {
  .r-nav-sello { display: none !important; }
}

/* ── HAMBURGER BUTTON ── */
.r-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: 40px; height: 40px;
  border: none; background: none;
  cursor: pointer; gap: 5px; padding: 0; flex-shrink: 0;
}
.r-hamburger span {
  display: block; width: 22px; height: 2px;
  background: #16294F; border-radius: 2px;
}
@media (max-width: 768px) {
  .r-hamburger { display: flex; }
  .r-nav-btn   { display: none !important; }
}

/* ── MOBILE OVERLAY MENU ── */
.r-mobile-menu {
  display: none;
  position: fixed; inset: 0; z-index: 9999;
  background: #0F1E40;
  flex-direction: column;
  align-items: flex-start; justify-content: center;
  padding: 72px 36px 48px; gap: 0;
  overflow-y: auto;
}
.r-mobile-menu.open { display: flex; }
.r-mm-logo  { height: 54px; width: auto; margin-bottom: 36px; opacity: .9; }
.r-mm-link  {
  display: block; width: 100%;
  color: rgba(255,255,255,.72) !important;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 700; font-size: 28px;
  text-transform: uppercase; text-decoration: none !important;
  letter-spacing: .04em;
  padding: 13px 0;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.r-mm-link.active { color: #EC8430 !important; }
.r-mm-cta {
  display: inline-block; margin-top: 30px;
  background: #EC8430; color: #fff !important;
  padding: 14px 36px; border-radius: 100px;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800; font-size: 22px;
  text-transform: uppercase; text-decoration: none !important;
  letter-spacing: .05em;
}
.r-mm-cta-sec {
  display: inline-block; margin-top: 12px;
  background: transparent; color: rgba(255,255,255,.85) !important;
  padding: 13px 36px; border-radius: 100px;
  border: 2px solid rgba(255,255,255,.35);
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 800; font-size: 22px;
  text-transform: uppercase; text-decoration: none !important;
  letter-spacing: .05em;
}
.r-menu-close {
  position: absolute; top: 18px; right: 18px;
  background: rgba(255,255,255,.1); border: none;
  color: rgba(255,255,255,.8); font-size: 20px;
  cursor: pointer; padding: 8px 12px;
  border-radius: 10px; line-height: 1;
}

/* ── HERO SELLO en móvil ── */
@media (max-width: 768px) {
  .r-hero-sello {
    height: 46px !important;
    top: 20px !important;
    right: 14px !important;
  }
}

/* ── INTRO: logos en móvil ── */
@media (max-width: 768px) {
  .r-intro-logos { gap: 14px !important; margin-bottom: 24px !important; }
  .r-intro-sello { height: 100px !important; }
}

/* ── EDUCATIONAL: h2 y feat cards en móvil ── */
@media (max-width: 768px) {
  .r-edu-h2 { font-size: 42px !important; line-height: .9 !important; }
  .r-edu-feat-img  { height: 220px !important; }
  .r-edu-feat-grid { grid-template-columns: 1fr !important; gap: 8px 0 !important; }
  .r-edu-feat-body { padding: 22px 20px 26px !important; }
}

/* ── UN CHANCE CARD (home) en móvil ── */
@media (max-width: 768px) {
  .r-uc-home-card {
    min-height: 360px !important;
    background-size: 220% auto !important;
  }
}

/* ── INTERNAL PAGES: poster, CTA, dates strip en móvil ── */
@media (max-width: 768px) {
  .r-page-poster-wrap { padding: 18px 16px 0 !important; }
  .r-page-cta-section { padding: 20px 16px 0 !important; }
  .r-page-cta-btn {
    font-size: 18px !important;
    padding: 14px 22px !important;
    letter-spacing: .02em !important;
    width: calc(100% - 32px) !important;
    text-align: center !important;
    justify-content: center !important;
  }
  .r-uc-dates-strip { padding: 16px 16px !important; }
}

/* ── COMPANIES: grid 1 col + hero fix ── */
@media (max-width: 768px) {
  .r-companies-grid { grid-template-columns: 1fr !important; }
  .r-companies-hero { height: 300px !important; }
  .r-companies-hero-content { left: 18px !important; right: 18px !important; max-width: 100% !important; }
  .r-companies-hero-content h3 { font-size: 44px !important; }
  .r-companies-hero-content p  { display: none !important; }
}

/* ── EVENTOS DESTACADOS: fix date/time en móvil ── */
@media (max-width: 768px) {
  .r-event-row > div:nth-child(2) {
    width: auto !important;
    border-right: none !important;
    padding-right: 0 !important;
    border-bottom: 1px solid rgba(228,235,244,.5) !important;
    padding-bottom: 10px !important;
    text-align: left !important;
    display: flex !important;
    flex-direction: row !important;
    align-items: center !important;
    gap: 12px !important;
  }
  .r-event-row > div:nth-child(2) > div:nth-child(2) {
    font-size: 34px !important;
    line-height: 1 !important;
  }
  .r-event-row > div:nth-child(4) {
    text-align: left !important;
    min-width: auto !important;
    width: 100% !important;
  }
  .r-event-row > div:nth-child(4) > div:first-child {
    justify-content: flex-start !important;
    font-size: 18px !important;
  }
}

/* ── INTERNAL PAGES: padding de secciones externas ── */
@media (max-width: 768px) {
  .r-inner-section {
    padding-left: 16px !important;
    padding-right: 16px !important;
    padding-top: 36px !important;
  }
}

/* ── FORM CARDS (un-chance, un-futuro) ── */
@media (max-width: 768px) {
  .r-form-card { padding: 22px 18px !important; }
}

/* ── UN FUTURO: grids en móvil ── */
@media (max-width: 1024px) {
  .r-maestros-grid { grid-template-columns: repeat(2, 1fr) !important; }
}
@media (max-width: 768px) {
  .r-porq-grid     { grid-template-columns: 1fr !important; }
  .r-prog-grid     { grid-template-columns: 1fr !important; }
  .r-payment-grid  { grid-template-columns: 1fr !important; }
  .r-profile-grid  { grid-template-columns: 1fr !important; }
  .r-maestros-grid { grid-template-columns: 1fr !important; }
}

/* ── CTA HOME: padding exterior en móvil ── */
@media (max-width: 1024px) {
  .r-cta-outer { padding: 56px 32px !important; }
}
@media (max-width: 768px) {
  .r-cta-outer { padding: 48px 18px !important; }
}

/* ── PAGES: contact strip + footer bar ── */
@media (max-width: 768px) {
  .r-page-contact   { padding: 32px 18px !important; }
  .r-page-footer-bar { padding: 32px 18px !important; }
}