:root {
  --color-black: #000000;
  --color-pink: #EC1B6A;
  --color-yellow: #FBB527;
  --color-blue: #12B1E1;
  --color-green: #003849;
  --font-family-base: 'Wix Madefor Display';
}

body {
    font-family: var(--font-family-base);
}

/* Modifcación del navbar */
.navbar {
  background-color: transparent !important;
}

.navbar-brand img {
  height: 3.2rem;
  margin-left: 13rem;
}

@media (max-width: 991px) {
  .navbar-brand img {
    margin-left: auto;
  }
}

.navbar a {
  font-family: 'Arimo' !important;
  color: var(--color-black) !important;
  font-weight: 100 !important;
  font-size: 0.8rem;
}

.navbar a:hover {
  color: var(--color-yellow) !important;
}

/* Modificación del dropdown en navbar */
.dropdown-custom-width {
  width: 80px; 
  background-color: #000 !important;
  font-family: 'Arimo' !important;
  text-align: left !important;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
}

.dropdown-item, .dropdown-menu {
  min-width: 80px !important;
  background-color: #000 !important;
}

.dropdown-item, .dropdown-menu a {
color: #fff !important;
text-align: left !important;
font-size: 1rem;
}

.navbar-toggler-icon {
  color: var(--color-pink) !important;
}

/* Sección Hero */

#hero h1{
  color: var(--color-yellow);
  font-family: var(--font-family-base) !important;
  font-weight: 800;
  font-size: 3rem;
  line-height: 1.1;
}

#hero p {
  color: var(--color-black);
  font-family: Helvetica, sans-serif;
  font-size: 1.6rem;
  margin-top: 1rem;
}

/* Sección Info */

/* Imagen ampliada, recortada solo en horizontal */
.info-img-col {
  overflow-x: hidden;
}

.info-img-col img {
  width: 150%;
  max-width: none; /* .img-fluid trae max-width: 100%, hay que anularlo */
  height: auto;
  transform: translateX(-15%);
}

#info-texto {
  background-color: var(--color-yellow);
}

#info-texto h2 {
  font-family: var(--font-family-base) !important;
  font-weight: 700;
  font-size: 2.2rem;
  color: var(--color-black);
  line-height: 1.5;
  padding: 3rem 5rem 2rem 5rem;
}

#info-texto p {
  font-family: 'Lato';
  font-weight: 300;
  font-size: 1.1rem ;
  color: var(--color-black);
  line-height: 1.7;
  padding: 0rem 4rem 0rem 5rem;

}

@media (max-width: 600px) {
  #hero h1 {
    font-size: 2.3rem;
  }

  #hero p {
    font-size: 1.3rem;
  }

  #info-texto h2 {
    font-family: var(--font-family-base) !important;
    font-weight: 700;
    font-size: 1.7rem;
    color: var(--color-black);
    line-height: 1.5;
    padding: 3rem 1rem 2rem 1rem;
  }

  #info-texto p {
    font-family: 'Lato';
    font-weight: 300;
    font-size: 1.3rem;
    color: var(--color-black);
    line-height: 1.9;
    padding: 0rem 0rem 0rem 1rem;
  }
}

/* Sección about */

#about h2 {
  font-family: var(--font-family-base);
  margin-top: 5rem;
  margin-bottom: 3rem;
  text-align: center;
  font-size: 2.4rem;
  color: var(--color-pink);
  font-weight: 300;
  line-height: 1.1;
}

#subtitle {
  font-weight: 500;
  font-size: 1rem;
  text-align: center !important;

}

#about p {
  text-align: justify;
  margin-left: 4rem;
  margin-right: 4rem;
}

#motivation {
  font-weight: 800;
  text-align: center !important;
  font-size: 1.2rem;
  margin-top: 3rem;
  margin-bottom: 4rem;
}

@media (max-width: 600px) {
  #about h2 {
    font-family: var(--font-family-base);
    margin-top: 2rem;
    margin-bottom: 3rem;
    margin-left: 1rem;
    margin-right: 1rem;
    text-align: left;
    font-size: 2.3rem;
    color: var(--color-pink);
    font-weight: 300;
    line-height: 1.1;
  }

  #about p {
    text-align: justify;
    margin-left: 1rem;
    margin-right: 1rem;
    line-height: 1.7;
  }

  #subtitle {
    font-weight: 600;
    font-size: 1.2rem;
    text-align: justify !important;
  }
}

.boton {
  display: flex; 
  justify-content:center; /* Alinea horizontalmente */
  align-items: center; /* alinea verticalmente */

}

.btn {
  border-radius: 2rem !important;
  background-color: var(--color-yellow) !important;
  color: #fff !important;
  font-family: 'Lato' !important;
  font-weight: 300 !important;
  border: none !important;
  transition: background-color 0.2s;
  font-size: 1.2rem !important;
}

.btn-custom:hover, .btn.btn-custom:focus {
  background-color: #3F7652 !important;
  color: #fff !important;
}

/* Sección clases_particulares*/

#clases_particulares h2 {
  font-family: var(--font-family-base);
  margin-top: 5rem;
  margin-bottom: 3rem;
  text-align: start;
  font-size: 2.4rem;
  color: var(--color-pink);
  font-weight: 800;
  line-height: 1.1;
}

  #clases_particulares p {
    text-align: justify;
    line-height: 2;
  }

  @media (max-width: 600px) {
    #clases_particulares p {
      margin-left: 1rem;
      margin-right: 1rem;
    }
  }

/* Sección cards */

#cards {
    background-color: var(--color-blue);
}

.card {
    border: none !important;
    border-radius: 0 !important;
    box-shadow: none !important;
}

.card-img-top {
    border-radius: 0 !important;
}

#cards .card {
    width: 20rem;
    max-width: 100%;
}

#cards .card a {
    color: #000;
}

#cards .card h5 {
    font-size: x-large;
    font-weight: 800;
}


/* Contenedor de la imagen */

#cards .card-image {
    width: 100%;
    height: 320px;
    overflow: hidden;
}


/* Imagen */

#cards .card-image .card-img-top {
    width: 100%;
    height: 100%;
    max-height: none;
    object-fit: cover;
    object-position: 50% 50%;
    display: block;
}


/* Ajuste de la imagen 1 */

#cards .pack-1 {
    transform: translate(5px, 15px) scale(1.1);
}

/* Sección poscast */

#podcast {
    display: grid;
    grid-template-columns: 52% 48%; /* ancho de las columnas */
    grid-template-rows: 500px 270px; /* alto de las filas uno y dos */
    margin-top: 8rem;
}

.imagen {
    grid-column: 1;
    grid-row: 1;
    margin-left: 4rem;
    overflow: hidden;         /* <-- Asegura que la imagen no se salga */
    height: 100%;             /* <-- O usa height: 500px; si quieres un alto fijo */
    display: flex;            /* Opcional: centra la imagen si lo deseas */
    align-items: center;      /* Opcional */
    justify-content: center;  /* Opcional */
}

.carrusel {
    grid-column: 1;
    grid-row: 2;
    margin-left: 4rem;
}

.texto {
    grid-column: 2;
    grid-row: 1 / 3;
    background-color: var(--color-pink);
    margin-right: 4rem;
    color: #fff;
    padding: 3rem 2rem 2rem 3rem;
}

.texto h2 {
  font-family: var(--font-family-base);
  font-size: 1.8rem;
  font-weight:700;
  margin-bottom: 2rem;

}

.texto h5 {
  font-family: var(--font-family-base);
  font-weight:700;
  margin-bottom: 2rem;
}

.texto p {
   line-height: 1.5;
}

/* Ajuste de la imagen 1 */
#podcast img {
    width: 100%;              /* Que la imagen ocupe todo el ancho del contenedor */
    height: 100%;             /* Que la imagen ocupe todo el alto del contenedor */
    object-fit: cover;        /* Recorta la imagen para llenar el contenedor */
    object-position: center;  /* Centra la imagen */
    transform: scale(1.2) translate(40px, -30px); /* Ajusta según lo que necesites */
}

.texto .btn{
  width: 150px !important;
}

@media (max-width: 600px) {
    #podcast {
        grid-template-columns: minmax(0, 1fr); /* minmax(0,...) permite que la columna se encoja; 1fr = minmax(auto,1fr) la expandía */
        grid-template-rows: 400px 270px auto; 
        margin-top: 0;
    }

    .carrusel {
        grid-column: 1;
        grid-row: 1;
        margin-left: 0;
    }

    .imagen {
        grid-column: 1;
        grid-row: 2;
        margin-left: 0;
        margin-right: 0;
    }

    .texto {
        grid-column: 1;
        grid-row: 3;
        margin-right: 0;
        padding: 3rem 1rem 2rem 1.5rem;
    }

    #podcast > * {
        min-width: 0; /* los items de grid tienen min-width:auto: no deben ensanchar la columna */
    }

    /* Tres botones en una fila: 3 x 80px + 2 x 8px = 256px, cabe desde 320px de ancho */
    #podcast .boton {
        gap: 0.5rem !important; /* anula gap-3 de Bootstrap, que usa !important */
    }

    #podcast .texto .btn {
        width: 80px !important;
        padding-left: 0.25rem;
        padding-right: 0.25rem;
        font-size: 0.85rem !important; /* anula el 1.2rem !important de .btn */
    }

    #podcast img {
    width: 100%;              /* Que la imagen ocupe todo el ancho del contenedor */
    height: 100%;             /* Que la imagen ocupe todo el alto del contenedor */
    object-fit: cover;        /* Recorta la imagen para llenar el contenedor */
    object-position: center;  /* Centra la imagen */
    transform: scale(1.1) translate(15px, 11px); /* Ajusta según lo que necesites */
  }

    .testimonio {
    padding: 0rem 2rem 0rem 2rem !important;
    font-family: var(--font-family-base);
  }

  
}


/* Carrusel de testimonios */

.rosado {
  color: var(--color-pink)
}

.carrusel .carousel,
.carrusel .carousel-inner,
.carrusel .carousel-item {
  height: 100%;
}

.testimonio {
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 1.5rem 3rem 3rem 3rem; /* lateral: deja libres las flechas; inferior: deja libres los puntos */
  overflow-y: auto;
  color: #fff;
  text-align: center;
}

/* Centrado vertical que no recorta el contenido si desborda */
.testimonio > :first-child { margin-top: auto; }
.testimonio > :last-child  { margin-bottom: auto; }

.testimonio-texto {
  font-size: 0.95rem;
  line-height: 1.5;
  margin-bottom: 0.75rem;
  color: #000;
  font-family: var(--font-family-base);
  font-weight: 500;
}

.testimonio-autor {
  font-weight: 700;
  margin-bottom: 0;
}


/* Indicadores: cuadrados pequeños */

.carrusel .carousel-indicators [data-bs-target] {
  box-sizing: content-box;
  width: 6px;
  height: 6px;
  margin: 0 3px;
  padding: 6px;                 /* área clicable mayor que el cuadrado visible */
  border: 0;                    /* anula el borde transparente de Bootstrap */
  background-color: var(--color-yellow);
  background-clip: content-box; /* el color solo se pinta en el cuadrado, no en el padding */
  border-radius: 0;
  opacity: 1;                   /* anula el opacity: .5 de Bootstrap */
  transition: background-color 1s ease-in-out;
}

.carrusel .carousel-indicators .active {
  background-color: var(--color-blue);
}

/* Transición crossfade de 1 segundo */

.carousel-fade .carousel-item {
  transition: opacity 1s ease-in-out;
}

.carousel-fade .active.carousel-item-start,
.carousel-fade .active.carousel-item-end {
  opacity: 0;
  transition: opacity 1s ease-in-out;
}

/* Sección steam (espejo de podcast) */
/* Reutiliza las clases .texto, .carrusel e .imagen; se sobrescribe la
   posición en la grilla con #steam (mayor especificidad que la clase sola) */

#steam {
  display: grid;
  grid-template-columns: 48% 52%; /* ancho de las columnas (inverso a podcast) */
  grid-template-rows: 500px 300px; /* fila 1: texto (alto automático), fila 2: carrusel */
  margin-bottom: 4rem;
}

#steam .texto {
  grid-column: 1;
  grid-row: 1 / 3;
  background-color: var(--color-blue);
  margin-left: 0rem;
  margin-right: 0;
}

#steam .carrusel {
  grid-column: 2;
  grid-row: 2;
  margin-right: 4rem;
}

#steam .imagen {
  grid-column: 2;
  grid-row: 1;
  margin-left: 0;
  margin-right: 4rem;
}

/* El botón es más largo que los de podcast: se anula el ancho fijo de .texto .btn */
#steam .texto .btn {
  width: 250px !important;
}

#steam .testimonio {
  padding: 1.5rem 3rem 3rem 3rem;
}

/* Ajuste de la imagen stementoras.jpg: modifica scale y translate */
#steam img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.5) translate(-70px, 20px); /* Ajusta según lo que necesites */
}

@media (max-width: 600px) {

  #steam {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 300px auto 500px; /* imagen, texto, carrusel */
  }

  #steam > * {
    min-width: 0;
  }

  #steam .texto .btn {
    max-width: 100%; /* el ancho de 250px de escritorio no debe superar el contenedor */
  }

  #steam .imagen {
    grid-column: 1;
    grid-row: 1;
    margin-left: 0;
    margin-right: 0;
  }

  #steam .texto {
    grid-column: 1;
    grid-row: 2;
    margin-left: 0;
    padding: 3rem 1rem 2rem 1.5rem;
  }

  #steam .carrusel {
    grid-column: 1;
    grid-row: 3;
    margin-left: 0;
    margin-right: 0; /* anula el margin-right: 4rem heredado de escritorio */
    margin-top: 0;
  }

  #steam img {
    transform: scale(1) translate(0px, 0px); /* Ajusta según lo que necesites */
  }

  #steam .testimonio {
    padding: 0rem 2rem 0rem 2rem !important; /* igual que el carrusel de podcast */
  }

}

/* Sección FAQ */


.faq-section {
  font-family: var(--font-family-base);
  color: var(--color-black);
  padding: 4rem 0;
}
 
.faq-container {
  max-width: 900px;
}
 
/* Ancho del bloque "General" + acordeón (en móvil ocupa todo el ancho disponible) */
.faq-content {
  max-width: 690px;
  margin-inline: auto;
}
 
.faq-title {
  font-weight: 500;
  margin-bottom: 2.5rem;
}
 
/* Categoría "General" + raya inferior */
.faq-category {
  display: inline-block;            /* la raya solo cubre el texto */
  color: var(--color-yellow);
  font-size: 1rem;
  font-weight: 400;
  padding: 0.75rem 1.25rem;
  margin-bottom: 1.5rem;
  border-bottom: 3px solid var(--color-yellow);
}
 
/* ---------- Acordeón (sobrescribe variables de Bootstrap) ---------- */
.faq-accordion {
  --bs-accordion-color: var(--color-black);
  --bs-accordion-bg: transparent;
  --bs-accordion-border-color: var(--color-black);
  --bs-accordion-border-width: 1px;
  --bs-accordion-border-radius: 0;
  --bs-accordion-inner-border-radius: 0;
 
  --bs-accordion-btn-color: var(--color-black);
  --bs-accordion-btn-bg: transparent;
  --bs-accordion-btn-padding-y: 1.9rem;
  --bs-accordion-btn-padding-x: 1.5rem;
  --bs-accordion-active-color: var(--color-black);
  --bs-accordion-active-bg: transparent;
  --bs-accordion-btn-focus-border-color: var(--color-black);
  --bs-accordion-btn-focus-box-shadow: none;
 
  /* Flecha hacia abajo; Bootstrap la rota 180deg al abrir */
  --bs-accordion-btn-icon: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='%23000000' stroke-width='1' stroke-linecap='round' stroke-linejoin='round'%3e%3cpath d='M1.5 5l6.5 6.5L14.5 5'/%3e%3c/svg%3e");
  --bs-accordion-btn-active-icon: var(--bs-accordion-btn-icon);
  --bs-accordion-btn-icon-width: 1.25rem;
  --bs-accordion-btn-icon-transform: rotate(-180deg);
}
 
/* Cada ítem como caja independiente con separación */
.faq-accordion .accordion-item {
  border: 1px solid var(--color-black);
  margin-bottom: 0.75rem;
}
 
.faq-accordion .accordion-header {
  margin: 0;
  font-size: inherit;
}
 
.faq-accordion .accordion-button {
  font-family: var(--font-family-base);
  font-size: 1.3rem;
  font-weight: 500;
  box-shadow: none;
}
 
/* Foco visible por teclado (accesibilidad) */
.faq-accordion .accordion-button:focus-visible {
  outline: 2px solid var(--color-black);
  outline-offset: -4px;
}
 
.faq-accordion .accordion-body {
  padding: 0.25rem 1.5rem 1.9rem;
  line-height: 1.6;
}
 
.faq-accordion .accordion-body p:last-child {
  margin-bottom: 0;
}
 
.faq-accordion .accordion-body a {
  color: var(--color-black);
}
 
/* Listas anidadas del apartado "sistema de pago" */
.faq-accordion .accordion-body ol > li > p {
  margin-bottom: 0.5rem;
}
 
.faq-accordion .accordion-body ol > li + li {
  margin-top: 0.75rem;
}
 
@media (max-width: 576px) {
  .faq-section { padding: 2.5rem 0; }
  .faq-accordion .accordion-button { font-size: 1rem; }
}


/* Sección contact */

.contact-section {
  font-family: var(--font-family-base);
  color: #fff;
}
 
/* ---------- Columna izquierda ---------- */
.contact-info {
  background-color: var(--color-yellow);
  padding: 3rem 1.5rem;
}
 
.contact-heading,
.contact-lead {
  max-width: 19rem;
  margin: 0 0 1.5rem;
  font-size: 1.2rem;
  font-weight: 700;
  line-height: 1.4;
}
 
.contact-list {
  margin: 2rem 0;
  padding: 0;
  line-height: 1.6;
}
 
.contact-info a {
  color: #fff;
  text-decoration: underline;
}
 
.contact-address {
  margin: 2.5rem 0;
  line-height: 1.8;
}
 
.contact-email {
  margin-bottom: 2rem;
  line-height: 1.4;
}
 
.contact-email a {
  font-weight: 700;
  text-decoration: none;
}
 
.contact-social {
  display: flex;
  gap: 1rem;
  margin: 0;
  padding: 0;
}
 
.contact-social a {
  font-size: 1.4rem;
  text-decoration: none;
}
 
/* ---------- Columna derecha ---------- */
.contact-form-wrap {
  background-color: var(--color-pink);
  padding: 3rem 1.5rem;
}
 
.contact-form {
  max-width: 610px;
  margin-inline: auto;
}
 
.contact-label {
  display: block;
  margin-bottom: 0.25rem;
  font-size: 0.875rem;
}
 
.contact-required {
  color: var(--color-black);
}
 
.contact-form .form-control {
  border: 0;
  border-radius: 0;
  background-color: #fff;
  color: var(--color-black);
  font-family: inherit;
  padding: 0.5rem 0.75rem;
}
 
.contact-form .form-control:focus {
  box-shadow: 0 0 0 3px var(--color-yellow);
}
 
.contact-form textarea.form-control {
  resize: vertical;
  min-height: 5.5rem;
}
 
.contact-submit {
  width: 100%;
  padding: 0.5rem 1rem;
  border: 0;
  border-radius: 50rem;
  background-color: var(--color-yellow);
  color: #fff;
  font-family: inherit;
  font-size: 0.875rem;
  cursor: pointer;
}
 
.contact-submit:hover {
  filter: brightness(0.95);
}
 
.contact-submit:focus-visible {
  outline: 2px solid #fff;
  outline-offset: 3px;
}
 
.contact-submit:disabled {
  opacity: 0.7;
  cursor: wait;
}
 
.contact-status {
  margin: 1rem 0 0;
  text-align: center;
  font-weight: 700;
}
 
/* ---------- Escritorio ---------- */
@media (min-width: 992px) {
  .contact-info {
    padding: 7rem 3rem 4rem 4.5rem;
  }
 
  .contact-form-wrap {
    padding: 9rem 3rem 4rem;
  }
}

/* Sección Footer */

.site-footer {
  font-family: var(--font-family-base);
  padding: 3.5rem 0 3rem;
  background-color: #fff;
}
 
.footer-logo {
  display: inline-block;
}
 
.footer-logo img {
  display: block;
  max-width: 100%;
  height: auto;
}
 
.footer-privacy {
  display: block;
  margin-top: 2.5rem;
  color: var(--color-black);
  font-size: 0.75rem;
  text-transform: uppercase;
  text-decoration: underline;
}
 
.footer-privacy:hover,
.footer-privacy:focus-visible {
  color: var(--color-black);
  text-decoration-thickness: 2px;
}
 
/*  Página Política de privacidad */

.legal-page {
  font-family: var(--font-family-base);
  color: var(--color-black);
  padding: 4rem 0 3rem;
}
 
.legal-container {
  max-width: 860px;
}
 
.legal-back {
  display: inline-block;
  margin-bottom: 2rem;
  color: var(--color-black);
  font-size: 0.875rem;
}
 
.legal-page h1 {
  font-size: 2rem;
  font-weight: 700;
  margin-bottom: 2.5rem;
}
 
.legal-page h2 {
  font-size: 1.25rem;
  font-weight: 700;
  margin: 2.5rem 0 1rem;
}
 
.legal-page h3 {
  font-size: 1.05rem;
  font-weight: 700;
  margin: 1.75rem 0 0.75rem;
}
 
.legal-page p,
.legal-page li {
  line-height: 1.7;
}
 
.legal-page a {
  color: var(--color-black);
}
 
@media (max-width: 576px) {
  .legal-page { padding: 2.5rem 0 2rem; }
  .legal-page h1 { font-size: 1.5rem; }
}

/* Característica especial del Navbar (solo escritorio): fijo, transparente al bajar y oculto al subir */

@media (min-width: 992px) {

  header {
    min-height: 7rem; /* ajustar a la altura real del navbar */
  }

  #site-navbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1030;
    transition: opacity 0.3s ease, background-color 0.3s ease, visibility 0s linear 0s;
  }

  /* Bootstrap aplica .bg-* con !important, por eso se necesita aquí también */
  #site-navbar.is-scrolled {
    background-color: transparent !important;
    box-shadow: none;
  }

  /* visibility retrasada: el navbar sale del orden de tabulación tras el fundido */
  #site-navbar.is-hidden {
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity 0.3s ease, background-color 0.3s ease, visibility 0s linear 0.3s;
  }


}

@media (min-width: 992px) and (prefers-reduced-motion: reduce) {
  #site-navbar,
  #site-navbar.is-hidden {
    transition: none;
  }
}

#site-navbar.is-scrolled {
  background-color: rgba(255, 255, 255, 0.9) !important;
}

/* Cookie consent (vanilla-cookieconsent): colores y tipografía del sitio */

#cc-main {
  --cc-font-family: var(--font-family-base), sans-serif;
  --cc-btn-primary-bg: var(--color-pink);
  --cc-btn-primary-border-color: var(--color-pink);
  --cc-btn-primary-hover-bg: var(--color-green);
  --cc-btn-primary-hover-border-color: var(--color-green);
  --cc-btn-secondary-hover-bg: #f1f1f1;
  --cc-toggle-on-bg: var(--color-pink);
}

/* Botón del footer que reabre las preferencias */
.footer-cookies {
  display: block;
  margin: 1rem auto 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--color-black);
  font-family: inherit;
  font-size: 0.75rem;
  text-transform: uppercase;
  text-decoration: underline;
  cursor: pointer;
}

.footer-cookies:hover,
.footer-cookies:focus-visible {
  text-decoration-thickness: 2px;
}