/*=============================================
Colores
=============================================*/
:root {
  /* PRIMARIO - Verde profundo */
  --primario:               #05693a;
  --primario-hover:         #048c4b;
  --primario-active:        #03502e;
  --primario-subtle:        #d6f5e5;
  --primario-focus:         #05693a99; /* 60% opacidad */
  --primario-subtle-focus:  #b2e5cc;

  /* SECUNDARIO - Naranja vibrante */
  --secundario:             #f26422;
  --secundario-hover:       #ff7d47;
  --secundario-active:      #c14d1a;
  --secundario-subtle:      #ffe5d6;
  --secundario-focus:       #f2642299; /* 60% opacidad */
  --secundario-subtle-focus:#fcd3bd;

  /* AUXILIAR - Marrón elegante */
  --auxiliar:               #825f45;
  --auxiliar-hover:         #a77a5a;
  --auxiliar-active:        #5a3f2d;
  --auxiliar-subtle:        #f0e6e0;
  --auxiliar-focus:         #825f4599;
  --auxiliar-subtle-focus:  #dbcbbf;

    /* PRIMARY */
    --primary:                  #41528a;
    --primary-soft:             #6b7ab0;
    --primary-subtle:           #dadde8;
    --primary-hover:            #354579;
    --primary-active:           #2c3a66;
    --primary-focus:            #354579;
    --primary-subtle-focus:     #c4c9dd;

    /* SECONDARY */
    --secondary:                #3577f2;
    --secondary-soft:           #6d9cf4;
    --secondary-subtle:         #dce7fc;
    --secondary-hover:          #2d67d1;
    --secondary-active:         #2659b5;
    --secondary-focus:          #2d67d1;
    --secondary-subtle-focus:   #c8dbfb;

    /* SUCCESS */
    --success:                  #0bb39c;
    --success-soft:             #44c6b3;
    --success-subtle:           #ceede9;
    --success-hover:            #099881;
    --success-active:           #077c6a;
    --success-focus:            #099881;
    --success-subtle-focus:     #b7e4dd;

    /* INFO */
    --info:                     #2a9ddb;
    --info-soft:                #5ab4e3;
    --info-subtle:              #d9eefa;
    --info-hover:               #248bc4;
    --info-active:              #1d78aa;
    --info-focus:               #248bc4;
    --info-subtle-focus:        #c6e4f8;

    /* WARNING */
    --warning:                  #f7b84a;
    --warning-soft:             #f9c76d;
    --warning-subtle:           #faeedc;
    --warning-hover:            #dea741;
    --warning-active:           #c89038;
    --warning-focus:            #dea741;
    --warning-subtle-focus:     #f8e0bc;

    /* DANGER */
    --danger:                   #f06448;
    --danger-soft:              #f48671;
    --danger-subtle:            #fce3de;
    --danger-hover:             #d7583f;
    --danger-active:            #bd4832;
    --danger-focus:             #d7583f;
    --danger-subtle-focus:      #f8cec7;

    /* LIGHT */
    --light:                    #f5f7fa;
    --light-soft:               #fafbfd;
    --light-subtle:             #ffffff;
    --light-hover:              #e4e6eb;
    --light-active:             #d5d8dd;
    --light-focus:              #e4e6eb;
    --light-subtle-focus:       #f0f2f6;

    /* DARK */
    --dark:                     #212529;
    --dark-soft:                #4a4f56; 
    --dark-subtle:              #d6d6d6; 
    --dark-hover:               #1a1e23;
    --dark-active:              #111417;
    --dark-focus:               #1a1e23;
    --dark-subtle-focus:        #c0c0c0;
}

html, body {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/*=============================================
Bordes
=============================================*/
.border-1{
  border: 1px solid;
}
.border-2{
  border: 2px solid;
}
.border-3{
  border: 3px solid;
}
.border-4{
  border: 4px solid;
}
.border-5{
  border: 5px solid;
}

    /*=============================================
    Ribbon
    =============================================*/
    .ribbon-box .ribbon {
        position: absolute;
        right: -5px;
        top: -5px;
        z-index: 1;
        overflow: hidden;
        width: 75px;
        height: 75px;
        text-align: left;
    }
    .ribbon-box .ribbon span {
        font-size: 13px;
        color: #fff;
        text-align: center;
        line-height: 20px;
        -webkit-transform: rotate(45deg);
        transform: rotate(45deg);
        width: 100px;
        display: block;
        position: absolute;
        top: 19px;
        right: -21px;
        font-weight: 600;
    }
    .ribbon-box .ribbon span:before {
        content: "";
        position: absolute;
        right: 0;
        top: 100%;
        z-index: -1;
        border-left: 3px solid transparent;
        border-bottom: 3px solid transparent;
    }
    .ribbon-box .ribbon span:after {
        content: "";
        position: absolute;
        left: 0;
        top: 100%;
        z-index: -1;
        border-right: 3px solid transparent;
        border-bottom: 3px solid transparent;
    }