/* Smart Fit local responsive/full-width overrides
   Objetivo: que las secciones, contenedores, cards y banners aprovechen
   el ancho de pantalla en todas las páginas estáticas del proyecto. */

:root {
  --sf-fluid-gutter: clamp(16px, 3.8vw, 72px);
  --sf-fluid-gap: clamp(16px, 2vw, 34px);
  --sf-card-radius: clamp(14px, 1.2vw, 26px);
  --sf-section-y: clamp(34px, 4.5vw, 86px);
}

html,
body {
  width: 100%;
  max-width: 100%;
  overflow-x: hidden;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

img,
picture,
video,
canvas,
svg {
  max-width: 100%;
}

/* Utilidad full-bleed aplicada a banners y secciones principales. */
body :is(
  .Top,
  #default-slider,
  .new-home-v4-slider,
  .new-home-v4-hero,
  #v4-plans-plans-v2,
  .new-home-v4-experience,
  .new-home-v4-training-classes,
  .new-home-v4__app,
  .v4-addons-section,
  .locations-v4__campaign-banner
) {
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
}

/* Banners/hero con imagen de fondo o imagen real.
   Columna (breadcrumb arriba → título debajo → contenido), como el flujo del
   sitio original; en fila, el breadcrumb y el título quedaban lado a lado. */
.Top {
  min-height: clamp(340px, 44vw, 720px) !important;
  padding: clamp(46px, 7vw, 120px) var(--sf-fluid-gutter) !important;
  background-size: cover !important;
  background-position: center center !important;
  background-repeat: no-repeat !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  align-items: center !important;
}

.Top.Top--hide-bg {
  min-height: clamp(220px, 26vw, 380px) !important;
}

.Top .Container,
.Top__content {
  width: 100% !important;
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.Top__title,
.Top h1,
.Top h2 {
  font-size: clamp(34px, 5vw, 88px) !important;
  line-height: 1.04 !important;
  letter-spacing: -0.045em;
}

#default-slider,
.new-home-v4-slider {
  padding-left: 0 !important;
  padding-right: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
}

#default-slider :is(.swiper, .swiper-wrapper, .swiper-slide, .new-home-v4-slider__item),
.new-home-v4-slider :is(.swiper, .swiper-wrapper, .swiper-slide, .new-home-v4-slider__item) {
  width: 100% !important;
  max-width: none !important;
}

#default-slider img,
.new-home-v4-slider img,
.new-home-v4-slider__item img {
  width: 100vw !important;
  max-width: none !important;
  height: clamp(360px, 44vw, 820px) !important;
  object-fit: cover !important;
  border-radius: 0 !important;
}

body.home-index #default-slider img,
body.home-index .new-home-v4-slider img,
body.home-index .new-home-v4-slider__item img {
  height: clamp(390px, 47vw, 880px) !important;
}

.locations-v4__campaign-banner img {
  width: 100vw !important;
  max-width: none !important;
  height: auto !important;
  object-fit: cover !important;
  border-radius: 0 !important;
}

.new-home-v4-hero {
  padding-left: 0 !important;
  padding-right: 0 !important;
}

.new-home-v4-hero__content,
.new-home-v4-hero__content--mx {
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  border-radius: 0 !important;
  background-size: cover !important;
  background-position: center !important;
}

body.home-index .new-home-v4-hero__content,
body.home-index .new-home-v4-hero__content--mx {
  height: clamp(350px, 25vw, 460px) !important;
}

/* Contenedores globales: quitamos topes chicos y usamos gutters fluidos. */
body :is(
  .Container,
  .container,
  .new-home-v4-container,
  .new-home-v4-section-title,
  .v4-container,
  .content-container,
  .general_wrapper
) {
  width: 100% !important;
  max-width: none !important;
  box-sizing: border-box;
}

body :is(
  .Container,
  .container,
  .new-home-v4-container,
  .new-home-v4-section-title,
  .content-container
):not(.Top__content):not(.new-home-v4-header__content):not(.smart-ui-modal__container) {
  padding-left: var(--sf-fluid-gutter) !important;
  padding-right: var(--sf-fluid-gutter) !important;
}

body :is(
  .wrapper,
  .intro.Container,
  .equipments,
  .trainnings,
  .buy-now,
  .categories,
  .contracts,
  .Block,
  .Grid-block,
  .Features__list,
  .locations-v4__container,
  .locations-v4__content
) {
  width: 100% !important;
  max-width: none !important;
}

/* Grids/cards antiguos. */
.wrapper {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 460px), 1fr)) !important;
  gap: var(--sf-fluid-gap) !important;
  align-items: start !important;
}

.wrapper__column {
  width: 100% !important;
  max-width: none !important;
}

.intro__wrapper,
.list-cards,
.Grid-block,
.Features__list,
.locations-v4__list {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)) !important;
  gap: var(--sf-fluid-gap) !important;
  width: 100% !important;
  max-width: none !important;
}

.intro__column,
.equipment-card,
.trainning-card,
.Grid-block__item,
.Features__list__item,
.Block__content,
.locations-v4-location-card {
  width: 100% !important;
  max-width: none !important;
  min-height: auto;
  border-radius: var(--sf-card-radius);
}

.equipment-card img,
.trainning-container-image img,
.locations-v4-location-card__figure img {
  width: 100% !important;
  max-width: none !important;
  height: clamp(240px, 22vw, 420px) !important;
  object-fit: cover !important;
}

.trainning-container-image,
.trainning-container-info {
  width: 100% !important;
  max-width: none !important;
}

/* Formularios y columnas antiguas. */
.Form__wrapper {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: clamp(12px, 1.5vw, 24px) !important;
  width: 100% !important;
  max-width: none !important;
}

.Form__column,
.Form__column--20,
.Form__column--33,
.Form__column--50,
.Form__column--66,
.Form__column--80,
.Form__column--mob-full {
  flex: 1 1 min(100%, 280px) !important;
  width: auto !important;
  max-width: none !important;
}

.Form :is(input, select, textarea),
.Form__wrapper :is(input, select, textarea),
form :is(input, select, textarea) {
  width: 100% !important;
  max-width: none !important;
}

/* Home/planes/productos: mismo criterio aplicado en index, extendido a copias como person_sessions/new. */
#v4-plans-plans-v2,
.new-home-v4-experience,
.new-home-v4-training-classes,
.new-home-v4__app,
.v4-addons-section {
  padding: var(--sf-section-y) var(--sf-fluid-gutter) !important;
  overflow: hidden !important;
}

#v4-plans-plans-v2 .v4-plans,
.v4-addons-section .v4-addons,
.new-home-v4__app__container {
  width: 100% !important;
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#v4-plans-plans-v2 .v4-plans__header,
.new-home-v4-experience .new-home-v4-section-title,
.new-home-v4-training-classes .new-home-v4-section-title,
.v4-addons-section .v4-addons__header {
  width: 100% !important;
  max-width: none !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
}

#v4-plans-plans-v2 .v4-plans__header h2,
.new-home-v4-experience .new-home-v4-section-title__title,
.new-home-v4-training-classes .new-home-v4-section-title__title,
.v4-addons-section .v4-addons__header h2,
.new-home-v4__app h2 {
  font-size: clamp(32px, 4vw, 68px) !important;
  line-height: 1.08 !important;
  letter-spacing: -0.04em;
}

#plans-carousel,
#experience-carousel,
#training-classes-carousel,
#addons-carousel {
  width: 100% !important;
  max-width: none !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

#plans-carousel .swiper,
#experience-carousel .swiper,
#training-classes-carousel .swiper,
#addons-carousel .swiper {
  width: 100% !important;
  overflow: visible !important;
}

#plans-carousel .swiper-wrapper,
#experience-carousel .swiper-wrapper,
#training-classes-carousel .swiper-wrapper,
#addons-carousel .swiper-wrapper {
  display: grid !important;
  width: 100% !important;
  transform: none !important;
  transition: none !important;
  align-items: stretch !important;
  gap: var(--sf-fluid-gap) !important;
}

#plans-carousel .swiper-wrapper {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 330px), 1fr)) !important;
  padding-top: clamp(28px, 4vw, 58px) !important;
}

#experience-carousel .swiper-wrapper,
#training-classes-carousel .swiper-wrapper,
#addons-carousel .swiper-wrapper {
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)) !important;
}

#plans-carousel .swiper-slide,
#experience-carousel .swiper-slide,
#training-classes-carousel .swiper-slide,
#addons-carousel .swiper-slide {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  margin: 0 !important;
}

#plans-carousel :is(.smart-ui-carousel__btn-next, .smart-ui-carousel__btn-prev, .smart-ui-carousel__pagination),
#experience-carousel :is(.smart-ui-carousel__btn-next, .smart-ui-carousel__btn-prev, .smart-ui-carousel__pagination),
#training-classes-carousel :is(.smart-ui-carousel__btn-next, .smart-ui-carousel__btn-prev, .smart-ui-carousel__pagination),
#addons-carousel :is(.smart-ui-carousel__btn-next, .smart-ui-carousel__btn-prev, .smart-ui-carousel__pagination) {
  display: none !important;
}

#v4-plans-plans-v2 .smart-ui-plan-card,
.new-home-v4-training-classes-card,
.v4-addons-section .v4-addons-card {
  width: 100% !important;
  max-width: none !important;
  height: 100% !important;
  min-height: clamp(520px, 42vw, 780px);
  border-radius: var(--sf-card-radius);
}

#v4-plans-plans-v2 .smart-ui-plan-card {
  padding: clamp(22px, 2vw, 42px) !important;
}

#v4-plans-plans-v2 .smart-ui-plan-card__title {
  font-size: clamp(28px, 2.15vw, 44px) !important;
  line-height: 1.1 !important;
}

#v4-plans-plans-v2 .smart-ui-plan-card__amount {
  font-size: clamp(36px, 3.2vw, 62px) !important;
  line-height: 1 !important;
}

#v4-plans-plans-v2 .smart-ui-plan-card :is(
  .smart-ui-plan-card__description,
  .smart-ui-plan-card__offer-disclaimer,
  .smart-ui-plan-card__old-price,
  .smart-ui-plan-card__installments-disclaimer,
  .smart-ui-plan-card__fidelity,
  .smart-ui-plan-card__advantage-text
) {
  font-size: clamp(15px, 1.15vw, 22px) !important;
  line-height: 1.42 !important;
}

#v4-plans-plans-v2 .smart-ui-plan-card__content .smart-ui-button,
.new-home-v4-experience #home-inscription-button,
.new-home-v4-training-classes .new-home-v4-cta-wrapper .smart-ui-button,
.v4-addons-section .v4-addons-card__see-more-button {
  min-height: clamp(48px, 4vw, 70px);
  border-radius: 999px;
  font-size: clamp(16px, 1.2vw, 24px) !important;
  font-weight: 900;
}

.new-home-v4-experience-figure {
  width: 100% !important;
  height: 100% !important;
  min-height: clamp(290px, 24vw, 500px);
  border-radius: var(--sf-card-radius);
}

.new-home-v4-experience-figure img,
.new-home-v4-training-classes-card img,
.v4-addons-section .v4-addons-card__img img {
  width: 100% !important;
  max-width: none !important;
  height: clamp(220px, 18vw, 360px) !important;
  max-height: none !important;
  object-fit: cover !important;
}

.new-home-v4-experience-figure figcaption,
.new-home-v4-training-classes-card__header {
  min-height: clamp(58px, 4.8vw, 86px);
  height: auto !important;
}

.new-home-v4-training-classes-card__content,
.v4-addons-section .v4-addons-card__content {
  padding: clamp(20px, 2vw, 38px) !important;
}

.new-home-v4-training-classes-card__title {
  font-size: clamp(18px, 1.5vw, 30px) !important;
  line-height: 1.15 !important;
}

.new-home-v4-training-classes-card__text,
.v4-addons-section .v4-addons-card__content :is(.addon-title h3, .addon-description p) {
  display: block !important;
  max-height: none !important;
  -webkit-line-clamp: unset !important;
}

.v4-addons-section .v4-addons-card__content .addon-title h3 {
  font-size: clamp(26px, 2.1vw, 42px) !important;
  line-height: 1.22 !important;
}

.v4-addons-section .v4-addons-card__content .addon-description p {
  font-size: clamp(16px, 1.25vw, 24px) !important;
  line-height: 1.55 !important;
}

/* Planes: las tarjetas de servicios ocupan toda la fila y separan imagen/texto. */
body.plans-index #smart-carousel-addons {
  width: 100% !important;
  max-width: none !important;
}

body.plans-index #smart-carousel-addons .v4-addons-card__img {
  height: clamp(220px, 18vw, 360px) !important;
  flex: 0 0 auto !important;
  overflow: hidden !important;
}

body.plans-index #smart-carousel-addons .v4-addons-card__img img {
  height: 100% !important;
}

body.plans-index #smart-carousel-addons .v4-addons-card {
  height: auto !important;
  min-height: 0 !important;
}

body.plans-index #smart-carousel-addons .v4-addons-card__content {
  height: auto !important;
  flex: 1 1 auto !important;
}

body.plans-index #smart-carousel-addons .v4-addons-card__see-more-button {
  margin-top: auto !important;
}

body.plans-index #smart-carousel-addons .v4-addons-carousel-item {
  padding-right: clamp(6px, 0.65vw, 12px) !important;
  padding-left: clamp(6px, 0.65vw, 12px) !important;
}

/* App block del home: evita que quede como isla angosta. */
.new-home-v4__app__container {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 420px), 1fr)) !important;
  gap: var(--sf-fluid-gap) !important;
  align-items: center !important;
}

.new-home-v4__app__container__image img {
  width: min(100%, clamp(360px, 34vw, 640px)) !important;
  height: auto !important;
}

/* Gimnasios / Locations v4: esta página se renderiza con React y trae
   max-widths propios, por eso necesita overrides dedicados. */
.public_locations_v4 .container {
  width: 100% !important;
  max-width: none !important;
  padding-left: var(--sf-fluid-gutter) !important;
  padding-right: var(--sf-fluid-gutter) !important;
}

.public_locations_v4 [data-react-class="Locations"],
.public_locations_v4 [data-react-cache-id^="Locations"],
.public_locations_v4 .locations-v4 {
  width: 100% !important;
  max-width: none !important;
}

.public_locations_v4 .locations-v4__title,
.public_locations_v4 .locations-v4__search,
.public_locations_v4 .locations-v4__container,
.public_locations_v4 .locations-v4__content,
.public_locations_v4 .locations-v4__list,
.public_locations_v4 .locations-v4__pagination {
  width: 100% !important;
  max-width: none !important;
}

.public_locations_v4 .locations-v4__title {
  padding-left: var(--sf-fluid-gutter) !important;
  padding-right: var(--sf-fluid-gutter) !important;
}

.public_locations_v4 .locations-v4__title h1 {
  font-size: clamp(32px, 4vw, 72px) !important;
  line-height: 1.08 !important;
}

.public_locations_v4 .locations-v4__campaign-banner {
  width: 100vw !important;
  max-width: none !important;
  margin-left: calc(50% - 50vw) !important;
  margin-right: calc(50% - 50vw) !important;
  padding-left: 0 !important;
  padding-right: 0 !important;
  border-radius: 0 !important;
  overflow: hidden !important;
}

.public_locations_v4 .locations-v4__campaign-banner a,
.public_locations_v4 .locations-v4__campaign-banner picture,
.public_locations_v4 .locations-v4__campaign-banner img,
.public_locations_v4 .locations-v4__campaign-banner .skeleton {
  display: block !important;
  width: 100% !important;
  max-width: none !important;
}

.public_locations_v4 .locations-v4__campaign-banner img {
  height: auto !important;
  object-fit: cover !important;
  border-radius: 0 !important;
}

.public_locations_v4 .locations-v4__container {
  gap: var(--sf-fluid-gap) !important;
  padding-left: var(--sf-fluid-gutter) !important;
  padding-right: var(--sf-fluid-gutter) !important;
}

.public_locations_v4 .locations-v4__content {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  gap: var(--sf-fluid-gap) !important;
}

.public_locations_v4 .locations-v4__sidebar {
  width: 100% !important;
  min-width: 0 !important;
  max-width: clamp(240px, 18vw, 340px) !important;
}

.public_locations_v4 .locations-v4__list {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 340px), 1fr)) !important;
  justify-content: stretch !important;
  align-items: stretch !important;
  gap: var(--sf-fluid-gap) !important;
}

.public_locations_v4 .locations-v4-location-card {
  width: 100% !important;
  max-width: none !important;
  min-width: 0 !important;
  height: 100% !important;
  border-radius: var(--sf-card-radius) !important;
  overflow: hidden !important;
}

.public_locations_v4 .locations-v4-location-card__figure {
  width: 100% !important;
  height: clamp(190px, 16vw, 320px) !important;
  border-radius: var(--sf-card-radius) var(--sf-card-radius) 0 0 !important;
}

.public_locations_v4 .locations-v4-location-card__figure img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

@media (min-width: 992px) {
  .public_locations_v4 .locations-v4__container {
    align-items: flex-start !important;
    flex-direction: row !important;
  }
}

@media (max-width: 991.98px) {
  .public_locations_v4 .locations-v4__container {
    flex-direction: column !important;
  }

  .public_locations_v4 .locations-v4__sidebar {
    max-width: none !important;
  }
}

/* Landing pages con Bootstrap/ESG. */
.landing_page-show .content-container,
.landing_page-show .container {
  width: 100% !important;
  max-width: none !important;
}

.landing_page-show .row {
  --bs-gutter-x: clamp(20px, 3vw, 56px);
  --bs-gutter-y: clamp(20px, 3vw, 56px);
}

.landing_page-show .row > [class*="col-"] {
  min-width: min(100%, 320px);
}

.landing_page-show .content-container img,
.landing_page-show .container img {
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  object-fit: cover !important;
}

@media (max-width: 720px) {
  :root {
    --sf-fluid-gutter: 16px;
    --sf-section-y: 34px;
  }

  .Top {
    min-height: clamp(300px, 78vw, 560px) !important;
    padding-top: 40px !important;
    padding-bottom: 40px !important;
  }

  .Top.Top--hide-bg {
    min-height: 210px !important;
  }

  #default-slider img,
  .new-home-v4-slider img,
  .new-home-v4-slider__item img {
    height: clamp(300px, 92vw, 560px) !important;
  }

  body.home-index #default-slider img,
  body.home-index .new-home-v4-slider img,
  body.home-index .new-home-v4-slider__item img {
    height: clamp(330px, 100vw, 620px) !important;
  }

  /* El banner movil ya tiene una composicion vertical propia (1080 x 1789).
     Se muestra completo, al ancho disponible y sin el recorte de object-fit. */
  body.home-index #default-slider .new-home-v4-slider__item--mobile {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    aspect-ratio: auto !important;
    object-fit: contain !important;
    object-position: center top !important;
  }

  body.home-index #default-slider :is(
    .slider-swiper,
    .slider-swiper-wrapper,
    .swiper-slide,
    .new-home-v4-slider__item,
    .new-home-v4-slider__item > a
  ) {
    height: auto !important;
    min-height: 0 !important;
  }

  body.home-index .new-home-v4-hero__content,
  body.home-index .new-home-v4-hero__content--mx {
    height: clamp(260px, 70vw, 380px) !important;
  }

  #v4-plans-plans-v2 .smart-ui-plan-card,
  .new-home-v4-training-classes-card,
  .v4-addons-section .v4-addons-card {
    min-height: auto !important;
  }

  .wrapper,
  .intro__wrapper,
  .list-cards,
  .Grid-block,
  .Features__list,
  .locations-v4__list,
  .new-home-v4__app__container {
    grid-template-columns: 1fr !important;
  }
}

/* CTA principales del inicio. */
body.home-index .new-home-v4-experience #home-inscription-button,
body.home-index .new-home-v4-training-classes .new-home-v4-cta-wrapper .smart-ui-button {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: min(100%, clamp(420px, 42vw, 760px)) !important;
  margin-right: auto !important;
  margin-left: auto !important;
  position: relative;
  overflow: visible;
  animation: smartfitCtaPulse 1.8s ease-out infinite;
}

body.home-index .new-home-v4-experience #home-inscription-button {
  margin-top: clamp(24px, 2vw, 36px) !important;
}

body.home-index .new-home-v4-training-classes .new-home-v4-cta-wrapper {
  display: flex;
  justify-content: center;
  width: 100%;
}

@media (max-width: 720px) {
  body.home-index .new-home-v4-experience #home-inscription-button,
  body.home-index .new-home-v4-training-classes .new-home-v4-cta-wrapper .smart-ui-button {
    width: min(100%, 360px) !important;
  }

  body.home-index .new-home-v4-experience #home-inscription-button {
    margin-top: 20px !important;
  }

}

@media (prefers-reduced-motion: reduce) {
  body.home-index .new-home-v4-experience #home-inscription-button,
  body.home-index .new-home-v4-training-classes .new-home-v4-cta-wrapper .smart-ui-button {
    animation: none;
  }

}