header *:not(i),
footer *:not(i),
#cms-content *:not(i) {
  font-family: 'Georama', sans-serif !important;
}

/* Hero */

.hero-new-xl {
  .hero-content {
    justify-content: end;
    height: 70%;
    align-items: unset;
  }
}

@media screen and (min-width: 769px) {
  .hero-new-xl {
    .hero-content {
      h1 {
        font-size: 75px;
      }
      h2 {
        font-size: 35px;
      }
    }
  }  
}


@media screen and (max-width: 769px) {
  .hero-new-xl {
    .hero-content {
      max-width: 80%;
      
      h1 {
        font-size: 52px;
      }
      h2 {
        font-size: 30px;
      }
    }
  }  
}

/* Title 2 col */
.title-2-col {
  h2 {
    font-size: 34px;
    margin: 0;
  }

  h3 {
    font-size: 25px;
  }

  p {
    font-size: 18px;
    margin: 0;
  }
}

/* Products */

/* ============================================================
   SECCIÓN "PRODUCTOS" — estilos de tarjetas (section-products)
   ============================================================
*/

.section-products {
  --sp-navy: #0b2e4f;      /* texto principal / títulos */
  --sp-blue: #1565c0;      /* acento de marca / botón primario */
  --sp-blue-dark: #0d47a1;
  --sp-green: #2e7d32;     /* badge "sin licencia" */
  --sp-club: #8a6d1f;      /* badge "members club" */
  --sp-grey-bg: #f4f6f8;   /* fondo de tags */
  --sp-grey-border: #e3e7ec;
  --sp-text-muted: #5b6b7a;
  --sp-radius: 14px;
  --sp-card-shadow: 0 6px 24px rgba(11, 46, 79, 0.08);
 
  padding-top: 3rem;
  padding-bottom: 3rem;
 
  /* Al pasar el StylePlugin de class_name "container" a "content",
     la sección pierde el max-width/centrado automático de Bootstrap.
     Lo replicamos aquí a mano (equivalente al .container de
     Bootstrap 4 en desktop, breakpoint xl). */
  max-width: 1200px;
  margin-left: auto;
  margin-right: auto;
  padding-left: 1rem;
  padding-right: 1rem;
}
 
/* --- Fila de cards: anchos fijos + gap, en vez de porcentajes ---
   Bootstrap reparte .col-md-4 en % del contenedor; si a eso le
   sumas un gap, el total se pasa del 100% y la 3ª card salta de
   línea (lo que viste en la captura). Aquí fijamos un ancho de
   card en px + un gap en px cuya suma nunca supera el max-width
   del container (1140px), y centramos la fila. */
.section-products .row {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 2rem 2.5rem; /* row-gap column-gap */
  margin-left: 0;
  margin-right: 0;
}
 
.section-products .product {
  /* Apilado a ancho completo por debajo de 768px */
  flex: 1 1 100%;
  max-width: 480px;
  padding-left: 0;
  padding-right: 0;
}
 
@media (min-width: 768px) {
  .section-products .product {
    /* 3 cards de 350px + 2 gaps de 40px = 1130px, cabe en 1140px */
    flex: 0 1 350px;
    max-width: 350px;
  }
}
 
.section-products .product {
  display: flex;
  flex-direction: column;
  background-color: #fff;
  border-radius: var(--sp-radius);
  box-shadow: var(--sp-card-shadow);
  border: 1px solid var(--sp-grey-border);
  overflow: hidden;       /* recorta la imagen a las esquinas redondeadas */
  height: 100%;           /* junto con align-items-stretch en el .row, iguala alturas */
}
 
/* --- Imagen (bleed superior, sin márgenes ni padding) --- */
.section-products .product-img {
  position: relative;     /* ancla para el badge */
  background-color: var(--sp-grey-bg);
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
 
.section-products .product-img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
  transition: transform 0.35s ease;
}
 
.section-products .product-img a:hover img {
  transform: scale(1.04);
}
 
/* --- Badge de estado, ahora ENCIMA de la foto --- */
.section-products .product-badge {
  position: absolute;
  top: 1rem;
  left: 1rem;
  z-index: 2;
}
 
.section-products .badge-pill {
  display: inline-block;
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: #fff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.18);
}
 
.section-products .badge--no-license { background-color: var(--sp-green); }
.section-products .badge--license    { background-color: var(--sp-blue); }
.section-products .badge--club       { background-color: var(--sp-club); }
 
/* --- Cuerpo de texto, con el padding de la card --- */
.section-products .product-body {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 1.5rem;
}
 
.section-products .product-meta {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 0.4rem;
}
 
.section-products .product-label {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--sp-blue);
}
 
.section-products .product-number {
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--sp-grey-border);
  line-height: 1;
}
 
.section-products .product-title {
  font-size: 1.3rem;
  font-weight: 700;
  color: var(--sp-navy);
  margin: 0 0 0.5rem;
}
 
.section-products .product-desc {
  font-size: 0.95rem;
  color: var(--sp-text-muted);
  line-height: 1.5;
  margin-bottom: 1rem;
}
 
/* --- Tags secundarios --- */
.section-products .product-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-bottom: 1.5rem;
}
 
.section-products .tag {
  display: inline-block;
  padding: 0.3rem 0.7rem;
  border-radius: 6px;
  background-color: var(--sp-grey-bg);
  color: var(--sp-navy);
  font-size: 0.8rem;
  font-weight: 500;
}
 
/* --- CTA, siempre pegado abajo gracias a margin-top:auto --- */
.section-products .product-cta {
  margin-top: auto;
}
 
.section-products .btn {
  display: inline-block;
  width: 100%;
  text-align: center;
  padding: 0.7rem 1.25rem;
  border-radius: 8px;
  font-weight: 600;
  font-size: 0.95rem;
  text-decoration: none;
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
 
.section-products .btn-primary {
  background-color: var(--sp-blue);
  border: 1px solid var(--sp-blue);
  color: #fff;
}
 
.section-products .btn-primary:hover {
  background-color: var(--sp-blue-dark);
  border-color: var(--sp-blue-dark);
  color: #fff;
}
 
.section-products .btn-outline-primary {
  background-color: transparent;
  border: 1px solid var(--sp-blue);
  color: var(--sp-blue);
}
 
.section-products .btn-outline-primary:hover {
  background-color: var(--sp-blue);
  color: #fff;
}
 
/* --- Responsive --- */
@media (max-width: 767.98px) {
  .section-products .product-number {
    font-size: 1.3rem;
  }
}

/* Members */
.plan-container {
  border-radius: 25px;
  padding: 1.5rem;

  h3 {
    font-size: 36px;
    font-weight: 600;
  }

  p {
    font-size: 16px;
  }

  ul li {
    font-weight: 300;
    padding-left: 10px;
  }

  button.more-info {
    border-radius: 7px;
    color: white;
    font-weight: bold;
  }

  &.silver {
    background-color: #E8E8E8;

    h3, p {
      color: #7D7D7D;
    }

    .more-info {
      background-color: #7D7D7D;
      font-weight: bold;
    }

    ul {
      padding-inline-start: 1.5rem;
    }

    ul li {
      list-style-image: url(/media/filer_public/70/ac/70ac6f1f-1c8a-4f52-aa9a-c07d80809629/silver-diamond.svg);
      color: #7D7D7D;
    }
  }
  &.gold {
    background-color: #EFEBD0;

    h3, p {
      color: #807C65;
    }

    .more-info {
      background-color: #807C65;
      font-weight: bold;
    }

    ul {
      padding-inline-start: 1.5rem;
    }

    ul li {
      list-style-image: url(/media/filer_public/c6/72/c6729a07-902a-4b32-8a68-9f201981251c/diamond-gold.svg);
      color: #807C65;
    }
  }
}

/* FAQs */
.faqs-custom {
  .faq-container {
    h2 {
      display: none;
    }
  }

  .faq-question-block  {
    padding: .5rem;
    border-radius: 15px;
    background-color: #2C9DEC21 !important;
  }
}

/* Contact form */
.contact-new #contact_form input:not([type=checkbox]), .contact-new #contact_form select, .contact-new #contact_form textarea {
  background-color: #2C9DEC21 !important;
}

/* GRecaptcha badge */
.grecaptcha-badge {
  visibility: hidden;
}

/* Footer */

footer {
  padding-top: 3rem;
  border-top: 2px solid #082336;

  .custom-footer-links {
    display: grid;
    font-weight: bold;
    padding-top: 25px;
    grid-template-columns: 1fr 1fr 1fr;
  }
}

@media screen and (max-width: 769px) {
  footer {
    .custom-footer-links {
      grid-template-columns: 1fr 1fr;
    }
  }
}

/* Activity page */
.grid-activity {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 1rem;
  padding-top: 1rem;

  .grid-activity-item {
    display: flex;
    flex-direction: row;
    gap: 1rem;

    p {
      margin: 0;
    }

    img {
      max-width: 50px;
      height: auto;
    }
  }
}

.activity-included {
  ul li {
    list-style: none;
    position: relative;
    padding-left: 24px;
  }

  li::before {
    content: "\f00c";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 0;
    color: #1ABC9C;
  }
}

.activity-not-included {
  ul li {
    list-style: none;
    position: relative;
    padding-left: 24px;
  }

  li::before {
    content: "\f00d";
    font-family: "Font Awesome 5 Free";
    font-weight: 900;
    position: absolute;
    left: 0;
    top: 0;
    color: #dc3545;
  }
}

#extras_container {
  display: none;
}

@media screen and (max-width: 769px) {
  .grid-activity {
    grid-template-columns: 1fr;
  }
}