/* ============================================================
   EMMA AROMAS — PERSONALIZACIÓN SITIOSIMPLE
   Ficha de producto + formularios + botones
   Diseño: Lavanda · Acuarela · Zen Chic
   ============================================================ */


/* ------------------------------------------------------------
   1. PALETA EMMA AROMAS
   ------------------------------------------------------------ */

:root {
    --emma-lila: #9b80b5;
    --emma-lila-dark: #725c8d;
    --emma-lila-light: #d9cbe7;
    --emma-lavanda: #eee7f5;

    --emma-rosa: #e8ccd8;
    --emma-rosa-light: #f7edf2;

    --emma-salvia: #bccdbb;
    --emma-salvia-light: #edf3ec;

    --emma-crema: #fcfaf7;
    --emma-blanco: #ffffff;

    --emma-text: #51485b;
    --emma-text-soft: #756b7e;

    --emma-border: rgba(155, 128, 181, 0.24);

    --emma-shadow:
        0 10px 35px rgba(91, 70, 112, 0.10);

    --emma-shadow-hover:
        0 14px 40px rgba(91, 70, 112, 0.18);

    --emma-radius: 18px;
}


/* ------------------------------------------------------------
   2. FONDO GENERAL
   ------------------------------------------------------------ */

body {
    background:
        radial-gradient(
            circle at 8% 18%,
            rgba(217, 203, 231, .28),
            transparent 30%
        ),
        radial-gradient(
            circle at 92% 40%,
            rgba(232, 204, 216, .22),
            transparent 32%
        ),
        linear-gradient(
            180deg,
            #fff 0%,
            #fcfaf7 65%,
            #faf7fc 100%
        );

    color: var(--emma-text);
}


/* textura floral / acuarela muy sutil */

body::before {
    content: "";
    position: fixed;
    inset: 0;

    pointer-events: none;
    z-index: -1;

    opacity: .55;

    background:
        radial-gradient(
            ellipse at 5% 15%,
            rgba(183, 157, 207, .10) 0,
            transparent 24%
        ),

        radial-gradient(
            ellipse at 98% 78%,
            rgba(205, 166, 190, .08) 0,
            transparent 28%
        );
}


/* ------------------------------------------------------------
   3. TEXTOS
   ------------------------------------------------------------ */

h1,
h2,
h3,
h4,
h5,
h6 {
    color: var(--emma-text);
    letter-spacing: .01em;
}

h1 {
    font-weight: 600;
}

p {
    color: var(--emma-text-soft);
    line-height: 1.7;
}


/* ------------------------------------------------------------
   4. FICHA DEL PRODUCTO
   ------------------------------------------------------------ */

.product,
.product-detail,
.producto,
.product-info,
.product-content,
.product-detail-content {
    position: relative;
}


/* Título */

.product h1,
.product-detail h1,
.product-info h1,
h1.product-title,
.product-title {
    color: var(--emma-text) !important;

    font-weight: 600 !important;

    letter-spacing: -.02em;

    margin-bottom: 10px;
}


/* Subtítulo */

.product h2,
.product-detail h2,
.product-subtitle,
.product-description-short {
    color: var(--emma-text-soft) !important;
    font-weight: 400;
}


/* ------------------------------------------------------------
   5. PRECIO
   ------------------------------------------------------------ */

.product-price,
.price,
.precio,
.product .price,
.product-detail .price {

    color: var(--emma-lila-dark) !important;

    font-size: 1.7rem !important;
    font-weight: 700 !important;

    letter-spacing: -.025em;

    margin-top: 12px;
    margin-bottom: 20px;
}


/* ------------------------------------------------------------
   6. TARJETA / CONTENEDOR DE INFORMACIÓN
   ------------------------------------------------------------ */

.product-info,
.product-detail-info,
.product-data,
.product-summary {

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.96),
            rgba(250,247,252,.95)
        );

    border: 1px solid var(--emma-border);

    border-radius: 24px;

    padding: 28px;

    box-shadow: var(--emma-shadow);
}


/* detalle decorativo */

.product-info::before,
.product-detail-info::before {

    content: "";

    display: block;

    width: 55px;
    height: 4px;

    border-radius: 20px;

    background:
        linear-gradient(
            90deg,
            var(--emma-lila),
            var(--emma-rosa)
        );

    margin-bottom: 22px;
}


/* ------------------------------------------------------------
   7. BOTONES GENERALES
   ------------------------------------------------------------ */

button,
.button,
.btn,
input[type="submit"],
input[type="button"],
a.btn {

    appearance: none;

    border: none !important;

    border-radius: 50px !important;

    padding: 13px 18px !important;

    font-size: 14px !important;
    font-weight: 600 !important;

    letter-spacing: .06em;

    cursor: pointer;

    transition:
        transform .2s ease,
        box-shadow .2s ease,
        background .25s ease;

}


/* Botón principal */

button:not(.close),
.btn-primary,
.button-primary,
input[type="submit"] {

    color: #fff !important;

    background:
        linear-gradient(
            135deg,
            #a68ac0 0%,
            #82659e 100%
        ) !important;

    box-shadow:
        0 7px 18px rgba(122, 92, 151, .24);
}


button:hover,
.btn-primary:hover,
.button-primary:hover,
input[type="submit"]:hover {

    transform: translateY(-2px);

    background:
        linear-gradient(
            135deg,
            #9576b2,
            #705287
        ) !important;

    box-shadow:
        0 11px 25px rgba(122, 92, 151, .30);
}


button:active,
.btn:active {

    transform: translateY(0);
}


/* ------------------------------------------------------------
   8. BOTÓN CONSULTAR
   ------------------------------------------------------------ */

button[class*="consult"],
a[class*="consult"],
.consultar,
.btn-consultar {

    min-width: 180px;

    background:
        linear-gradient(
            135deg,
            #a68ac0,
            #84679d
        ) !important;

    color: #fff !important;

    border-radius: 50px !important;

    font-weight: 700 !important;

    letter-spacing: .09em;

    box-shadow:
        0 8px 22px rgba(123, 93, 149, .25);

}


/* ------------------------------------------------------------
   9. SELECTORES DE AROMAS
   ------------------------------------------------------------ */

.product-options a,
.product-options button,
.variant a,
.variant button,
.variants a,
.variants button,
.option a,
.option button {

    background: #fff !important;

    color: var(--emma-lila-dark) !important;

    border:
        1px solid
        rgba(155,128,181,.30)
        !important;

    border-radius: 50px !important;

    padding: 9px 16px !important;

    margin:
        4px 3px !important;

    font-weight: 500 !important;

    box-shadow: none !important;

    transition: all .2s ease !important;
}


.product-options a:hover,
.product-options button:hover,
.variant a:hover,
.variant button:hover {

    background:
        var(--emma-lavanda)
        !important;

    color:
        var(--emma-lila-dark)
        !important;

    border-color:
        var(--emma-lila)
        !important;

    transform:
        translateY(-1px);
}


/* aroma seleccionado */

.product-options .active,
.product-options .selected,
.variant .active,
.variant .selected {

    background:
        var(--emma-lila)
        !important;

    color:
        #fff
        !important;

    border-color:
        var(--emma-lila)
        !important;
}


/* ------------------------------------------------------------
   10. ESTADO SIN STOCK
   ------------------------------------------------------------ */

.out-of-stock,
.sin-stock,
.stock-out,
.product-stock {

    display: inline-flex;

    align-items: center;

    padding:
        7px 14px;

    background:
        var(--emma-rosa-light);

    border:
        1px solid
        rgba(211, 158, 181, .28);

    border-radius:
        30px;

    color:
        #9b657d !important;

    font-weight:
        600;

    font-size:
        13px;
}


/* ------------------------------------------------------------
   11. FORMULARIOS — TARJETA DECORATIVA
   ------------------------------------------------------------ */

form {

    position: relative;
}


.product form,
.contact-form,
.form-contact,
.product-contact-form,
.modal form {

    background:
        linear-gradient(
            145deg,
            rgba(255,255,255,.98),
            rgba(247,240,250,.98)
        );

    border:
        1px solid
        rgba(155,128,181,.24);

    border-radius:
        24px;

    padding:
        28px;

    box-shadow:
        0 14px 38px
        rgba(86,66,108,.12);

}


/* detalle superior */

.product form::before,
.contact-form::before,
.product-contact-form::before {

    content: "✦";

    position: absolute;

    top: -17px;
    left: 32px;

    width: 34px;
    height: 34px;

    display: grid;
    place-items: center;

    border-radius: 50%;

    color:
        var(--emma-lila-dark);

    background:
        var(--emma-lavanda);

    border:
        1px solid
        var(--emma-border);

    font-size:
        14px;
}


/* ------------------------------------------------------------
   12. LABELS
   ------------------------------------------------------------ */

label {

    display: block;

    margin-bottom: 7px;

    color:
        var(--emma-text) !important;

    font-size:
        13px;

    font-weight:
        600;

    letter-spacing:
        .02em;
}


/* ------------------------------------------------------------
   13. CAMPOS
   ------------------------------------------------------------ */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="password"],
input[type="search"],
select,
textarea {

    width: 100%;

    box-sizing: border-box;

    background:
        rgba(255,255,255,.92)
        !important;

    color:
        var(--emma-text)
        !important;

    border:
        1px solid
        rgba(155,128,181,.26)
        !important;

    border-radius:
        14px !important;

    padding:
        13px 16px !important;

    font-family:
        inherit;

    font-size:
        15px;

    outline:
        none;

    box-shadow:
        0 3px 12px
        rgba(90,70,108,.035);

    transition:
        border-color .2s ease,
        box-shadow .2s ease,
        background .2s ease;

}


/* Hover */

input:hover,
select:hover,
textarea:hover {

    border-color:
        rgba(155,128,181,.55)
        !important;

}


/* Focus */

input:focus,
select:focus,
textarea:focus {

    background:
        #fff !important;

    border-color:
        var(--emma-lila)
        !important;

    box-shadow:
        0 0 0 4px
        rgba(155,128,181,.12)
        !important;
}


/* Placeholder */

input::placeholder,
textarea::placeholder {

    color:
        #afa5b5;

    opacity: 1;
}


/* ------------------------------------------------------------
   14. TEXTAREA
   ------------------------------------------------------------ */

textarea {

    min-height: 125px;

    resize: vertical;
}


/* ------------------------------------------------------------
   15. TÍTULO "CONSULTA SOBRE PRODUCTO"
   ------------------------------------------------------------ */

form h4,
form h5,
form legend,
.form-title {

    color:
        var(--emma-lila-dark)
        !important;

    font-weight:
        600;

    font-size:
        19px;

    margin-bottom:
        22px;

}


/* ------------------------------------------------------------
   16. TABS: DESCRIPCIÓN / ENVÍOS / MEDIOS DE PAGO
   ------------------------------------------------------------ */

.tabs,
.product-tabs {

    margin-top:
        40px;
}


.tabs a,
.product-tabs a {

    color:
        var(--emma-text)
        !important;

    font-weight:
        600;

    text-decoration:
        none;

    padding:
        10px 15px;

    border-radius:
        30px;

    transition:
        all .2s ease;
}


.tabs a:hover,
.product-tabs a:hover,
.tabs .active,
.product-tabs .active {

    color:
        var(--emma-lila-dark)
        !important;

    background:
        var(--emma-lavanda);

}


/* ------------------------------------------------------------
   17. IMÁGENES DEL PRODUCTO
   ------------------------------------------------------------ */

.product img,
.product-detail img,
.product-image img {

    border-radius:
        22px;

    transition:
        transform .35s ease,
        box-shadow .35s ease;
}


.product-image img:hover {

    transform:
        scale(1.015);

    box-shadow:
        0 14px 34px
        rgba(77,61,88,.12);

}


/* ------------------------------------------------------------
   18. CARDS
   ------------------------------------------------------------ */

.card,
.product-card {

    background:
        rgba(255,255,255,.92);

    border:
        1px solid
        var(--emma-border);

    border-radius:
        20px;

    box-shadow:
        var(--emma-shadow);

    overflow:
        hidden;

    transition:
        transform .25s ease,
        box-shadow .25s ease;

}


.card:hover,
.product-card:hover {

    transform:
        translateY(-4px);

    box-shadow:
        var(--emma-shadow-hover);

}


/* ------------------------------------------------------------
   19. LINKS
   ------------------------------------------------------------ */

a {

    color:
        var(--emma-lila-dark);

    transition:
        color .2s ease;
}


a:hover {

    color:
        var(--emma-lila);
}


/* ------------------------------------------------------------
   20. WHATSAPP
   ------------------------------------------------------------ */

a[href*="wa.me"],
a[href*="whatsapp"] {

    transition:
        transform .2s ease,
        box-shadow .2s ease;

}


a[href*="wa.me"]:hover {

    transform:
        translateY(-2px);
}


/* ------------------------------------------------------------
   21. SEPARADORES
   ------------------------------------------------------------ */

hr {

    border:
        0;

    height:
        1px;

    background:
        linear-gradient(
            90deg,
            transparent,
            rgba(155,128,181,.35),
            transparent
        );

    margin:
        28px 0;
}


/* ------------------------------------------------------------
   22. MOBILE
   ------------------------------------------------------------ */

@media (max-width: 768px) {

    .product-info,
    .product-detail-info,
    .product-summary {

        padding:
            20px;

        border-radius:
            18px;
    }


    .product form,
    .contact-form,
    .product-contact-form,
    .modal form {

        padding:
            22px 18px;

        border-radius:
            18px;
    }


    button,
    .button,
    .btn,
    input[type="submit"] {

        width:
            100%;

        min-height:
            48px;

        padding:
            14px 20px
            !important;
    }


    input[type="text"],
    input[type="email"],
    input[type="tel"],
    input[type="number"],
    select,
    textarea {

        font-size:
            16px !important;
    }


    .product-price,
    .price,
    .precio {

        font-size:
            1.5rem !important;
    }

}


/* ------------------------------------------------------------
   23. ANIMACIÓN SUAVE
   ------------------------------------------------------------ */

@keyframes emmaFadeUp {

    from {
        opacity: 0;
        transform: translateY(10px);
    }

    to {
        opacity: 1;
        transform: translateY(0);
    }

}


.product-info,
.product-detail-info,
.product form,
.contact-form {

    animation:
        emmaFadeUp .5s ease both;
}


/* ------------------------------------------------------------
   24. ACCESIBILIDAD
   ------------------------------------------------------------ */

button:focus-visible,
a:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {

    outline:
        3px solid
        rgba(155,128,181,.32)
        !important;

    outline-offset:
        3px;
}


/* ============================================================
   FIN — EMMA AROMAS
   ============================================================ */