*{
     padding: 0;
     margin: 0;
     box-sizing: border-box;
}

.fondo-negro {
  border: 1px solid #143872;
  border-radius: 20px;
  background-color: black;
  background-size: cover; /* Asegura que la imagen cubra todo el área */
  background-position: center; /* Centra la imagen */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
  /*height: 50vh; /* Ajusta la altura según tus necesidades */
}

.fondo-cursos {
  border: 1px solid #143872;
  border-radius: 20px;
  background-color: var(--colorlogo);
  background-size: cover; /* Asegura que la imagen cubra todo el área */
  background-position: center; /* Centra la imagen */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
  /*height: 50vh; /* Ajusta la altura según tus necesidades */
}


.fondo-footer {
  /*background-image: url(../img/parallax/fondoverde.png); /* Ruta de la imagen */
  background-color: black;
  background-size: cover; /* Asegura que la imagen cubra todo el área */
  background-position: center; /* Centra la imagen */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
  /*height: 50vh; /* Ajusta la altura según tus necesidades */
}

.fondo-personalizado {
  background-image: url(../img/solofondo.png); /* Ruta de la imagen */
  background-size: cover; /* Asegura que la imagen cubra todo el área */
  background-position: center; /* Centra la imagen */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
  height: 50vh; /* Ajusta la altura según tus necesidades */
}

.fondo-seccion {
  background-image: url(../img/parallax/solofondov.png); /* Ruta de la imagen */
  background-size: cover; /* Asegura que la imagen cubra todo el área */
  background-position: center; /* Centra la imagen */
  background-repeat: no-repeat; /* Evita que la imagen se repita */
  /*height: 50vh; /* Ajusta la altura según tus necesidades */
}


:root{
     --brown-dark: #4b301f;
     --brown-medium: #99745c;
     --gray-dark: #54595f;
     --gray-medium: #999;
     --gray-light: #f0f0f0;
	 --colorlogo: #325572;
	 --colorazul: #1d427d;
	 --azulover:#243e67; 
     --white: #fff;
	 --verdeagua: #0F3;
	 --sabermas: #214989;
	 --verdexls: #207245;
     --z-modal: 1000;
     font-size: 20px;
} 
:focus,
button:focus { outline: none; }
body{
     background-color: var(--colorazul);
     font-family: 'Raleway Light';
}
.title, 
.subtitle,
.title-table-th{
     /*color: var(--brown-medium);*/
     color: var(--white);
     font-family: 'Raleway Medium';
     letter-spacing: 6px;
}
.txt-brown-medium{ color: var(--brown-medium);}
.title{ font-size: 1.9rem;}
.subtitle{
     padding: .8em 0;
     margin-bottom: 0;
     font-size: 1.7rem; 
}

.subtitle2{
	 /*color: var(--brown-medium);*/
     color: var(--white);
     font-family: 'Raleway Medium';
     letter-spacing: 6px;
     padding: .8em 0;
     margin-bottom: 0;
     font-size: 1.1rem; 
}

.title-table-th{
     letter-spacing: 1px;
     font-size: .7rem;
}
/* ----------FONTS---------- */
@font-face{
     font-family: 'Raleway Bold';
     src: url(../fonts/Raleway-Bold.ttf);
}
@font-face{
     font-family: 'Raleway Medium';
     src: url(../fonts/Raleway-Medium.ttf);
}
@font-face{
     font-family: 'Raleway Light';
     src: url(../fonts/Raleway-Light.ttf);
}
/*------------- Navbar -------------*/
.navbar.scrolled{
     background-color: rgba(36,62,103,1);
     box-shadow: 0px 2px 10px 0px rgba(0,0,0,0.2);
}
.navbar{
     background-color: rgba(23,80,86,0);
     transition: background-color .4s ease;
}
.navbar-brand{
     color: var(--brown-medium);
     font-size: 2.5rem;
     font-weight: 500;
     letter-spacing: 4px;
     transition: .5s ease;
}
.navbar-brand:hover{ color: var(--brown-dark);}
.nav-link{
     color: var(--white);
     font-size: .7rem;
     letter-spacing: 1px;
}
.nav-link:hover{ color: var(--verdeagua);}

/*---------- Parallax IMG ----------*/
.img-parallax{
     height: 75vh;
     background: right 40%/cover fixed url(../img/parallax/slidealixel8.png);
     position: relative;
     z-index: 10;
}
.img-parallax::before,
.categorie::before{
     content: "";
     width: 100%; height: 100%;
     left: 0; top: 0;
     position: absolute;
     background-color: rgba(0,0,0,.3);
     z-index: -10;
}
.img-parallax .title-parallax{
     font-size: 3.5rem;
     letter-spacing: 10px;
}
.img-parallax .text-parallax{
     /*font-size: .8rem;*/
	 font-size: 1rem;
     letter-spacing: 1px;
}
.img-parallax .link-parallax{
     font-size: .9rem;
     letter-spacing: 2px;
     transition: all .3s linear;
     border: 2px solid;
     padding: 6px;
}
.img-parallax .link-parallax:hover{
     background-color: #000;
     color: #fff;
     text-decoration: none;
     border: 2px solid #000;
}

/*---------- Parallax2 IMG ----------*/
.img-parallax2{
     height: 75vh;
     background: right 40%/cover fixed url(../img/parallax/slidealixel9.png);
     position: relative;
     z-index: 10;
}
.img-parallax2::before,
.categorie2::before{
     content: "";
     width: 100%; height: 100%;
     left: 0; top: 0;
     position: absolute;
     background-color: rgba(0,0,0,.3);
     z-index: -10;
}
.img-parallax2 .title-parallax2{
     font-size: 3.5rem;
     letter-spacing: 10px;
}
.img-parallax2 .text-parallax2{
     /*font-size: .8rem;*/
	 font-size: 1rem;
     letter-spacing: 1px;
}
.img-parallax2 .link-parallax2{
     font-size: .9rem;
     letter-spacing: 2px;
     transition: all .3s linear;
     border: 2px solid;
     padding: 6px;
}
.img-parallax2 .link-parallax2:hover{
     background-color: #000;
     color: #fff;
     text-decoration: none;
     border: 2px solid #000;
}

.resplandor-borde {
  box-shadow: 0 0 30px #007bff; /* Ajusta el color (ej. azul) a tu gusto */
}


/* SECTION */
/* -------PARA BENEFICIOS:CARD SIN BORDE------- */

.cardcur{
	border: none;
    border-radius: 0;
    padding: .5em;
    position: relative;
    overflow: hidden;
}

.tarjetas{
	background-color: #243e67;
	border: 1px solid #143872;
	color: #fff;
    border-radius: 20px;
    padding: .5em;
    position: relative;
    overflow: hidden;
}
/*FIN SECCIÓN CURSOS DESTACADOS*/




/* SECTION */
/* -------CURSOS DESTACADOS------- */

.card{
	background-color:transparent;
    border: 1px solid #143872;
    border-radius: 0;
    padding: .5em;
    position: relative;
    overflow: hidden;
}
.card:hover .btn-add-car{ transform: translateY(0);}
.card-img-top{ border-radius: 0; vertical-align: top;}
.card-body{ padding: 1rem 0 1.5rem;}
.card-title,
.card-text{
     font-weight: 400;
}
.card-title{ 
     font-size: .95rem;
     margin-bottom: .4rem;
}
.card-title a{ 
     color: var(--white);
     transition: .7s ease;
}
.card-title a:hover{
     text-decoration: none;
     color: var(--verdeagua);
}
.card-text{
     font-size: .9rem;
     color: var(--white);
}
.card-text-price::before,
.symbol-dollar::before{ content: "$";}
.btn-add-car{
     padding: .3em .4rem;
     border: 1px solid var(--white);
     background-color: transparent;
     color: var(--white);
     transition: .35s linear;
     cursor: pointer;
}
.btn-add-car::before{
     content: "\f518";
     font-family: "Font Awesome 5 Free"; 
     font-weight: 900; 
}
.card .btn-add-car{
     transform: translateY(90px);
     width: 66%;
}
.btn-add-car:hover{
     border: 1px solid var(--verdexls);
     /*background-color: transparent;*/
     text-decoration: none;
     color: var(--white);
     background-color: var(--verdexls);
}
/* ----------CATEGORIE---------- */
.categorie{
     height: 40vh;
     position: relative;
     overflow: hidden;
     z-index: 10;
}
.categorie::before{
     background-color: rgba(0,0,0,.35);
     transition:1s ease ;
}
.categorie:hover::before{
     background-color: rgba(0,0,0,.7);
}
.categorie:first-of-type{ 
     background: left bottom/cover url(../img/categories/necklace.jpeg);
}
.categorie:nth-child(2){
     background: left top/cover url(../img/categories/bracelet.jpeg);
}
.categorie:nth-child(3){
     background: center/cover url(../img/categories/destacado_manuales.png);
}
.categorie:last-of-type{
     background: right 80%/cover url(../img/categories/diploma2.png);
}
.categorie-link{
     width: 100%; height: 100%;
}
.categorie-link:hover{
     text-decoration: none;
}
.categorie-link h2{
     width: 100%;
     padding-bottom: .5rem;
     font-weight: 400;
     font-size: 3rem;
     letter-spacing: 5px;
     position: relative;
}
.categorie-link h2::before{
     content: "";
     display: block;
     width: 0; height: 3px;
     position: absolute;
     left: 0; bottom: 0;
     background-color: var(--brown-medium);
     transition: .3s ease;
}
.categorie:hover h2::before{
     width: 100%;
}
/* -------PROMOTION------- */
.promotions .subtitle{
     font-weight: 300;
     letter-spacing: 2px;
     font-size: 1.6rem;
}
.promotions .promotion-description, 
.description{
     font-size: .9rem;
     letter-spacing: 1px;
     line-height: 1.5rem;
	 color: var(--white);
}

/* ---------FOOTER---------- */
.nav-footer a,
.tab-content p{
     font-size: .8rem;
}

/*-----PRODUCT-ONLY.HTML-----*/
.slider-nav img{
    cursor: pointer;
    transition: all .3s linear;
}
.slider-nav img:hover{
    transform: scale(.9);
}
.products-in-stock{
     font-size: .8rem;
}
.input-quantity-products{
     border: 1px solid var(--brown-medium);
     width: 5rem;
}
a.btn-add-car{ color: #fff;}

/* -------- car .---------- */
.table-img-product{
     width: 80px;
}
.form-total-car h2.subtitle{
     letter-spacing: 1px;
     font-size: .9rem;
     font-weight: 600;
}
.form-total-car .subtitle{
     font-size: .8rem;
     letter-spacing: 1px;
     font-weight: 500;
}
.form-total-car [readonly]{
     background-color: transparent;
     border: none;
}
.form-total-car .btn-proceed-check{
     background-color: var(--brown-dark);
     border: 2px solid var(--brown-dark);
     color: #fff;
     font-size: .85rem;
     font-weight: 500;
     letter-spacing: 1px;
     transition: .7s ease;
}
.form-total-car .btn-proceed-check:hover, 
.btn-coupon:hover {
     background-color: transparent;
     color: var(--brown-medium);
     border: 2px solid var(--brown-medium);
}
.car-tbody a,
.car-tbody{
     font-size: .9rem;
}
.car-tfoot{
     background-color:rgba(153, 116, 92, 0.15) ;
     font-size: .9rem;
}
.btn-coupon {
     background-color: var(--brown-medium);
     color: var(--white);
     padding: .2rem .3em;
     border: 2px solid var(--brown-medium);
     transition: .5s ease;
}

/* CART STYLES */
.submenu{ position: relative;}
.submenu .shopping-cart{
     display: none;
     transition: .7s ease;
}
.submenu:hover .shopping-cart{
     display: block;
     opacity: 1;
     position: absolute;
     right: 0; top: 100%;
     z-index: var(--z-modal);
     background-color: var(--white);
     min-height: 390px;
     max-height: 390px;
     min-width: 350px;   
     overflow: auto;
}
.submenu .shopping-cart th{
     background-color: var(--white);
     position: sticky;
     top: 0;
}
.shopping-cart{
     padding: .7em;
}
.submenu > i{
     position: relative;
     left: 10px;
}
.btn-car{
     transition: .6s ease;
     border-radius: 5px;
     font-size: .9rem;
}
.show-car{ background-color: var(--brown-dark);}
.empty-cart{
     color: var(--brown-dark);
     background-color: var(--white);
}
.delete-product {
     font-size: .8rem;
     background-color: var(--brown-dark);
     border-radius: 100%;
     display: inline-block;
     width: 30px;
     height: 30px;
     text-align: center;
     color: var(--white);
     transition: .5s ease;
 }
 .delete-product:hover,
 .btn-car:hover{
      text-decoration: none;
      color: var(--white);
      background-color: var(--brown-medium);
 }
 .delete-product::before{
     content: "\f00d";
     font-weight: 900; 
     font-family: "Font Awesome 5 Free"; 
 }
 .cart-list{
     margin: .4rem 1em;
 }
 .cart-list .infoProduct img {
    width: 70px;
    padding: 10px 0;
 }
 .cart-list .infoProduct .title{
      font-size: .8rem;
      letter-spacing: 0;
 }
.cart-list thead th{
     font-size: .8rem;
     padding: 0 10px;
}
/* CAR.html */
.img-table-product{
     width: 75px;
}


/* PARA LOGO*/

.header{
width:30%;
float:left;
border-radius:0px;

 }
 
.header img{
 width:240px;
 padding:30px;
   }