/* Ejemplo: puedes incluir esto en un <style> dentro tu <head> o en una hoja aparte */
#inicio {
  background-color: var(--color-inicio-bg);
}

#inicio h1 {
  background: linear-gradient(90deg, var(--color-inicio-text) 0%, #ffffff 100%);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  background-clip: text;
  color: var(--color-inicio-text); /* Fallback */
}

  #inicio h1, #inicio h2, #inicio h3 {
    font-family: var(--font-title);
  }
  #inicio p, #inicio li, #inicio span, #inicio a {
    font-family: var(--font-text);
  }
  
  #aprender {
    background-color: var(--color-aprender-bg);
  }
  #aprender h2, #aprender h3 {
    color: var(--color-aprender-title);
    font-family: var(--font-title);
  }
  #aprender p {
    color: var(--color-aprender-text);
    font-family: var(--font-text);
  }
  
  #precio {
    background-color: var(--color-precio-bg);
    .card{
        background-color: var(--color-tarjeta-bg);
        h2, h3{
            color: var(--color-precio-title);
            font-family: var(--font-title);
        }
        p, span{
            color: var(--color-precio-text);
            font-family: var(--font-text);
        }
    }
    #countdown div{
        background-color: var(--color-counter-bg);
        color: var(--color-coutner-text);    
    }
  }

  #testimonios {
    background-color: var(--color-testimonios-bg);
  }
  #testimonios h2 {
    color: var(--color-testimonios-title);
    font-family: var(--font-title);
  }
  #testimonios p, #testimonios span {
    color: var(--color-testimonios-text);
    font-family: var(--font-text);
  }
  .color {
    box-shadow: 3px 3px 5px 5px rgba(0,0,0,0.56);
    background-color: var(--color-btn-bg) !important;
    color: var(--color-btn-text) !important;
    transition: background-color 0.2s, color 0.2s;
  }
  .color:hover {
    background-color: var(--color-btn-bg-hover) !important;
    color: var(--color-btn-text) !important;
  }