@charset "UTF-8";
/* ============================================================
   Header + Footer clonados de Club La Juliana (blex-clj)
   Tokens scoped a header / .main-footer para no pisar el resto
   ============================================================ */

header,
.menu-dropdown-nav,
.mobile-menu-dropdown,
.main-footer {
  --bs-primary: #191e28;
  --bs-accent: #71bbb2;
  --bs-accent-alt: #6db4ac;
  --bs-secondary: #ffffff;
  --bs-white: #ffffff;
  --bs-font-sans: "Poppins", sans-serif;
  --bs-font-weight-normal: 400;
  --btn-primary-bg: var(--bs-accent);
  --btn-secondary-bg: var(--bs-primary);
  --btn-secondary-color: var(--bs-secondary);
  --btn-border-radius: 0 25px 25px 0;
  --btn-width: 160px;
  --btn-height: 45px;
}

/* Tokens de color/fuente para botones fuera del scope header/footer
   (p.ej. el enviar del form en <main>). NO define --btn-width/height
   para no romper anchos propios como .enviar-inscripcion (width:100%). */
.btn-primary,
.btn-secondary,
.btn-outline-primary,
.btn-accent {
  --bs-primary: #191e28;
  --bs-accent: #71bbb2;
  --bs-accent-alt: #6db4ac;
  --bs-secondary: #ffffff;
  --bs-white: #ffffff;
  --bs-font-sans: "Poppins", sans-serif;
  --btn-primary-bg: var(--bs-accent);
  --btn-secondary-bg: var(--bs-primary);
  --btn-secondary-color: var(--bs-secondary);
  --btn-border-radius: 0 25px 25px 0;
}

/* ---------- Utilidades ---------- */
.text-primary-custom { color: #191e28 !important; }
.cursor-pointer { cursor: pointer; }

/* Reset ul dentro del header (blex lo hace global; aquí scoped
   para no romper el resto de Palmera). Evita margin-bottom/padding
   de Bootstrap que descentra el menú respecto a los botones. */
#header ul,
#header li {
  padding: 0;
  margin: 0;
  list-style: none;
}
#header li > a {
  display: inline-flex;
  align-items: center;
}

/* ---------- Botones ---------- */
.btn-primary,
.btn-secondary,
.btn-outline-primary,
.btn-accent {
  font-family: var(--bs-font-sans) !important;
  font-weight: 400 !important;
  width: var(--btn-width) !important;
  height: var(--btn-height) !important;
  border-radius: var(--btn-border-radius) !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  text-align: center !important;
  text-decoration: none !important;
  line-height: 1 !important;
}

.btn-primary {
  background-color: var(--btn-primary-bg) !important;
  color: var(--bs-primary) !important;
  border: solid 1px var(--bs-accent) !important;
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: color 0.4s ease, border-color 0.4s ease;
}
.btn-primary::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 100%;
  background-color: var(--bs-primary);
  transition: width 0.4s ease;
  z-index: -1;
  border-radius: var(--btn-border-radius);
}
.btn-primary:hover::before { width: 100%; }
.btn-primary:hover { color: var(--bs-secondary) !important; }

.btn-secondary {
  background-color: var(--btn-secondary-bg) !important;
  color: var(--btn-secondary-color) !important;
  border: solid 1px var(--btn-secondary-color) !important;
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: color 0.4s ease, border-color 0.4s ease;
}
.btn-secondary::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 100%;
  background-color: var(--bs-accent);
  transition: width 0.4s ease;
  z-index: -1;
  border-radius: var(--btn-border-radius);
}
.btn-secondary:hover::before { width: 100%; }
.btn-secondary:hover { color: var(--bs-primary) !important; }

.btn-outline-primary {
  background-color: transparent !important;
  color: var(--bs-secondary);
  border: 2px solid var(--bs-accent) !important;
  position: relative !important;
  overflow: hidden !important;
  transition: color 0.3s ease !important;
}
.btn-outline-primary::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important; left: -100% !important;
  width: 100% !important; height: 100% !important;
  background-color: var(--bs-accent) !important;
  transition: left 0.3s ease !important;
  z-index: -1 !important;
}
.btn-outline-primary *,
.btn-outline-primary { position: relative !important; z-index: 1 !important; }
.btn-outline-primary:hover::before { left: 0 !important; }

/* Botón Accent */
.btn-accent {
  background-color: var(--bs-accent) !important;
  color: var(--bs-primary) !important;
  border: solid 1px var(--bs-accent) !important;
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: color 0.4s ease, border-color 0.4s ease;
}
.btn-accent::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 100%;
  background-color: var(--bs-secondary);
  transition: width 0.4s ease;
  z-index: -1;
  border-radius: var(--btn-border-radius);
}
.btn-accent:hover::before { width: 100%; }

/* ---------- Dividers ---------- */
.divider-primary { border-color: var(--bs-accent) !important; border-bottom-width: 3px !important; }
.divider-primary-left { border-left: 1.5px solid var(--bs-accent) !important; }
.divider-primary-right { border-right: 1px solid var(--bs-accent) !important; }

/* ============================================================
   HEADER
   ============================================================ */
header {
  position: sticky;
  top: 0;
  background: var(--bs-secondary);
  border-color: transparent;
  padding: 15px;
  transition: all ease 0.5s;
  z-index: 10000 !important;
  width: 100%;
  max-height: 80px;
}
header::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0; bottom: 0;
  box-shadow: 0px 3px 6px #00000029;
  z-index: -1;
  pointer-events: none;
}
header a:hover:not(.btn) { color: var(--bs-accent) !important; transition: all ease 0.5s; }

#desktop-header { display: none !important; }
#mobile-header { display: flex !important; }

.menu-dropdown-nav {
  position: absolute;
  top: 100%; left: 0;
  width: 100%;
  min-height: 300px;
  background: var(--bs-secondary);
  opacity: 0;
  visibility: hidden;
  transition: opacity 0.3s ease, visibility 0.3s ease;
  z-index: 10001;
  pointer-events: none;
  box-shadow: 0px 3px 6px #00000029;
}
.menu-dropdown-nav.active { opacity: 1; visibility: visible; pointer-events: auto; }
.menu-dropdown-content { padding: 40px 0; position: relative; }
.menu-content-left { flex: 1; }
.menu-content { display: none; }
.menu-content.active { display: block; }
.menu-content p,
.menu-login-section p { font-weight: 600; margin-bottom: 0; font-size: 18px; }
.menu-content ul,
.menu-login-section ul { list-style: none; padding: 0; margin: 0; }
.menu-content ul li,
.menu-login-section ul li { padding: 8px 0; cursor: pointer; }
.menu-content ul li:hover a,
.menu-login-section ul li:hover a { color: var(--bs-accent) !important; }
.menu-login-section { position: absolute; min-width: 200px; margin-right: 24px !important; min-height: 200px; }
.nav-menu-dropdown-title { margin-bottom: 20px; }
.menu-login-section.border-start.divider-primary-left {
  padding-left: 0 !important;
  margin-left: -1.5rem;
  padding-left: 1.5rem !important;
}

/* ---------- Mobile menu ---------- */
.mobile-menu-dropdown {
  position: absolute;
  top: 100%;
  height: 100vh;
  left: 0;
  width: 100%;
  background-color: var(--bs-primary);
  z-index: 9999;
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.mobile-menu-dropdown.active { max-height: 100vh; overflow-y: auto; }
body.mobile-menu-open { overflow: hidden; height: 100vh; }
.mobile-menu-container { width: 100%; display: flex; flex-direction: column; min-height: 100vh; }
.mobile-menu-content { flex: 1; padding: 40px 15px; display: flex; flex-direction: column; }
.mobile-menu-item { min-height: 40px; margin-bottom: 20px; }
.mobile-menu-title {
  font-family: var(--bs-font-sans);
  font-size: 18px;
  font-weight: 400;
  color: #ffffff;
  cursor: pointer;
  padding: 2px 0;
  transition: color 0.3s ease;
}
.mobile-menu-title a { color: #ffffff; text-decoration: none; }
.mobile-menu-link {
  color: #ffffff !important;
  text-decoration: none !important;
  border-bottom: 3px solid transparent;
  transition: border-color 0.3s ease;
  padding-bottom: 2px;
}
.mobile-menu-title.active .mobile-menu-link { border-bottom-color: #71bbb2; color: #ffffff !important; }
.mobile-menu-title.active .menu-arrow { transform: rotate(180deg); }
.menu-arrow { width: 12.81px; height: 7.543px; transition: transform 0.3s ease; }
.mobile-submenu { max-height: 0; overflow: hidden; transition: max-height 0.3s ease; }
.mobile-submenu.active { max-height: 300px; margin: 20px 0; }
.mobile-submenu-item {
  display: block;
  font-family: var(--bs-font-sans);
  font-size: 18px;
  font-weight: 400;
  color: #71bbb2;
  text-decoration: none;
  padding: 8px 0;
  transition: color 0.3s ease;
}
.mobile-submenu-item:hover { color: #ffffff; }
.mobile-menu-footer { margin-top: auto; padding-top: 40px; margin-bottom: 70px; }
.mobile-menu-footer .d-flex { gap: 38px; align-items: center; }
.mobile-social-icons { align-items: center; gap: 30px; }

.mobile-header-btn { padding: 8px 12px !important; white-space: nowrap; order: 1; }
.mobile-header-icon-link {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; order: 2; margin-left: 20px;
}
.mobile-header-icon { width: 100%; height: 100%; object-fit: contain; }

#mobile-icon.d-none,
#mobile-icon-simple.d-none,
#mobile-abonate-btn.d-none { display: none !important; }
#mobile-buttons-container.d-none { display: none !important; }
#mobile-buttons-container { transition: opacity 0.3s ease; }

/* ---------- Header desktop (>=1480px) ---------- */
@media (min-width: 1480px) {
  header { max-height: 118px; }
  #burger { width: 28px !important; height: 20px !important; }
  #desktop-header { display: flex !important; padding-inline: 15px !important; }
  #mobile-header { display: none !important; }
  header.scrolling { padding: .5rem 0; }
}

@media (min-width: 992px) {
  .header-nav {
    max-width: 1700px !important;
    margin-left: auto;
    margin-right: auto;
  }
  .header-nav a > img:hover { cursor: pointer; }
}

/* ============================================================
   FOOTER
   ============================================================ */
.main-footer {
  background-color: var(--bs-primary);
  color: white;
  padding: 20px 0;
  font-family: var(--bs-font-sans);
}
/* Separador form -> footer (mismo ancho que .footer-bottom dentro de .footer-container) */
.main-footer::before {
  content: "";
  display: block;
  height: 0;
  border-top: 1.5px solid var(--bs-accent);
  width: calc(100% - 48px);
  margin: 0 auto 40px;
}
@media (min-width: 992px) {
  .main-footer::before { width: calc(100% - 30px); max-width: 1370px; }
}
@media (max-width: 480px) {
  .main-footer::before { width: calc(100% - 30px); }
}
.footer-container { max-width: 100%; padding: 0 24px; margin: 0 auto; }
.footer-header { margin-bottom: 80px; }
.footer-logo { text-align: center; margin-bottom: 32px; }
.footer-logo .logo-white { width: 248.41px; height: 60.86px; }
.footer-contact-info { margin-block: 60px; }
.contact-item {
  display: flex; align-items: center; gap: 8px;
  margin-bottom: 8px; font-size: 16px; color: white; text-decoration: none;
}
.contact-item svg { width: 16px; height: 16px; flex-shrink: 0; color: var(--bs-accent); }
.footer-address { margin-bottom: 40px; display: flex; flex-direction: column; gap: 20px; }
.address-text { margin: 0; font-size: 14px; color: white; line-height: 14px; }
.footer-cta { margin-bottom: 32px; }
.footer-nav-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: repeat(3, auto);
  gap: 32px 24px;
  margin-bottom: 40px;
}
.nav-column:nth-child(1) { grid-column: 1; grid-row: 1; }
.nav-column:nth-child(2) { grid-column: 2; grid-row: 1; }
.nav-column:nth-child(3) { grid-column: 1; grid-row: 2; }
.nav-column:nth-child(4) { grid-column: 2; grid-row: 2; }
.nav-column:nth-child(5) { grid-column: 1; grid-row: 3; }
.nav-column:nth-child(6) { grid-column: 2; grid-row: 3; }
.nav-column { display: flex; flex-direction: column; }
.nav-title { color: white; font-size: 16px; font-weight: 600; }
.nav-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 12px; }
.nav-list a { color: var(--bs-white); text-decoration: none; font-size: 14px; line-height: 1.4; transition: color 0.3s ease; }
.nav-list a:hover { color: var(--bs-accent); }
.footer-bottom { border-top: 1.5px solid var(--bs-accent); padding-top: 24px; }
.footer-legal { margin-bottom: 16px; text-align: center; }
.footer-legal a { color: var(--bs-white); text-decoration: none; font-size: 12px; transition: color 0.3s ease; }
.footer-legal a:hover { color: var(--bs-accent); }
.separator { color: rgba(255, 255, 255, 0.3); margin: 0 8px; font-size: 12px; }
.footer-copyright { text-align: center; }
.footer-copyright p { margin: 0; color: var(--bs-white); font-size: 12px; }

@media (max-width: 480px) {
  .footer-container { padding: 25px 15px 0 15px; }
  .footer-logo .logo-white { width: 200px; }
  .footer-nav-grid { gap: 50px; }
  .footer-legal { display: flex; flex-direction: column; gap: 8px; }
  .separator { display: none; }
}

/* Footer desktop */
@media (min-width: 992px) {
  .footer-container {
    max-width: 1400px;
    padding: 0 15px;
    display: grid;
    grid-template-columns: 1fr 2fr;
    grid-template-rows: auto auto auto;
    gap: 0 20rem;
    grid-template-areas:
      "header newsletter"
      "header nav"
      "bottom bottom";
  }
  .main-footer { padding: 60px 0 30px 0; }
  .footer-header { grid-area: header; margin-bottom: 0; }
  .footer-newsletter { grid-area: newsletter; }
  .footer-logo { text-align: left; margin-bottom: 24px; }
  .footer-logo .logo-white { width: 235px; height: auto; }
  .footer-contact-info { margin-top: 41px; margin-bottom: 60px; }
  .footer-address { margin: 50px 0; }
  .footer-cta { margin-bottom: 0; }
  .footer-nav-grid {
    grid-area: nav;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, auto);
    gap: 40px 60px;
    margin-bottom: 0;
  }
  .footer-nav-grid .nav-column:nth-child(1) { grid-column: 1; grid-row: 1; }
  .footer-nav-grid .nav-column:nth-child(2) { grid-column: 2; grid-row: 1; }
  .footer-nav-grid .nav-column:nth-child(3) { grid-column: 3; grid-row: 1; }
  .footer-nav-grid .nav-column:nth-child(4) { grid-column: 1; grid-row: 2; }
  .footer-nav-grid .nav-column:nth-child(5) { grid-column: 2; grid-row: 2; }
  .footer-nav-grid .nav-column:nth-child(6) { grid-column: 3; grid-row: 2; }
  .footer-bottom {
    grid-area: bottom;
    padding-top: 30px;
    margin-top: 60px;
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
  .footer-copyright { margin-bottom: 0; text-align: left; order: 1; }
  .footer-legal { margin-bottom: 0; text-align: right; order: 2; }
}

/* ---------- Footer Newsletter (XD) ---------- */
.footer-newsletter { margin-bottom: 40px; }
.footer-newsletter-title {
  color: #fff;
  font-size: 20px;
  font-weight: 600;
  margin-bottom: 16px;
  font-family: var(--bs-font-sans);
}
.footer-newsletter-form { display: flex; max-width: 650px; }
.footer-newsletter-input {
  flex: 1;
  background: transparent;
  border: 1px solid #fff;
  border-right: none;
  color: #fff;
  padding: 12px 16px;
  font-size: 14px;
  outline: none;
  border-radius: 0;
  font-family: var(--bs-font-sans);
}
.footer-newsletter-input::placeholder { color: rgba(255, 255, 255, 0.6); }
.footer-newsletter-btn {
  background: var(--bs-accent);
  color: var(--bs-primary);
  border-radius: 0 25px 25px 0px;
  border: solid 1px var(--bs-accent);
  padding: 12px 68px;
  font-family: var(--bs-font-sans);
  font-size: 15px;
  font-weight: 400;
  letter-spacing: 0.5px;
  cursor: pointer;
  white-space: nowrap;
  position: relative;
  overflow: hidden;
  z-index: 1;
  transition: color 0.4s ease, border-color 0.4s ease;
}
.footer-newsletter-btn::before {
  content: "";
  position: absolute;
  top: 0; left: 0;
  width: 0; height: 100%;
  background-color: var(--bs-white);
  transition: width 0.4s ease;
  z-index: -1;
  border-radius: 0 25px 25px 0px;
}
.footer-newsletter-btn:hover { color: var(--bs-primary); }
.footer-newsletter-btn:hover::before { width: 100%; }

/* COOKIES (CookieConsent v3) */
#cc-main {
	--cc-font-family: var(--bs-font-sans-serif);
	--cc-btn-primary-bg: var(--bs-primary);
	--cc-btn-primary-color: var(--bs-white);
	--cc-btn-primary-border-color: var(--bs-primary);
	--cc-btn-primary-hover-bg: var(--bs-primary-light);
	--cc-btn-primary-hover-color: var(--bs-primary);
	--cc-btn-primary-hover-border-color: var(--bs-primary-light);
	--cc-btn-secondary-bg: var(--bs-primary);
	--cc-btn-secondary-color: var(--bs-white);
	--cc-btn-secondary-border-color: var(--bs-primary);
	--cc-btn-secondary-hover-bg: var(--bs-primary-light);
	--cc-btn-secondary-hover-color: var(--bs-primary);
	--cc-btn-secondary-hover-border-color: var(--bs-primary-light);
	--cc-toggle-on-bg: var(--cc-btn-primary-bg);
	--cc-btn-border-radius: 0;
}
#cc-main .cm--box.cm--wide{max-width:40em!important}
#cc-main p{text-align:left!important}
#cc-main .cm__desc{padding-bottom:0!important}
#cc-main .cm__link-group{justify-content:center}
#cc-main .toggle__icon-off,#cc-main .toggle__icon-on{left:0}
#cc-main .pm__body{text-align:left}
#cc-main .cm__btn.cm__btn--secondary[data-role="show"] {
	--cc-btn-secondary-bg: transparent;
	--cc-btn-secondary-color: var(--bs-primary);
	--cc-btn-secondary-border-color: var(--bs-primary);
	--cc-btn-secondary-hover-bg: var(--bs-primary-light);
	--cc-btn-secondary-hover-color: var(--bs-primary);
	--cc-btn-secondary-hover-border-color: var(--bs-primary);
}
#cc-show-preferences-modal {
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	width: 1.75rem;
	z-index: 999;
	padding: .25rem;
	border: 0;
	border-radius: 50%;
	background-color: var(--bs-primary);
	color: var(--bs-white);
}
#cc-show-preferences-modal svg,
#cc-show-preferences-modal img { display: block; width: 100%; }
#cc-show-preferences-modal svg * { fill: var(--bs-white); }