/*Pantalla de carga*/
    .loading { overflow: hidden; }
    #loader { position: fixed;  top: 0; left: 0;  width: 100vw; height: 100vh; background-color: #785664; display: flex; justify-content: center; align-items: center; z-index: 999;
    } 
    .spinner{ animation: scaleup 1s infinite; } 
    @keyframes scaleup { 0% { transform: scale(1); } 70% { transform: scale(1.07); } 100% { transform: scale(1); }}

@font-face { font-family: 'Patua One'; src: url('font/PatuaOne.ttf') format('truetype');}

@font-face { font-family: 'Bad Script Regular'; src: url('font/BadScript.ttf') format('truetype');}

@font-face { font-family: 'Bree Serif Regular'; src: url('font/BreeSerif-Regular.ttf') format('truetype');}

body{ font-family:'Bree Serif Regular' ; font-size: 18px; text-align: center; text-align-last: center; color: #722d3b; background-color: #f9f4f4;}

/*Padding secciones*/ #incio, .inicio, .instrucciones, #modelos, #precio, .faq{ padding: 50px 10px 50px 10px;}

/*Navbar*/ .navbar{ background-color: #785664;}

.navbar a{ color: #ffffff;}

.navbar-brand img{ height: 52px; width: 208px; margin: auto;}

/*Scrollbar*/
::-webkit-scrollbar { height: 10px;}
::-webkit-scrollbar-track { background: none;}
::-webkit-scrollbar-thumb {  background: rgba(0, 0, 0, 0); background-color: #785664;}
::-webkit-scrollbar-thumb:hover { background: #785664;}
/*Fondos*/
#inicio, #modelos{ background: #CDB3B2; background: linear-gradient(291deg,rgba(205, 179, 178, 1) 0%, rgba(236, 207, 191, 1) 51%, rgba(171, 128, 140, 1) 100%);}
/*Inicio*/
#inicio{ color: #722d3b;}
#inicio img{
  width: 60%;
  height: auto;
  margin: auto;
  transform: translatex(30px);
  animation: heroParallax 1.4s ease-out forwards;
}
@keyframes heroParallax {
  to {
    transform: translatex(0);
  }
}

.grid{  display: grid; grid-template-columns: 1fr; gap: 2rem;  margin: 0 auto;}
.grid-item{ position: relative; justify-self: center; }
.grid-item.one{  margin-bottom: -30px;}
.grid-item.two{ z-index: 5;}
.grid-item.three{  padding: 50px 10px 10px 10px;  background-color: rgba(255, 255, 255, 0.5); border: 2px solid #722d3b; border-radius: 30px; transform: translateY(-80px);  z-index: 2;}

h1{ text-transform: uppercase; font-family: 'Patua One'; text-align: center; }

h3{ font-family: 'Bad Script Regular';}

/*Divider*/
.divider{  padding: 25px 10px 25px 10px;  background-color:#785664 ; color: #ffffff; font-family: 'Bad Script Regular';}
/*Bordes*/
.wpp, .info-item, .cartel, .disclaimer{ background-color: #efe8e8;  border: 10px solid #ffffff;}
/*Instrucciones*/
.wpp{  display: grid; place-items: center; height: 200px; border-radius: 30px; width: auto; padding:15px; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px;}
.wpp.number{height: 60px; width: 60px; margin: auto; margin-top: -35px; padding: 10px; border-radius: 50%; border: none; background-color: #732c3d; color: white;}
/*Boton*/
.button{ width: 300px; height: 50px; padding: 15px; border-radius: 15px; color: #f9f4f4; background-color: #722d3b; box-shadow: rgba(0, 0, 0, 0.24) 0px 3px 8px; text-decoration: none; animation: pulse 2s infinite; }
.button:hover{ transform: scale(1.05); transition: all .2s ease-in-out;}
@keyframes pulse { 0% { transform: scale(1); box-shadow: 0 0 0 0 rgba(58,11,25,.5); }  70% { transform: scale(1.05); box-shadow: 0 0 0 12px rgba(58,11,2,0);} 100% { transform: scale(1); box-shadow: 0 0 0 0 rgba(58,11,2,0); } }
/*Modelos*/
.info-scroll { display: grid; grid-auto-flow: column; grid-auto-columns: 150px; gap: 1rem; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 0.5rem;}
.info-item { height: 170px; border-radius: 15% 15% 50% 50%; display: flex; flex-direction: column; justify-content: center; align-items: center; text-align: center;  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px; scroll-snap-align: start; }
@keyframes hintScroll { 0%   { transform: translateX(0); } 50%  { transform: translateX(-40px); } 100% { transform: translateX(0); }}
.info-scroll { animation: hintScroll 3s ease-in-out infinite; }
.info-scroll:hover { animation-play-state: paused;}
#modelos img{ width: 90%; height: auto; margin-top: 25px;}
.textomodelo{ padding: 20px;}
/*Reviews*/
.reviews{ overflow-x: hidden; width: 100%;}
/*Precio*/
.cartel{ height: 60vh; border-radius: 30px; padding: 20px; margin-top: 20px; margin-bottom: 20px;}
.num{ font-size: 35px; background-color: #ffffff; border-radius: 30px; box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;}
/*FAQ*/
.accordion{  --bs-accordion-bg: rgba(0,0,0,0); --bs-accordion-active-bg: none; --bs-accordion-active-color: #722d3b; --bs-accordion-border-color:rgba(0,0,0,0); --bs-accordion-btn-focus-box-shadow:none; --bs-accordion-color:#722d3b; 
}
.accordion-item{  margin-top: 10px;}
.accordion-header{ background-color: rgba(0, 0, 0, 0); text-transform: uppercase; border-bottom: solid; border-width: 1px;}
.accordion-button{ text-transform: uppercase;}
/*Footer*/
footer{ padding: 20px; background-color: #785664; color: #ffffff;}
footer a{ color: #ffffff;}
.marca{ font-size: 15px; text-transform: uppercase;}
/*Página modelos*/
.disclaimer{ padding: 15px; margin: 50px;}
.producto-grid{ display: flex; flex-wrap: wrap; justify-content: center; gap: 16px;}
.producto{ flex: 1 1 calc(50% - 16px);  box-sizing: border-box; text-align: center;transition: transform 0.3s ease, box-shadow 0.3s ease; opacity: 0; transform: translateY(30px);animation: aparecer 0.6s forwards;}
.producto p{ padding: 5px 0px 25px 0px;}
.producto img{ width: 100%;  max-width: 195px; height: auto; border-radius: 12px; transition: transform 0.3s ease;}
.producto:hover { transform: translateY(-8px);}
.producto:hover img { transform: scale(1.03);}
@keyframes aparecer { to { opacity: 1; transform: translateY(0); }}
footer img{  width: 80%;  margin: auto;}

@media (min-width: 768px) {
.grid { grid-template-columns: 2fr 1fr; grid-template-rows: auto auto;}
.grid-item.one { grid-column: 1; grid-row: 1; transform: translateY(50px); }
.grid-item.three { transform: translateY(-20px);  padding: 15px; grid-column: 1; grid-row: 2;}
.grid-item.two { transform: rotate(5deg); grid-column: 2; grid-row: 1 / span 2; align-self: center;margin-left: -100px; z-index: 3; }
.producto{ flex: 1 1 calc(25% - 16px); }
}

@media (min-width: 1024px){
.inicio, .instrucciones,.modelos, .reviews, .precio, .faq{ width: 80%; margin: auto; }
.accordion-body{ text-align: left;}
.cartel{ height: 75vh;} 
footer img{ width: 40%; margin: auto;}
}

@media (min-width: 1440px){
  .inicio, .instrucciones, .modelos,.reviews, .precio, .faq{ width: 60%; margin: auto; }
}