/*
 * SOLES 2026 · Menú fidelizado v3.0.1
 * Capa visual aislada: no interviene formularios, tarifas ni pagos.
 */

.demo3 {
  --menu-soles-orange: #e84e10;
  --menu-soles-yellow: #fcbd02;
  --menu-soles-white: #f6f0ee;
  --menu-soles-underline: #f1b69e;
}

.demo3 section[id] {
  scroll-margin-top: 24px;
}

@media (min-width: 901px) {
  .demo3 .d3-header {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: var(--menu-soles-orange) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    column-gap: clamp(24px, 2.2vw, 42px) !important;
    display: grid !important;
    grid-template-columns: minmax(205px, 290px) minmax(0, 1fr) 72px !important;
    height: clamp(120px, 10.12vw, 176px) !important;
    left: auto !important;
    margin: 0 !important;
    max-width: none !important;
    min-height: 120px !important;
    padding: 0 clamp(52px, 5.75vw, 100px) !important;
    position: relative !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    z-index: 100 !important;
  }

  .demo3 .d3-header:hover {
    background: var(--menu-soles-orange) !important;
    box-shadow: none !important;
  }

  .demo3 .d3-brand {
    align-items: center !important;
    display: inline-flex !important;
    justify-self: start !important;
    min-width: 0 !important;
  }

  .demo3 .d3-brand img {
    filter: brightness(0) invert(1) !important;
    height: auto !important;
    max-height: 92px !important;
    object-fit: contain !important;
    opacity: 1 !important;
    width: clamp(190px, 12.7vw, 220px) !important;
  }

  .demo3 .d3-nav {
    align-items: center !important;
    align-self: stretch !important;
    display: flex !important;
    gap: 0 !important;
    grid-column: 2 !important;
    height: 100% !important;
    justify-content: space-evenly !important;
    min-width: 0 !important;
    width: 100% !important;
  }

  .demo3 .d3-nav a {
    color: var(--menu-soles-white) !important;
    font-family: "NOAH HEAD", "Manrope", Arial, sans-serif !important;
    font-size: clamp(15px, 1.18vw, 21px) !important;
    font-weight: 500 !important;
    letter-spacing: .035em !important;
    line-height: 1 !important;
    opacity: 1 !important;
    padding: 8px 0 !important;
    text-transform: uppercase !important;
    transition: opacity .2s ease !important;
    white-space: nowrap !important;
  }

  .demo3 .d3-nav a:hover,
  .demo3 .d3-nav a:focus-visible {
    color: #ffffff !important;
    opacity: .82 !important;
  }

  .demo3 .d3-nav a.is-active {
    color: #ffffff !important;
    font-weight: 800 !important;
  }

  .demo3 .d3-nav a::after {
    background: var(--menu-soles-underline) !important;
    bottom: -3px !important;
    height: 2px !important;
    left: 0 !important;
    right: 100% !important;
    transition: right .22s ease !important;
  }

  .demo3 .d3-nav a:hover::after,
  .demo3 .d3-nav a:focus-visible::after,
  .demo3 .d3-nav a.is-active::after {
    right: 0 !important;
  }

  .demo3 .d4-header-actions {
    align-items: center !important;
    display: flex !important;
    gap: 0 !important;
    grid-column: 3 !important;
    justify-content: flex-end !important;
  }

  .demo3 .header-socials {
    align-items: center !important;
    display: flex !important;
    gap: 0 !important;
  }

  .demo3 .header-socials > a:first-child {
    display: none !important;
  }

  .demo3 .header-socials a,
  .demo3 .header-socials a:hover,
  .demo3 .header-socials a:focus-visible {
    align-items: center !important;
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    color: var(--menu-soles-yellow) !important;
    display: inline-flex !important;
    height: 54px !important;
    justify-content: center !important;
    opacity: 1 !important;
    padding: 0 !important;
    transform: none !important;
    width: 54px !important;
  }

  .demo3 .header-socials a:hover {
    opacity: .8 !important;
  }

  .demo3 .header-socials svg {
    fill: none !important;
    height: clamp(38px, 2.72vw, 47px) !important;
    stroke: currentColor !important;
    stroke-linecap: round !important;
    stroke-linejoin: round !important;
    stroke-width: 2.15 !important;
    width: clamp(38px, 2.72vw, 47px) !important;
  }

  .demo3 .d4-menu-toggle,
  .demo3 .d4-mobile-panel {
    display: none !important;
  }

  .demo3 .soles-hero {
    padding-top: 0 !important;
  }
}

@media (min-width: 901px) and (max-width: 1180px) {
  .demo3 .d3-header {
    column-gap: 16px !important;
    grid-template-columns: 180px minmax(0, 1fr) 48px !important;
    padding-inline: 28px !important;
  }

  .demo3 .d3-brand img {
    width: 175px !important;
  }

  .demo3 .d3-nav a {
    font-size: clamp(14px, 1.48vw, 17px) !important;
  }

  .demo3 .header-socials a {
    height: 44px !important;
    width: 44px !important;
  }

  .demo3 .header-socials svg {
    height: 34px !important;
    width: 34px !important;
  }
}

@media (max-width: 900px) {
  .demo3 .d3-header {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    background: var(--menu-soles-orange) !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    box-sizing: border-box !important;
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) auto !important;
    left: auto !important;
    margin: 0 !important;
    min-height: 86px !important;
    padding: 11px 16px 11px 20px !important;
    position: relative !important;
    right: auto !important;
    top: auto !important;
    transform: none !important;
    width: 100% !important;
    z-index: 100 !important;
  }

  .demo3 .d3-brand {
    display: inline-flex !important;
  }

  .demo3 .d3-brand img {
    filter: brightness(0) invert(1) !important;
    height: auto !important;
    max-height: 62px !important;
    opacity: 1 !important;
    width: clamp(145px, 43vw, 176px) !important;
  }

  .demo3 .d3-nav {
    display: none !important;
  }

  .demo3 .d4-header-actions {
    align-items: center !important;
    display: flex !important;
    gap: 8px !important;
  }

  .demo3 .header-socials > a:first-child {
    display: none !important;
  }

  .demo3 .header-socials a,
  .demo3 .header-socials a:hover {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    color: var(--menu-soles-yellow) !important;
    height: 42px !important;
    padding: 0 !important;
    width: 42px !important;
  }

  .demo3 .header-socials svg {
    height: 31px !important;
    stroke-width: 2.1 !important;
    width: 31px !important;
  }

  .demo3 .d4-menu-toggle {
    background: transparent !important;
    border: 1px solid rgba(255, 255, 255, .52) !important;
    border-radius: 12px !important;
    color: #ffffff !important;
    display: grid !important;
    height: 46px !important;
    width: 46px !important;
  }

  .demo3 .d4-mobile-panel {
    background: #d9460d !important;
    border: 0 !important;
    border-radius: 0 0 18px 18px !important;
    box-shadow: 0 18px 35px rgba(91, 29, 3, .24) !important;
    color: #ffffff !important;
    left: 0 !important;
    margin: 0 !important;
    right: 0 !important;
    top: 100% !important;
  }

  .demo3 .d4-mobile-panel nav a {
    color: #ffffff !important;
  }

  .demo3 .d4-mobile-panel nav a span {
    color: var(--menu-soles-yellow) !important;
  }

  .demo3 .d4-mobile-panel nav a:first-child {
    font-weight: 800 !important;
  }

  .demo3 .mobile-socials a {
    color: #ffffff !important;
  }

  .demo3 .soles-hero {
    padding-top: 0 !important;
  }
}

@media (max-width: 420px) {
  .demo3 .d3-header {
    min-height: 78px !important;
    padding-left: 14px !important;
    padding-right: 10px !important;
  }

  .demo3 .d3-brand img {
    width: 140px !important;
  }

  .demo3 .header-socials {
    display: none !important;
  }
}

@media (prefers-reduced-motion: reduce) {
  .demo3 .d3-nav a,
  .demo3 .d3-nav a::after,
  .demo3 .header-socials a {
    transition: none !important;
  }
}

/*
 * SOLES 2026 · Hero v3.0.2
 * El encabezado pertenece al flujo normal de la página y nunca queda anclado.
 * El arte del hero se presenta completo, sin recortes ni alteraciones.
 */
@media (min-width: 901px) {
  .demo3 .d3-header {
    bottom: auto !important;
    left: auto !important;
    position: static !important;
    right: auto !important;
    top: auto !important;
  }
}

.demo3 .soles-hero {
  background: #ffffff !important;
  margin: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  padding: 0 !important;
  width: 100% !important;
}

.demo3 .soles-banner-frame {
  background: #ffffff !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  height: auto !important;
  margin: 0 !important;
  max-width: none !important;
  min-height: 0 !important;
  overflow: hidden !important;
  position: relative !important;
  width: 100% !important;
}

.demo3 .soles-banner-frame picture {
  display: block !important;
  height: auto !important;
  width: 100% !important;
}

.demo3 .soles-banner-image {
  aspect-ratio: auto !important;
  display: block !important;
  height: auto !important;
  margin: 0 !important;
  max-height: none !important;
  max-width: 100% !important;
  min-height: 0 !important;
  object-fit: contain !important;
  object-position: center !important;
  width: 100% !important;
}

.demo3 .soles-hero-registration-link {
  background: transparent;
  border: 0;
  border-radius: 50%;
  cursor: pointer;
  height: 46%;
  left: 57.2%;
  position: absolute;
  top: 42%;
  width: 16.4%;
  z-index: 5;
}

.demo3 .soles-hero-registration-link:hover {
  background: rgba(255, 255, 255, .055);
}

.demo3 .soles-hero-registration-link:focus-visible {
  background: rgba(255, 255, 255, .08);
  outline: 4px solid #ffffff !important;
  outline-offset: -8px !important;
}

@media (max-width: 900px) {
  .demo3 .d3-header {
    bottom: auto !important;
    left: auto !important;
    position: relative !important;
    right: auto !important;
    top: auto !important;
  }

  .demo3 .soles-banner-frame,
  .demo3 .soles-banner-frame picture,
  .demo3 .soles-banner-image {
    height: auto !important;
    min-height: 0 !important;
  }

  .demo3 .soles-hero-registration-link {
    min-height: 44px;
    min-width: 58px;
  }
}

/*
 * SOLES 2026 · Ajuste visual v3.0.3
 * Menú flotante, hero sin paginación y nueva franja institucional.
 * Esta capa no modifica formularios, tarifas, base de datos ni ePayco.
 */
.demo3 {
  --soles-floating-menu-height: clamp(120px, 10.12vw, 176px);
  --soles-floating-menu-top: clamp(10px, 1vw, 16px);
}

.demo3 section[id] {
  scroll-margin-top: calc(var(--soles-floating-menu-height) + 34px) !important;
}

.demo3 .soles-hero {
  background: var(--menu-soles-orange) !important;
}

.demo3 .soles-banner-frame {
  background: var(--menu-soles-orange) !important;
}

.demo3 .soles-future-strip {
  background: #ffffff !important;
  display: block !important;
  margin: 0 !important;
  overflow: hidden !important;
  width: 100% !important;
}

.demo3 .soles-future-strip img {
  display: block !important;
  height: auto !important;
  margin: 0 !important;
  max-width: none !important;
  object-fit: contain !important;
  width: 100% !important;
}

@media (min-width: 901px) {
  .demo3 .d3-header,
  .demo3 .d3-header:hover {
    background: var(--menu-soles-orange) !important;
    border: 1px solid rgba(255, 255, 255, .18) !important;
    border-radius: clamp(18px, 1.45vw, 26px) !important;
    bottom: auto !important;
    box-shadow: 0 16px 42px rgba(73, 24, 4, .26) !important;
    height: var(--soles-floating-menu-height) !important;
    left: 50% !important;
    max-width: 1680px !important;
    min-height: var(--soles-floating-menu-height) !important;
    position: fixed !important;
    right: auto !important;
    top: var(--soles-floating-menu-top) !important;
    transform: translateX(-50%) !important;
    width: calc(100% - clamp(24px, 3vw, 52px)) !important;
    z-index: 2400 !important;
  }

  .demo3 .soles-hero {
    padding-top: calc(var(--soles-floating-menu-height) + var(--soles-floating-menu-top)) !important;
  }
}

@media (max-width: 900px) {
  .demo3 {
    --soles-floating-menu-height: 86px;
    --soles-floating-menu-top: 8px;
  }

  .demo3 section[id] {
    scroll-margin-top: 112px !important;
  }

  .demo3 .d3-header,
  .demo3 .d3-header:hover {
    background: var(--menu-soles-orange) !important;
    border: 1px solid rgba(255, 255, 255, .2) !important;
    border-radius: 16px !important;
    bottom: auto !important;
    box-shadow: 0 12px 32px rgba(73, 24, 4, .28) !important;
    left: 8px !important;
    min-height: var(--soles-floating-menu-height) !important;
    position: fixed !important;
    right: auto !important;
    top: var(--soles-floating-menu-top) !important;
    transform: none !important;
    width: calc(100% - 16px) !important;
    z-index: 2400 !important;
  }

  .demo3 .d4-mobile-panel {
    border-radius: 0 0 16px 16px !important;
  }

  .demo3 .soles-hero {
    padding-top: calc(var(--soles-floating-menu-height) + var(--soles-floating-menu-top)) !important;
  }
}

@media (max-width: 420px) {
  .demo3 {
    --soles-floating-menu-height: 78px;
    --soles-floating-menu-top: 6px;
  }

  .demo3 section[id] {
    scroll-margin-top: 100px !important;
  }
}

/*
 * SOLES 2026 · Ajuste visual v3.0.4
 * Menú persistente en una sola franja de extremo a extremo.
 * El banner comienza exactamente al terminar el menú, sin fondo intermedio.
 */
.demo3 {
  --soles-floating-menu-top: 0px;
}

main.demo3 > .d3-header,
main.demo3 > .d3-header:hover {
  background: var(--menu-soles-orange) !important;
  border: 0 !important;
  border-radius: 0 !important;
  bottom: auto !important;
  box-shadow: none !important;
  left: 0 !important;
  margin: 0 !important;
  max-width: none !important;
  position: sticky !important;
  right: 0 !important;
  top: 0 !important;
  transform: none !important;
  width: 100% !important;
  z-index: 2400 !important;
}

.demo3 .soles-hero {
  background: #ffffff !important;
  padding: 0 !important;
}

.demo3 .soles-banner-frame {
  background: #ffffff !important;
}

@media (min-width: 901px) {
  main.demo3 > .d3-header,
  main.demo3 > .d3-header:hover {
    height: var(--soles-floating-menu-height) !important;
    min-height: var(--soles-floating-menu-height) !important;
  }
}

@media (max-width: 900px) {
  .demo3 {
    --soles-floating-menu-height: 86px;
    --soles-floating-menu-top: 0px;
  }

  main.demo3 > .d3-header,
  main.demo3 > .d3-header:hover {
    min-height: var(--soles-floating-menu-height) !important;
  }

  .demo3 .d4-mobile-panel {
    border-radius: 0 !important;
  }
}

@media (max-width: 420px) {
  .demo3 {
    --soles-floating-menu-height: 78px;
  }
}

/*
 * SOLES 2026 · Corrección definitiva v3.0.6
 * Menú sticky en el flujo y hero inmediato, sin espaciadores artificiales.
 */
main.demo3 {
  overflow: visible !important;
  overflow-x: clip !important;
}

.demo3 .soles-hero {
  margin: 0 !important;
  padding: 0 !important;
}

/*
 * SOLES 2026 · Cierre de layout v3.0.7
 * El encabezado conserva su espacio real y el hero es su siguiente elemento,
 * sin reservas, separadores ni desplazamientos heredados.
 */
html,
body,
main.demo3 {
  margin: 0 !important;
  padding: 0 !important;
}

main.demo3 {
  display: block !important;
}

main.demo3 > .d3-header {
  display: grid !important;
  float: none !important;
  margin-bottom: 0 !important;
  position: sticky !important;
  top: 0 !important;
}

main.demo3 > section.soles-hero {
  clear: both !important;
  display: block !important;
  margin-block: 0 !important;
  padding-block: 0 !important;
  position: relative !important;
  top: auto !important;
  transform: none !important;
}