/* variables */
:root {
    --color-principal: #6e3fa3;
    --color-secundario: #8e5cc7;
    --color-acento: #e7b6c7;
    --color-fondo: #f9f6f2;
    --color-blanco: #ffffff;
    --color-texto: #333;
    --color-texto-suave: #444;

    --sombra-suave: 0 4px 12px rgba(0,0,0,0.08);
    --sombra-hover: 0 8px 20px rgba(0,0,0,0.15);

    --fuente-principal: 'Poppins', sans-serif;
}


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


html, body {
    height: 100%;
    font-family: var(--fuente-principal);
    background-color: var(--color-fondo);
    color: var(--color-texto);
    overflow-x: hidden;
}


.cabecera {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 20px 40px;
    background-color: var(--color-blanco);
    border-bottom: 2px solid var(--color-secundario);
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
    position: relative;
    z-index: 10;
}

.img {
    width: 80px;
    border-radius: 50%;
}

.menu {
    display: flex;
    justify-content: center;
    gap: 35px;
    flex: 1;
}

.menu a {
    text-decoration: none;
    color: var(--color-texto-suave);
    font-size: 16px;
    transition: 0.3s;
}

.menu a:hover {
    color: var(--color-secundario);
}


.buscador {
    display: flex;
    align-items: center;
    border: 1px solid #ddd;
    border-radius: 20px;
    padding: 4px 10px;
    margin-right: 15px;
    background-color: #fafafa;
}

.buscador input {
    border: none;
    outline: none;
    background: transparent;
    font-size: 14px;
}

.lupa {
    width: 15px;
}

.carrito,
.usuario {
    width: 22px;
    cursor: pointer;
    margin-right: 15px;
    transition: transform 0.2s;
}

.carrito:hover,
.usuario:hover {
    transform: scale(1.1);
}
/* MENÚ DESPLEGABLE */
.menuDesplegable {
    display: none;
    font-size: 32px;
    cursor: pointer;
    color: var(--color-principal);
    transition: 0.3s;
}

.menuDesplegable:hover {
    color: var(--color-secundario);
}

/* inicio, registro */
.acceso {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
}

.acceso a {
    text-decoration: none;
    color: var(--color-texto-suave);
    transition: 0.3s;
}

.acceso a:hover {
    color: var(--color-secundario);
}

.acceso span {
    color: #ccc;
}

/* HERO */
.section {
    width: 100%;
    min-height: 300px;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-color: #f3e9ff; 
    padding: 40px 20px;
}

.section .contenido {
    max-width: 900px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 30px;
}

.section h1 {
    font-family: 'Cinzel', serif;
    font-size: clamp(32px, 8vw, 65px);
    color: var(--color-principal);
    letter-spacing: 2px;
    text-transform: uppercase;
}


.section h4 {
   font-family: 'Lora', serif;
    font-weight: 400;
    color: var(--color-secundario);
    letter-spacing: 1px;
}

.section .imagenHero {
    width: 100%;
    max-width: 400px;
    border-radius: 20px;
    box-shadow: var(--sombra-suave);
    transition: transform 0.4s ease;
}

.section .imagenHero:hover {
    transform: scale(1.1);
}


.boton {
    padding: 14px 30px;
    font-size: 16px;
    border: none;
    background-color: var(--color-acento);
    color: var(--color-texto);
    cursor: pointer;
    border-radius: 30px;
    transition: 0.3s;
    font-weight: 500;
}

.boton:hover {
    transform: scale(1.05);
}


section:not(.section) {
    padding: 60px 20px;
    max-width: 1200px;
    margin: 0 auto;
}

section h2 {
       font-family: 'Lora', serif;
    font-size: 42px;
    color: var(--color-principal);
    text-align: center;
    margin-bottom: 40px;
}

section h2::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background-color: var(--color-acento);
    margin: 10px auto 0;
    border-radius: 2px;
}

/* velas */
.tiposVelas {
    padding: 60px 20px;
    max-width: 1200px;
    margin: 0 auto;
}

.tiposVelas h2 {
  font-family: 'Lora', serif;
    font-size: 42px;
    color: var(--color-principal);
    margin-bottom: 50px;
}

.tiposVelas h2::after {
    content: '';
    display: block;
    width: 60px;
    height: 3px;
    background-color: var(--color-acento);
    margin: 10px auto 0;
    border-radius: 2px;
}

/* tarjetas 4 */
.tipos {
    display: flex;
    flex-wrap: nowrap;
    justify-content: center;
    gap: 20px;
    text-align: center;
    overflow-x: auto; 
    padding-bottom: 10px;
}


.tipos .tipo {
    background-color: var(--color-blanco);
    padding: 20px;
    border-radius: 15px;
    box-shadow: var(--sombra-suave);
    width: 22%; 
    min-width: 180px;
    display: flex;
    flex-direction: column;
    align-items: center;
    transition: transform 0.3s, box-shadow 0.3s;
}

.tipos .tipo:hover {
    transform: translateY(-5px);
    box-shadow: var(--sombra-hover);
}


.tipos .tipo img {
    width: 100%;
    height: 300px; 
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 15px;
    transition: transform 0.3s;
}

.tipos .tipo img:hover {
    transform: scale(1.05);
}

/* título tarjetaa */
.tipos .tipo h3 {
    font-size: 18px;
    color: var(--color-secundario);
    margin-bottom: 8px;
    font-weight: 600;
}


.tipos .tipo p {
    font-size: 14px;
    color: var(--color-texto-suave);
    line-height: 1.5;
}

/*productos*/
.productos {
    padding: 40px 20px;
    text-align: center;
}

.productos h2 {
  	font-family: 'Lora', serif;
    font-size: 36px;
    color: var(--color-principal);
    margin-bottom: 30px;
}


.lista{
    display: flex;
    flex-direction: column;
    gap: 30px;
    align-items: center;
}


.grande {
    position: relative;
    width: 80%; 
    border-radius: 15px;
    overflow: hidden;
    box-shadow: var(--sombra-suave);
    transition: transform 0.3s, box-shadow 0.3s;
    /* cursor: pointer; */
}

.grande img {
    width: 100%;
    height: 500px; 
    object-fit: cover;
    display: block;
}


.franja {
    position: absolute;
    bottom: 0; 
    width: 100%;
    background: rgba(0, 0, 0, 0.6);
    color: var(--color-acento);
    text-align: center;
    padding: 40px 10px;
}

.franja h3 {
    margin: 0;
    font-size: 28px;
    font-weight: 600;
}

/* hover */
.grande:hover {
    transform: translateY(-5px);
    box-shadow: var(--sombra-hover);
}




/* aromas */
.losaromas {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    margin-top: 30px;
}

.aroma {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.aroma img {
    width: 100px;
    height: 100px;
    object-fit: cover;
    border-radius: 10px;
    box-shadow: var(--sombra-suave);
    transition: transform 0.3s;
}

.aroma img:hover {
    transform: scale(1.05);
}

.aroma p {
    margin-top: 8px;
    font-size: 14px;
    color: var(--color-texto-suave);
}

/* p */
.aromas p,
.formas p,
.vasosCristal p,
.waxMelts p,
.temporada p {
    text-align: center;
    font-size: 16px;
    line-height: 1.6;
    max-width: 900px;
    margin: 0 auto;
    color: var(--color-texto-suave);
}
/* formas */

.todasFormas {
    padding: 40px 20px;
    text-align: center;
}

.todasFormas h2 {
  	font-family: 'Lora', serif;
    font-size: 36px;
    color: var(--color-principal);
    margin-bottom: 30px;
}


.todasFormas .formas {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 20px;
    justify-items: center;
}


.todasFormas .forma {
    background-color: var(--color-blanco);
    border-radius: 15px;
    padding: 15px;
    box-shadow: var(--sombra-suave);
    transition: transform 0.3s, box-shadow 0.3s;
    text-align: center;
    width: 100%;
}

.todasFormas .forma:hover {
    transform: translateY(-5px);
    box-shadow: var(--sombra-hover);
}

/* imagen tarjeta */
.todasFormas .forma img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 10px;
}

/* Nombre y precio  */
.todasFormas .forma p {
    color: var(--color-principal);
    font-weight: 500;
    font-size: 18px;
    margin: 0;
}










/* Vasos de cristal */

.vasos {
    padding: 40px 20px;
    text-align: center;
}

.vasos h2 {
  font-family: 'Lora', serif;
    font-size: 36px;
    color: var(--color-principal);
    margin-bottom: 30px;
}

/* tarjetas de vasos */
.vasos .vasosCristal {
    display: grid;
    grid-template-columns: repeat(4, 1fr); 
    gap: 20px;
    justify-items: center;
}

/* Tarjeta individual */
.vasos .cristal {
    background-color: var(--color-blanco);
    border-radius: 15px;
    padding: 15px;
    box-shadow: var(--sombra-suave);
    transition: transform 0.3s, box-shadow 0.3s;
    text-align: center;
    width: 100%;
}

.vasos .cristal:hover {
    transform: translateY(-5px);
    box-shadow: var(--sombra-hover);
}


.vasos .cristal img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 10px;
}


.vasos .cristal p {
    color: var(--color-principal);
    font-weight: 500;
    font-size: 18px;
    margin: 0;
}







/* WAXMELTS */
.waxmelts {
    padding: 40px 20px;
    text-align: center;
}

.waxmelts h2 {
  font-family: 'Lora', serif;
    font-size: 36px;
    color: var(--color-principal);
    margin-bottom: 30px;
}

.waxmelts .wax {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 20px;
    justify-items: center;
}

.waxmelts .melts {
    background-color: var(--color-blanco);
    border-radius: 15px;
    padding: 15px;
    box-shadow: var(--sombra-suave);
    transition: transform 0.3s, box-shadow 0.3s;
    text-align: center;
    width: 100%;
}

.waxmelts .melts:hover {
    transform: translateY(-5px);
    box-shadow: var(--sombra-hover);
}

.waxmelts .melts img {
    width: 100%;
    height: 250px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 10px;
}

.waxmelts .melts p {
    color: var(--color-principal);
    font-weight: 500;
    font-size: 18px;
    margin: 0;
}

/* QUEMADORES */

.quemadores {
    padding: 40px 20px;
    text-align: center;
}

.quemadores h2 {
  font-family: 'Lora', serif;
    font-size: 36px;
    color: var(--color-principal);
    margin-bottom: 30px;
}

.quemadores .quemador {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 35px;
    max-width: 900px;
    margin: 0 auto;
    justify-items: center;
}

.quemadores .quema {
    background-color: var(--color-blanco);
    border-radius: 15px;
    padding: 15px;
    box-shadow: var(--sombra-suave);
    transition: transform 0.3s, box-shadow 0.3s;
    text-align: center;
    width: 100%;
    max-width: 1000px;
}

.quemadores .quema:hover {
    transform: translateY(-5px);
    box-shadow: var(--sombra-hover);
}

.quemadores .quema img {
    width: 100%;
    height: 280px;
    object-fit: cover;
    border-radius: 10px;
    margin-bottom: 10px;
}

.quemadores .quema p {
    color: var(--color-principal);
    font-weight: 500;
    font-size: 18px;
    margin: 0;
}





/* PIE */
.pie {
    display: flex;
    flex-direction: column;
    padding: 10px 15px;
    background-color: var(--color-principal);
    gap: 10px;
    color: var(--color-blanco);
    font-family: var(--fuente-principal);
}

.pie .contenedorColumnas {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 200px;
    flex-wrap: wrap;
    max-width: 1100px;
    margin: 0 auto;
}

.columnaLogo {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    flex: 1;
}

.logoFooter {
    width: 80px;
    margin-top: 55px;
}

.columnaContacto {
    display: flex;
    margin-top: 10px;
    flex-direction: column;
    gap: 18px;
    align-items: flex-start;
    padding-left: 0;
    flex: 1;
}

.columnaLegal {
    display: flex;
    flex-direction: column;
    gap: 18px;
    align-items: flex-start;
    flex: 1;
}

.columnaContacto h4 {
    font-size: 16px;
    color: var(--color-blanco);
    margin-bottom: 5px;
}

.contactoRedes,
.contactoInfo {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.contactoRedes a,
.contactoInfo a,
.columnaContacto a,
.columnaLegal a {
    display: flex;
    align-items: center;
    gap: 18px;
    color: var(--color-acento);
    text-decoration: none;
    font-size: 13px;
    transition: 0.3s;
}

.contactoRedes a img,
.contactoInfo a img {
    width: 20px;
    height: 20px;
}

.pie a:hover {
    text-decoration: underline;
}

.copyright {
    border-top: 1px solid rgba(255,255,255,0.3);
    padding-top: 10px;
    text-align: center;
    font-size: 12px;
    color: var(--color-acento);
    margin: 0;
}






/* RESPONSIVE */


/* PANTALLAS GRANDES */
@media (min-width: 1600px) {

    section:not(.section) {
        max-width: 1400px;
    }

    .grande {
        width: 70%;
    }

    .section h1 {
        font-size: 75px;
    }

    .section h4 {
        font-size: 28px;
    }
}


/* TABLETS GRANDES */
@media (max-width: 1200px) {

    .cabecera {
        padding: 20px;
        gap: 20px;
    }

    .menu {
        gap: 20px;
    }

    .todasFormas .formas {
        grid-template-columns: repeat(3, 1fr);
    }

    .vasos .vasosCristal {
        grid-template-columns: repeat(3, 1fr);
    }

    .waxmelts .wax {
        grid-template-columns: repeat(3, 1fr);
    }

    .tipos {
        flex-wrap: wrap;
    }

    .tipos .tipo {
        width: 45%;
    }

    .pie .contenedorColumnas {
        gap: 40px;
    }

    /* AROMAS */
    .losaromas {
        grid-template-columns: repeat(4, 1fr);
    }
}


/* TABLETS */
@media (max-width: 992px) {

    .cabecera {
        flex-direction: row;
        align-items: center;
        gap: 20px;
        padding: 20px;
    }

    .menu {
        flex-wrap: wrap;
        justify-content: center;
        gap: 15px;
    }

    .buscador {
        width: 100%;
        max-width: 350px;
    }

    .buscador input {
        width: 100%;
    }

    .acceso {
        flex-wrap: wrap;
        justify-content: center;
    }

    section h2,
    .tiposVelas h2,
    .productos h2,
    .todasFormas h2,
    .vasos h2,
    .waxmelts h2,
    .quemadores h2 {
        font-size: clamp(28px, 5vw, 42px);
    }

    .grande {
        width: 95%;
    }

    .grande img {
        height: 400px;
    }

    .franja h3 {
        font-size: 24px;
    }

    /* AROMAS */
    .losaromas {
        grid-template-columns: repeat(3, 1fr);
    }
}



/* MÓVILES */
@media (max-width: 768px) {

    /* CABECERA */
    .cabecera {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        flex-wrap: wrap;
        padding: 15px 20px;
        position: relative;
        gap: 15px;
    }

    /* menú desplegable */
    .menuDesplegable {
        display: block;
    }

    /* menú oculto */
    .menu {
        display: none;
        flex-direction: column;
        align-items: center;
        gap: 0;
        width: 100%;
        position: absolute;
        top: 85px;
        left: 0;
        background-color: var(--color-blanco);
        border-top: 2px solid var(--color-secundario);
        box-shadow: var(--sombra-suave);
        padding: 10px 0;
        z-index: 999;
    }

    /* menú activo */
    .menu.activo {
        display: flex;
    }

    .menu a {
        width: 100%;
        text-align: center;
        padding: 15px;
        border-bottom: 1px solid #eee;
        font-size: 16px;
    }

    .menu a:hover {
        background-color: #f3e9ff;
        color: var(--color-principal);
    }

    /* ocultar elementos */
    .buscador,
    .acceso {
        display: none;
    }

    .img {
        width: 65px;
    }

    .carrito,
    .usuario {
        width: 20px;
        margin-right: 5px;
    }

    /* HERO */
    .section {
        padding: 30px 15px;
        min-height: auto;
    }

    .section .contenido {
        gap: 20px;
    }

    .section h1 {
        font-size: clamp(32px, 8vw, 50px);
    }

    .section h4 {
        font-size: clamp(16px, 4vw, 22px);
    }

    .section .imagenHero {
        max-width: 280px;
    }

    .boton {
        width: 100%;
        max-width: 250px;
    }

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

    .tipos .tipo {
        width: 100%;
        max-width: 320px;
    }

    .tipos .tipo img {
        height: 220px;
    }

    .todasFormas .formas,
    .vasos .vasosCristal,
    .waxmelts .wax {
        grid-template-columns: repeat(2, 1fr);
    }

    .quemadores .quemador {
        grid-template-columns: 1fr;
    }

    .grande img {
        height: 300px;
    }

    .franja {
        padding: 25px 10px;
    }

    .franja h3 {
        font-size: 20px;
    }

    /* AROMAS */
    .losaromas {
        grid-template-columns: repeat(2, 1fr);
        gap: 15px;
    }

    /* FOOTER */
    .pie {
        text-align: center;
    }

    .pie .contenedorColumnas {
        flex-direction: column;
        align-items: center;
        gap: 30px;
    }

    .columnaContacto,
    .columnaLegal,
    .columnaLogo {
        align-items: center;
        justify-content: center;
        text-align: center;
    }

    .contactoRedes,
    .contactoInfo {
        align-items: center;
    }

    .logoFooter {
        margin-top: 0;
    }
}


/* MÓVILES PEQUEÑOS */
@media (max-width: 480px) {

    .cabecera {
        padding: 15px;
    }

    .img {
        width: 60px;
    }

    .menu {
        gap: 10px;
    }

    .menu a {
        font-size: 14px;
    }

    .buscador {
        padding: 5px 10px;
    }

    .buscador input {
        font-size: 13px;
    }

    .carrito,
    .usuario {
        width: 18px;
        margin-right: 8px;
    }

    .acceso {
        font-size: 12px;
    }

    .section {
        padding: 20px 10px;
    }

    .section .imagenHero {
        max-width: 220px;
    }

    .boton {
        font-size: 14px;
        padding: 12px 20px;
    }

    section {
        padding: 40px 15px;
    }

    .todasFormas .formas,
    .vasos .vasosCristal,
    .waxmelts .wax {
        grid-template-columns: 1fr;
    }

    .tipos .tipo img,
    .todasFormas .forma img,
    .vasos .cristal img,
    .waxmelts .melts img {
        height: 200px;
    }

    .grande img {
        height: 220px;
    }

    .franja h3 {
        font-size: 18px;
    }

    /* AROMAS */
    .losaromas {
        grid-template-columns: repeat(2, 1fr);
        gap: 12px;
    }

    .aroma img {
        width: 70px;
        height: 70px;
    }

    .copyright {
        font-size: 11px;
    }
}