/*
 * SOLES 2026 · Responsive móvil v3.1.2
 * Capa exclusivamente visual. No modifica ePayco, tarifas, registro, APIs ni BD.
 * Escritorio (>900px) conserva exactamente la presentación previa.
 */
.demo3 .soles-mobile-art,
.demo3 .tariff-mobile-visual {
  display: none !important;
}

@media (max-width: 900px) {
  html,
  body {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: hidden !important;
  }

  main.demo3 {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: clip !important;
  }

  .demo3 .soles-desktop-art,
  .demo3 .tariff-desktop-visual {
    display: none !important;
  }

  .demo3 .soles-mobile-art,
  .demo3 .tariff-mobile-visual {
    display: block !important;
  }

  /* Menú compacto y usable */
  main.demo3 > .d3-header {
    min-height: 72px !important;
    height: 72px !important;
    padding: 8px 12px 8px 14px !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
  }
  .demo3 .d3-brand img {
    width: min(40vw, 152px) !important;
    max-height: 54px !important;
  }
  .demo3 .d4-header-actions {
    gap: 4px !important;
  }
  .demo3 .d4-menu-toggle {
    width: 44px !important;
    height: 44px !important;
  }
  .demo3 .d4-mobile-panel {
    max-height: calc(100dvh - 72px) !important;
    overflow-y: auto !important;
  }
  .demo3 section[id] {
    scroll-margin-top: 76px !important;
  }

  /* Hero: dos paneles del mismo arte original, sin reducir el texto a miniatura. */
  .demo3 .soles-hero {
    background: #ee5b08 !important;
  }
  .demo3 .soles-mobile-hero,
  .demo3 .soles-mobile-future,
  .demo3 .soles-mobile-speakers,
  .demo3 .soles-mobile-agenda,
  .demo3 .tariff-mobile-visual {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }
  .demo3 .soles-mobile-hero > img,
  .demo3 .soles-mobile-hero-cta-panel > img,
  .demo3 .soles-mobile-future > img,
  .demo3 .soles-mobile-speakers > img,
  .demo3 .soles-mobile-agenda > img,
  .demo3 .tariff-mobile-visual img {
    display: block !important;
    height: auto !important;
    max-width: none !important;
  }
  .demo3 .soles-mobile-hero > img {
    width: 100% !important;
  }
  .demo3 .soles-mobile-hero-cta-panel {
    position: relative !important;
    width: 100% !important;
    overflow: hidden !important;
  }
  .demo3 .soles-mobile-hero-cta-panel > img {
    width: 100% !important;
  }
  .demo3 .soles-mobile-hero-cta-panel > a {
    position: absolute !important;
    left: 3.5% !important;
    top: 40% !important;
    width: 39% !important;
    height: 50% !important;
    z-index: 5 !important;
    border-radius: 50% !important;
  }
  .demo3 .soles-mobile-hero-cta-panel > a:focus-visible {
    outline: 3px solid #fff !important;
    outline-offset: -5px !important;
  }

  /* Franja 2: texto institucional en una sola franja blanca continua. */
  .demo3 .soles-mobile-future {
    background: #fff !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 0 !important;
    overflow: hidden !important;
  }
  .demo3 .soles-mobile-future > img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Speakers: título + cada speaker a ancho de móvil. */
  .demo3 .soles-speakers-fidelizada {
    background: #4a2475 !important;
    line-height: normal !important;
    padding: 0 0 14px !important;
    margin-top: -1px !important;
  }
  .demo3 .soles-mobile-speakers {
    background: #4a2475 !important;
  }
  .demo3 .soles-mobile-speakers > img {
    width: 100% !important;
    margin: 0 auto !important;
  }
  .demo3 .soles-mobile-speakers > img:first-child {
    width: 100% !important;
  }
  .demo3 .soles-mobile-speakers > img:last-child {
    width: 72% !important;
    margin: 0 auto !important;
  }

  /* Agenda móvil consolidada en una sola pieza visual, centrada y compacta. */
  .demo3 .soles-agenda-fidelizada {
    background: #f8d600 !important;
    line-height: normal !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .demo3 .soles-mobile-agenda {
    display: block !important;
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 0 !important;
    box-sizing: border-box !important;
  }
  .demo3 .soles-mobile-agenda > img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }

  /* Tarifas: cada fase se apila. Los botones siguen siendo los enlaces PHP reales. */
  .demo3 .soles-tarifas-fidelizada {
    background: #ef6508 !important;
    line-height: normal !important;
    padding: 18px 0 30px !important;
  }
  .demo3 .tariff-mobile-visual {
    box-sizing: border-box !important;
    padding: 0 14px !important;
  }
  .demo3 .tariffs-mobile-title {
    width: 100% !important;
    margin: 0 auto 14px !important;
  }
  .demo3 .mobile-stage-card {
    position: relative !important;
    width: min(88vw, 430px) !important;
    margin: 0 auto 20px !important;
    line-height: 0 !important;
  }
  .demo3 .mobile-stage-card > img {
    width: 100% !important;
    border-radius: 22px !important;
  }
  .demo3 .mobile-stage-hotspot {
    position: absolute !important;
    left: 6% !important;
    top: 84% !important;
    width: 88% !important;
    height: 14% !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 15px !important;
    background: transparent !important;
    color: transparent !important;
    font-size: 0 !important;
    text-indent: -9999px !important;
    cursor: pointer !important;
    z-index: 4 !important;
  }
  .demo3 .mobile-stage-hotspot:focus-visible {
    outline: 3px solid #fff !important;
    outline-offset: -4px !important;
  }
  .demo3 .mobile-company-card {
    position: relative !important;
    width: 100% !important;
    margin: 10px auto 0 !important;
    line-height: 0 !important;
  }
  .demo3 .mobile-company-card > img {
    width: 100% !important;
  }
  .demo3 .mobile-company-hotspot {
    position: absolute !important;
    left: 78% !important;
    top: 12% !important;
    width: 21% !important;
    height: 78% !important;
    min-width: 48px !important;
    min-height: 48px !important;
    border-radius: 999px !important;
    background: transparent !important;
    color: transparent !important;
    font-size: 0 !important;
    text-indent: -9999px !important;
    z-index: 4 !important;
  }
  .demo3 .mobile-company-hotspot:focus-visible {
    outline: 3px solid #fff !important;
    outline-offset: -4px !important;
  }
  .demo3 .soles-tarifas-fidelizada .stage-availability-message {
    margin: 14px !important;
    border-radius: 14px !important;
  }

  /* Beneficios y contacto existentes: reorganización móvil, sin cambiar contenido. */
  .demo3 .d7-benefits {
    padding: 46px 14px !important;
  }
  .demo3 .d3-shell {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
  }
  .demo3 .soles-title-fix-v222 > h2 {
    font-size: clamp(35px, 10.5vw, 50px) !important;
    line-height: .98 !important;
    padding-inline: 6px !important;
  }
  .demo3 .d7-access-panel {
    padding: 24px 16px !important;
    border-radius: 22px !important;
  }
  .demo3 .d7-benefit-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 0 !important;
  }
  .demo3 .d7-benefit-grid > article {
    min-height: 0 !important;
    padding: 20px 4px !important;
  }
  .demo3 .d7-benefit-grid > article + article {
    border-top: 1px solid rgba(91, 42, 22, .14) !important;
  }
  .demo3 .event-contact-strip {
    grid-template-columns: 1fr !important;
    gap: 24px !important;
    padding: 28px 18px !important;
  }
  .demo3 .event-contact-links {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
  .demo3 .event-contact-links a {
    min-width: 0 !important;
    width: 100% !important;
    box-sizing: border-box !important;
  }

  /* Formulario de inscripción: mismos componentes y JS, presentación adecuada al viewport. */
  .demo3 .pse-modal {
    width: calc(100vw - 12px) !important;
    max-width: calc(100vw - 12px) !important;
    max-height: 96dvh !important;
    height: auto !important;
    overflow-y: auto !important;
    border-radius: 18px !important;
  }
  .demo3 .pse-modal-head {
    position: sticky !important;
    top: 0 !important;
    z-index: 5 !important;
    padding: 12px 14px !important;
  }
  .demo3 .pse-modal-head > p {
    display: none !important;
  }
  .demo3 .registration-app {
    display: grid !important;
    grid-template-columns: 1fr !important;
    min-height: 0 !important;
  }
  .demo3 .registration-aside {
    display: none !important;
  }
  .demo3 .registration-panel {
    min-width: 0 !important;
    width: 100% !important;
    padding: 20px 14px 24px !important;
    box-sizing: border-box !important;
  }
  .demo3 .flow-screen,
  .demo3 .company-screen,
  .demo3 .summary-screen,
  .demo3 .checkout-screen {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }
  .demo3 .profile-tabs {
    grid-template-columns: 1fr !important;
  }
  .demo3 .field input,
  .demo3 .field select,
  .demo3 .flow-primary,
  .demo3 .flow-secondary {
    min-height: 48px !important;
  }

  /* WhatsApp flotante compacto para no tapar contenido. */
  .demo3 .floating-whatsapp {
    right: 12px !important;
    bottom: 12px !important;
    width: 54px !important;
    height: 54px !important;
    min-width: 54px !important;
    padding: 0 !important;
    border-radius: 50% !important;
  }
  .demo3 .floating-whatsapp span {
    display: none !important;
  }
}

@media (max-width: 420px) {
  main.demo3 > .d3-header {
    min-height: 66px !important;
    height: 66px !important;
  }
  .demo3 .d3-brand img {
    width: 132px !important;
  }
  .demo3 section[id] {
    scroll-margin-top: 70px !important;
  }
  .demo3 .mobile-stage-card {
    width: 92vw !important;
  }
  .demo3 .tariff-mobile-visual {
    padding-inline: 9px !important;
  }
  .demo3 .soles-mobile-agenda {
    padding-inline: 6px !important;
  }
}


/* SOLES v3.6.1 · Portada móvil 9:16 refinada.
   Cambio exclusivo para <=900px. Escritorio no se modifica. */
@media (max-width: 900px) {
  main.demo3 {
    padding-top: 72px !important;
  }
  main.demo3 > .d3-header,
  main.demo3 > .d3-header:hover {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1005 !important;
  }
  .demo3 .d4-mobile-panel {
    position: fixed !important;
    top: 72px !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    z-index: 1004 !important;
    max-height: calc(100dvh - 72px) !important;
  }
  .demo3 .soles-mobile-hero-v361 {
    position: relative !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: #ee5b08 !important;
    overflow: hidden !important;
    line-height: 0 !important;
  }
  .demo3 .soles-mobile-hero-v361 > img {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    max-width: none !important;
    margin: 0 !important;
  }
  .demo3 .soles-mobile-hero-link-v361 {
    position: absolute !important;
    left: 26% !important;
    top: 64.2% !important;
    width: 48% !important;
    height: 22% !important;
    z-index: 6 !important;
    border-radius: 50% !important;
  }
  .demo3 .soles-mobile-hero-link-v361:focus-visible {
    outline: 3px solid #fff !important;
    outline-offset: -5px !important;
  }
  .demo3 .soles-mobile-future {
    display: block !important;
    margin-top: 0 !important;
  }
}

@media (max-width: 420px) {
  main.demo3 {
    padding-top: 66px !important;
  }
  .demo3 .d4-mobile-panel {
    top: 66px !important;
    max-height: calc(100dvh - 66px) !important;
  }
}