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

body{
    font-family:'Poppins',sans-serif;
    color: #333333;
    background:white;
}

h1,
h2{
    font-family:'Playfair Display',serif;
}

a{
    text-decoration:none;
}

img{
    max-width:100%;
    display:block;
}

header{
    width:100%;
    background:white;
    box-shadow:0 0.18em 0.9em #00000014;
}

.navbar{
    width:90%;
    margin:auto;
    padding:1.25em 0;
    display:flex;
    justify-content:space-between;
    align-items:center;
}

.logo a{
    font-family:'Playfair Display',serif;
    font-size:2.2rem;
    color: #5A189A;
}


.logo span{
    color: #7B2CBF;
}

.menu{
    display:flex;
    gap:2em;
    list-style:none;
}

.menu a{
    color:#333;
    font-weight:500;
    transition:.3s;
}

.menu a:hover{
    color: #7B2CBF;
}

.iconos{
    display:flex;
    gap:2em;
}

.iconos a{
    color: #7B2CBF;
    font-size:1.2rem;
    transition:.3s;
}

.iconos a:hover{
    color: #D4AF37;
    transform:translateY(-0.5em);
}

.caja{
    min-height:90vh;
    padding:3em 8%;
    display:flex;
    align-items:center;
    justify-content:space-between;
    background:linear-gradient(135deg, white, #F3E8FF);
}

.caja-texto{
    width:50%;
}

.etiqueta{
    color: #7B2CBF;
    font-weight:600;
    margin-bottom:15px;
    display:inline-block;
    padding:0.5em 1em;
    border-radius:2em;
    font-size:1em;
    font-weight:bold;
}

.vendido{
    background:#FFE8D6;
    color:#E85D04;
}

.nuevo{
    background:#D8F3DC;
    color:#2D6A4F;
}

.favorito{
    background:#FFF3BF;
    color:#C77D00;
}

.exclusivo{
    background:#F3E8FF;
    color:#7B2CBF;
}

.tendencia{
    background:#E0FBFC;
    color:#4361EE;
}

.caja h1{
    font-size:4rem;
    line-height:1.2;
    color:  #5A189A;
}

.caja h1 span{
    color: #7B2CBF;
}

.caja p{
    margin:1.8em 0;
    line-height:1.8;
    font-size:1.1rem;
}

.caja-imagen{
    width:40%;
}

.caja-imagen img{
    border-radius:50%;
    box-shadow: 0 1em 2.5em #7b2cbf40;
}


.btn{
    padding:1em 2em;
    border-radius:1.8em;
    background: #7B2CBF;
    color: white;
    font-weight:600;
    transition:.3s;
}


.btn:hover{
    transform:translateY(-0.5em);
}

.btn-secundario{
    display:inline-block;
    margin-left:1em;
    padding:1em 2em;
    border:2px solid #7B2CBF;
    color: #7B2CBF;
    border-radius:1.8em;
    transition:.3s;
}

.btn-secundario:hover{
    background: #7B2CBF;
    color:white;
}

.beneficios{
    background: #7B2CBF;
    color: white;
    padding: 3em 8%;
    display: grid;
    grid-template-columns: repeat(4,1fr);
    gap: 1.8em;
    text-align: center;
}

.beneficio{
    padding:1.2em;
}

.beneficio i{
    font-size:2.8em;
    color: #D4AF37;
    margin-bottom:1em;
}

.beneficio h3{
    margin-bottom:1em;
}

.beneficio p{
    line-height:1.6;
}

.titulo{
    text-align:center;
    margin-bottom:3.7em;
}

.titulo span{
    color: #7B2CBF;
    font-weight:600;
    text-transform:uppercase;
    letter-spacing:0.1em;
}

.titulo h2{
    font-size:3rem;
    color: #5A189A;
    margin:1em 0;
}

.titulo p{
    width:60%;
    margin:auto;
}

.nosotros{
    display:flex;
    justify-content:space-between;
    align-items:center;
    padding:6em 8%;
    gap:3.7em;
}

.nosotros-imagen{
    width:45%;
}

.nosotros-imagen img{
    border-radius:1.5em;
    box-shadow:0 1.2em 2.4em #0000001f;
}

.nosotros-texto{
    width:50%;
}

.nosotros-texto span{
    color: #7B2CBF;
    font-weight:600;
}

.nosotros-texto h2{
    font-size:2.8rem;
    color: #5A189A;
    margin:1.2em 0;
}

.nosotros-texto p{
    line-height:2;
    margin-bottom:1.8em;
}

.destacados{
    background: #f7f5fa;
    padding:5.2em 8%;
}

.contenedor-productos{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:2em;
}

.producto{
    background:white;
    border-radius:1.2em;
    overflow:hidden;
    box-shadow:0 0.6em 1.5em #00000014;
    transition:.4s;
}

.producto:hover{
    transform:translateY(-0.6em);
}

.producto img{
    width:100%;
    height:17.5em;
    object-fit:cover;
    transition:.5s;
}

.producto:hover img{
    transform:scale(1.08);
}

.producto h3{
    padding:1.2em 1.2em 0.6em;
    color: #5A189A;
}

.producto p{
    padding:0 1.2em;
    line-height:1.7;
}

.producto a{
    display:inline-block;
    margin:1.2em;
    color: #7B2CBF;
    font-weight:600;
}

.producto h4{
    font-size:1.8em;
    color:#7B2CBF;
    margin:1.2em 0;
}

.ver-mas{
    margin-top:3em;
}

.estadisticas{
    background:linear-gradient(45deg, #7B2CBF, #5A189A);
    color:white;
    padding:2.5em 8%;
    display:grid;
    grid-template-columns:repeat(4,1fr);
    text-align:center;
}

.dato h2{
    font-size:3rem;
    color: #D4AF37;
}

.dato p{
    margin-top:0.6em;
}

.tendencias{
    padding:5.2em 8%;
}

.tendencias-contenedor{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1.8em;
}

.tendencia{
    border-radius:1.2em;
    overflow:hidden;
    background:white;
    box-shadow:0 0.5em 1.2em #00000014;
    transition:.3s;
}

.tendencia:hover{
    transform:scale(1.03);
}

.tendencia img{
    height:16.2em;
    width:100%;
    object-fit:cover;
}

.tendencia h3{
    padding:1.2em;
    color: #5A189A;
}

.tendencia p{
    padding:0 1,2em 1.5em;
    line-height:1.7;
}

.opiniones{
    padding:5.2em 8%;
    background: #f7f5fa;
}

.opiniones-contenedor{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1.8em;
}

.comentario{
    background:white;
    padding:2em;
    border-radius:1.2em;
    box-shadow:0 0.5em 1.2em #00000014;
    transition:.3s;
}

.comentario:hover{
    transform:translateY(-0.6em);
}

.estrellas{
    color:#FFD700;
    font-size:1.4em;
    margin: 1em 0;
}

.comentario p{
    line-height:1.8;
    margin-bottom:1.8em;
}

.comentario h3{
    color: #7B2CBF;
}

.beneficios-producto{
    list-style:none;
    margin:1.8em 0;
}

.beneficios-producto li{
    margin-bottom:0.5em;
    color:#555;
}

.galeria{
    padding:5.2em 8%;
}

.galeria-contenedor{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1.8em;
}

.galeria-contenedor img{
    width:100%;
    height:17.5em;
    object-fit:cover;
    border-radius:1.8em;
    transition:.4s;
}

.galeria-contenedor img:hover{
    transform:scale(1.05);
    box-shadow:0 0.6em 2em #00000033;
}

.newsletter{
    background:linear-gradient(45deg, #7B2CBF, #5A189A);
    padding:5em 8%;
    text-align:center;
    color:white;
}

.newsletter h2{
    font-size:2.8rem;
    margin-bottom:1.8em;
}

.newsletter p{
    margin-bottom:1.8em;
}

.newsletter form{
    display:flex;
    justify-content:center;
    gap:1em;
    flex-wrap:wrap;
}

.newsletter input{
    width:21.8em;
    padding:1em;
    border:none;
    border-radius:1.8em;
    outline:none;
}

.newsletter button{
    padding:1em 1.8em;
    border:none;
    border: radius 1.8em;;
    background: #D4AF37;
    color:white;
    font-weight:bold;
    cursor:pointer;
    transition:.3s;
}

.newsletter button:hover{
    transform:scale(1.05);
}

.footer{
    background:#2b1240;
    color:white;
    padding:2.5em 8% 1.8em;
}

.footer-contenedor{
    display:grid;
    grid-template-columns:2fr 1fr 1fr;
    gap:2.5em;
}

.footer h2,
.footer h3{
    margin-bottom:1.2em;
}

.footer p{
    line-height:1.8;
}

.footer ul{
    list-style:none;
}

.footer ul li{
    margin-bottom:0.7em;
}

.footer ul li a{
    color:white;
    transition:.3s;
}

.footer ul li a:hover{
    color: #D4AF37;
}

.redes{
    margin-top:1.5em;
}

.redes a{
    width:2.8em;
    height:2.8em;
    display:inline-flex;
    justify-content:center;
    align-items:center;
    border-radius:50%;
    background:white;
    color: #7B2CBF;
    margin-right:0.6em;
    transition:.3s;
}

.redes a:hover{
    background: #D4AF37;
    color:white;
    transform:translateY(-0.2em);
}

.footer-final{
    border-top:0.1em solid #ffffff33;
    margin-top:2.5em;
    padding-top:1.5em;
    text-align:center;
}

@media(max-width:992px){
.caja,
.nosotros{
    flex-direction:column;
}

.cajatexto,
.caja-imagen,
.nosotros-imagen,
.nosotros-texto{
    width:100%;
    text-align:center;
}

.beneficios,
.estadisticas,
.contenedor-productos,
.tendencias-contenedor,
.opiniones-contenedor,
.galeria-contenedor,
.footer-contenedor{
    grid-template-columns:repeat(2,1fr);
}

.titulo p{
    width:100%;
}
}

@media(max-width:768px){
.navbar{
    flex-direction:column;
    gap:1.2em;
}

.menu{
    flex-direction:column;
    align-items:center;
}

.caja h1{
    font-size:2.5rem;
}

.beneficios,
.estadisticas,
.contenedor-productos,
.tendencias-contenedor,
.opiniones-contenedor,
.galeria-contenedor,
.footer-contenedor{
    grid-template-columns:1fr;
}

.newsletter input{
    width:100%;
}

.btn,
.btn-secundario{
    display:block;
    margin:1em auto;
    text-align:center;
}
}

.equipo{
    padding:5.2em 8%;
    background:#ffffff;
}

.equipo-contenedor{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:2em;
}

.miembro{
    background:white;
    border-radius:1.2em;
    overflow:hidden;
    text-align:center;
    box-shadow:0 0.6em 1.5em #00000014;
    transition:.4s;
}

.miembro:hover{
    transform:translateY(-0.6em);
}

.miembro img{
    width:100%;
    height:20em;
    object-fit:cover;
}

.miembro h3{
    margin-top:1.2em;
    color: #5A189A;
}

.cargo{
    color: #7B2CBF;
    font-weight:600;
    margin:0.6em 0;
}

.miembro p{
    padding:0 1.2em 1.2em;
    line-height:1.7;
}

.elegirnos{
    padding:5.2em 8%;
    background: #f7f5fa;
}

.elegirnos-contenedor{
    display:grid;
    grid-template-columns:repeat(3,1fr);
    gap:1.8em;
}

.elegir{
    background:white;
    padding:2em;
    border-radius:1.2em;
    text-align:center;
    box-shadow:0 0.5em 1.2em #00000014;
    transition:.3s;
}

.elegir:hover{
    transform:translateY(-0.6em);
}

.elegir i{
    font-size:3em;
    color: #7B2CBF;
    margin-bottom:1.2em;
}

.elegir h3{
    color: #5A189A;
    margin-bottom:1em;
}

.elegir p{
    line-height:1.8;
}

.contacto{
    padding:5.2em 8%;
    display:grid;
    grid-template-columns:1fr 1fr;
    gap:3.7em;
    align-items:start;
}

.info-contacto h2{
    color: #5A189A;
    margin-bottom:1.2em;
}

.info-contacto p{
    line-height:1.8;
    margin-bottom:1.8em;
}

.dato-contacto{
    display:flex;
    align-items:center;
    gap:1em;
    margin-bottom:1.2em;
    font-size:1.1em;
}

.dato-contacto i{
    color: #7B2CBF;
    font-size:1.3em;
}

.formulario{
    background:white;
    padding:2em;
    border-radius:1.2em;
    box-shadow:0 0.6em 1.5em #00000014;
}

.formulario input,
.formulario textarea{
    width:100%;
    padding:1em;
    margin-bottom:1.2em;
    border:1px solid #ddd;
    border-radius:0.6em;
    font-size:1em;
    outline:none;
}

.formulario input:focus,
.formulario textarea:focus{
    border:0.1em solid #7B2CBF;
}
.formulario button{
    border:none;
    cursor:pointer;
}

.ubicacion{
    padding:5.2em 8%;
}

.mapa{
    margin-top:2.5em;
    box-shadow:0 0.6em 1.5em #00000014;
    border-radius:1.2em;
}

.faq{
    padding:5.2em 8%;
    background: #f7f5fa;
}

.pregunta{
    background:white;
    padding:1.5em;
    margin-bottom:1.2em;
    border-radius:1em;
    box-shadow:0 0.3em 1em #00000014;
}

.pregunta h3{
    color: #5A189A;
    margin-bottom:0.6em;
}

.pregunta p{
    line-height:1.7;
}

.redes-contacto{
    padding:5.2em 8%;
    text-align:center;
}

.redes-contacto h2{
    color: #5A189A;
    margin-bottom:1.2em;
}

.redes-contacto p{
    margin-bottom:1.8em;
}

.tendencias,
.consejos{
    padding:5.2em 8%;
}

.tendencias-grid,
.consejos-grid{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(17.5em,1fr));
    gap:1.8em;
    margin-top:3.1em;
}

.tendencia,
.tip{
    background:white;
    border-radius:1.2em;
    overflow:hidden;
    text-align:center;
    box-shadow:0 0.5em 1.2em #00000014;
    transition:.3s;
}

.tendencia:hover,
.tip:hover{
    transform:translateY(-0.6em);
}

.tendencia img{
    width:100%;
    height:16.2em;
    object-fit:cover;
}

.tendencia h3,
.tip h3{
    margin:1.2em 0 0.6em;
    color: #5A189A;
}

.tendencia p,
.tip p{
    padding:0 1.2em 1.5em;
}

.tip{
    padding:2.5em 1.5em;
}

.tip i{
    font-size:2.8em;
    color: #7B2CBF;
    margin-bottom:1.2em;
}