/* === Estilos específicos Mezcla Online === */
#mezcla-online{
  background:#fff;
  padding:3em 5%;
  /* Evitar líneas/separadores del tema al final del bloque */
  border:0 !important;
  box-shadow:none !important;
}
#mezcla-online::before,
#mezcla-online::after{
  display:none !important;
}

#mezcla-online header{
  margin-bottom:1.8em;
  text-align:left;
}

/* Título principal del temario (verde lima de la web) */
#mezcla-online > header h2{
  display:inline-block;
  margin:0 0 1em 0;
  padding:0.6em 1em;
  font-weight:700;
  letter-spacing:.05em;
  background:#B5BD00;   /* verde lima */
  color:#fff;
  border-radius:6px;
  font-size:1.4em;
}

#mezcla-online header p{
  margin-top:.8em;
  color:#7a8186;
}

#mezcla-online h3{
  margin:1.2em 0 .6em 0;
  font-size:1.4em;
  color:#3E4442;
  letter-spacing:.05em;
}

#mezcla-online ul{
  list-style:none;
  padding-left:0;
  margin:0 0 1.2em 0;
}

/* Separadores entre ítems (clases y puntos internos) */
#mezcla-online li{
  position:relative;
  padding:.6em 1em .6em 2.2em;
  border-bottom:1px solid #dadcde;
  color:#3E4442;
  list-style:none;
}

/* Sin raya en el último ítem de cada lista */
#mezcla-online li:last-child{
  border-bottom:none;
}

/* Sin raya al final de cada módulo (última clase del <ul> principal) */
#mezcla-online .contenido-modulo > ul > li:last-child{
  border-bottom:none;
}

/* Acordeón */
#mezcla-online details{ margin:1rem 0; }
#mezcla-online summary{
  cursor:pointer;
  font-size:1.25rem;
  font-weight:600;
  line-height:1.3;
  padding:.4rem 0;
  color:#3E4442;
  outline:none;
}
#mezcla-online summary::-webkit-details-marker{ display:none; }
#mezcla-online summary::marker{ content:""; }
#mezcla-online .contenido-modulo{ margin-top:.4rem; }

/* Check verde (Font Awesome) */
#mezcla-online li:before{
  content:"\f00c";
  font-family:"Font Awesome 5 Free";
  font-weight:900;
  position:absolute;
  left:.6em;
  top:.7em;
  line-height:1;
  color:#80B763;
}

/* Énfasis y notas */
#mezcla-online strong{ color:#3E4442; }
#mezcla-online p em{ color:#7a8186; }

/* Píldora verde opcional */
#mezcla-online .pill{
  display:inline-block;
  font-size:.9em;
  font-weight:700;
  letter-spacing:.05em;
  background:#80B763;
  color:#fff;
  padding:.25em .55em;
  border-radius:999px;
}

/* Responsive */
@media (max-width:736px){
  #mezcla-online{ padding:2em 1.25em; }
  #mezcla-online h2{ font-size:1.2em; }
  #mezcla-online h3{ font-size:1.15em; }
  #mezcla-online li{ padding:.6em .5em .6em 2em; }
}


/* === Bloques de requisitos (Mezcla + Mástering) === */
#mezcla-online,
#mastering-online{
  background:#fff;
  padding:2.5em 2em;
  border-radius:6px;
  /* quitamos la línea base del tema en estos bloques */
  box-shadow:none;
  margin:2.5em auto;
  max-width:980px;
}

/* Cabecera tipo “píldora” oscura con texto blanco SOLO para mastering */
/* Título del bloque mastering en verde lima */
#mastering-online > header h2 {
  display:inline-block;
  margin:0 0 1em 0;
  padding:0.6em 1em;
  background:#B5BD00;   /* verde lima de la web */
  color:#fff;
  border-radius:6px;
  letter-spacing:0.02em;
  font-size:1.4em;
}

/* Subtítulo bajo el h2 */
#mezcla-online > header p,
#mastering-online > header p{
  margin:0 0 1.25em 0;
  color:#555;
}

/* Listas con checks y separadores (si usas req-list) */
#mezcla-online .req-list li,
#mastering-online .req-list li{
  position:relative;
  padding:0.8em 0 0.8em 2em;
  border-top:1px solid #e6e6e6;
  line-height:1.6;
}
#mezcla-online .req-list li:first-child,
#mastering-online .req-list li:first-child{ border-top:0; }
#mezcla-online .req-list li::before,
#mastering-online .req-list li::before{
  content:"✔";
  position:absolute;
  left:0;
  top:0.8em;
  font-weight:700;
  color:#80B763;
}

/* Enlaces */
#mezcla-online a,
#mastering-online a{
  font-weight:700;
  text-decoration:none;
  border-bottom:1px dotted #80B763;
}
#mezcla-online a:hover,
#mastering-online a:hover{
  border-bottom-color:transparent;
}

/* Variante “píldora” verde (si la quieres usar en mastering) */
#mastering-online > header h2.alt{
  background:#B5BD00;
  color:#fff;
}


/* === Álbumes === */
.album-grid{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:20px;
  margin-top:30px;
}
.album-card{
  width:250px;
  border-radius:6px;
  overflow:hidden;
  box-shadow:0 4px 10px rgba(0,0,0,0.15);
  background:#fff;
  transition:transform 0.3s ease, box-shadow 0.3s ease;
}
.album-card:hover{
  transform:scale(1.05);
  box-shadow:0 6px 16px rgba(0,0,0,0.25);
}
.album-cover{ width:250px; height:250px; display:block; object-fit:contain; }
.album-info{
  display:flex; align-items:center; gap:10px;
  background:#BDCC37; padding:8px; font-size:.9rem; color:#000;
}
.album-info i{ font-size:1.5rem; color:#333; }


/* === Botón WeTransfer === */
.button.wetransfer-pill{
  background:#B5BD00;
  color:#fff !important;
  display:inline-block;
  padding:0.85em 1.4em;
  border-radius:12px;
  font-weight:700;
  letter-spacing:.02em;
  text-decoration:none !important;
  border:none;
  box-shadow:0 1px 0 #9CA200;
}
.button.wetransfer-pill:hover{
  background:#9CA200;
  color:#fff !important;
}


/* === Imagen a la derecha === */
.img-derecha{
  float:right;
  width:100px;
  height:auto;
  margin:0 0 10px 10px;
}


/* === Botones genéricos === */
.btn-link{
  display:inline-block;
  padding:0.6em 1.2em;
  border:none;
  border-radius:5px;
  background-color:#B5BD00;  /* verde lima de la web */
  color:#fff;
  font-size:1em;
  cursor:pointer;
  text-decoration:none;
  text-align:center;
}
.btn-link:hover{
  background-color:#ffffff; /* verde lima más oscuro en hover */
}
.btn-link:hover{ background-color:#000000; }


/* === Texto precios: reset negrita === */
.intro-compact p{ font-weight:normal !important; }


/* === YouTube grid === */
.videos-grid{
  display:grid;
  grid-template-columns:1fr;
  gap:20px;
}
.video-wrapper{
  position:relative;
  padding-bottom:56.25%; /* 16:9 */
  height:0;
  overflow:hidden;
}
.video-wrapper iframe{
  position:absolute;
  top:0; left:0;
  width:100%; height:100%;
  border:0;
}
@media (min-width:768px){
  .videos-grid{ grid-template-columns:1fr 1fr; }
}


/* === Botón Hotmart === */
.btn-hotmart{
  display:inline-block;
  background-color:#BDCC37;
  color:#fff;
  font-size:18px;
  font-weight:bold;
  padding:14px 28px;
  border-radius:8px;
  text-decoration:none;
  transition:background .3s ease;
}
.btn-hotmart:hover{ background-color:#a7b62e; }


/* === Formulario de contacto: mostrar siempre checkboxes === */
#contact-form input[type="checkbox"]{
  -webkit-appearance:checkbox !important;
  appearance:checkbox !important;
  display:inline-block !important;
  position:static !important;
  opacity:1 !important;
  visibility:visible !important;
  width:auto !important;
  height:auto !important;
  margin:0 .5rem 0 0 !important;
  background:none !important;
  box-shadow:none !important;
}
#contact-form .checks label{
  display:flex;
  align-items:center;
}


/* === Botón banner cookies (Aceptar, Rechazar, Más info) === */
#cookie-banner button,
#cookie-banner .cookie-info-btn,
#cookie-banner .cookie-info-btn:link,
#cookie-banner .cookie-info-btn:visited,
#cookie-banner .cookie-info-btn:hover,
#cookie-banner .cookie-info-btn:active{
  display:inline-block;
  padding:6px 12px;
  margin:4px;
  background:#BDCC37 !important;  /* mismo verde */
  border:1px solid #ccc;
  color:#fff !important;          /* texto blanco */
  text-decoration:none !important;
  border-radius:4px;
  font-family:inherit;
  font-size:1em;
  font-weight:normal;
  width:100px;
  text-align:center;
  height:40px;
}

/* Hover consistente */
#cookie-banner button:hover,
#cookie-banner .cookie-info-btn:hover{
  background:#9CA200 !important;
  color:#fff !important;
}



/* Aviso en el formulario de contacto con estilo verde lima */
#contact-form fieldset.error {
  border: none !important;
  background: rgba(181, 189, 0, 0.15); /* verde lima muy suave */
  padding: 1em;
  border-radius: 6px;
}

#contact-form #checks-error {
  color: #B5BD00 !important;   /* verde lima corporativo */
  font-weight: 600;
  margin-top: 0.5em;
  display: block;
}


/* botones, colores */

a.btn-hotmart:hover,
.btn-hotmart:hover {
  background-color: #000 !important;
  color: #fff !important;
  transition: all 0.3s ease;
}
input[type="submit"].button:hover,
.button:hover {
  background-color: #000 !important;
  color: #fff !important;
  transition: all 0.3s ease;
}









