:root{
  --titulos: #fff;
  --cuerpo: #fff;
  --card-body-gray: #F2F2F2;
}
body{
  background-color: #181818;
  font-family: 'Nunito Sans', sans-serif;
}

body.page-id-97{
background: #fff;
}

p{
  font-weight: 300;
  color: var(--cuerpo);
}
h1,h2,h3,h4,h5,h6{
  font-weight: 600;
  color: var(--titulos);
}
a{
color:white !important;
}
.rounded-1 {
border-radius: 16px !important;
}
.btn-rounded {
border-radius: 10em;
}
/* Cards style */

.card-registro{
  border-radius: 4px;
  background: #3A3A3A;
  box-shadow: 0 6px 10px rgba(0,0,0,.5), 0 0 6px rgba(0,0,0,.5);
    transition: .3s transform cubic-bezier(.155,1.105,.295,1.12),.3s box-shadow,.3s -webkit-transform cubic-bezier(.155,1.105,.295,1.12);
}
.gold-color{
color: #FEC957;
}
.card-shop{
background-color: #3A3A3A;
}
.card-registro .card-body{
  padding: 30px;
}

.card-registro:hover{
   transform: scale(1.03);
box-shadow: 0 10px 20px rgba(0,0,0,.12), 0 4px 8px rgba(0,0,0,.06);
}

.card-registro h3{
font-weight: 600;
}

.card-registro img{
position: absolute;
top: 20px;
right: 15px;
max-height: 120px;
}

.card-registro .card-footer{
  background-color: #3A3A3A;
  border-top:none;
}
.card-cuponera{
background-color: #3A3A3A;
border: 2px dashed rgba(254, 201, 87, 1)!important;
}
.card-cuponera.canjeado{
background-color: #212121;
opacity: 0.5;
}

.separador-h15{
  padding-top: 15vh;
  padding-bottom: 15vh;
}

section .form-registro{
display: none;
}
.btn-gold{
color:white;
background: rgb(153,101,8);
background: -moz-linear-gradient(270deg, rgba(153,101,8,1) 0%, rgba(254,201,87,1) 50%, rgba(175,99,1,1) 100%);
background: -webkit-linear-gradient(270deg, rgba(153,101,8,1) 0%, rgba(254,201,87,1) 50%, rgba(175,99,1,1) 100%);
background: linear-gradient(270deg, rgba(153,101,8,1) 0%, rgba(254,201,87,1) 50%, rgba(175,99,1,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#996508",endColorstr="#af6301",GradientType=1);
}
.page-titulo{
background-image: url(https://dermacosmetica.mx/wp-content/uploads/2025/03/Fondo-Dermacosmetica2025.jpg);
background-repeat: no-repeat;
background-size: cover;
}
.bg-pink-derma{
background-color: #481277;
color: white;
}
.bg-dark-derma{
background-color: #9540c2;
}
.cart-customlocation{
color: white!important;
text-decoration: none;
}
.bi-bag-dash{
color: white!important;
}
.custom-logo{
width: 45px;
}
.form-row label{
color: #fff;
width:100%;
}
.form-control {
  padding: 0.375rem 0.75rem !important;
}
.btn {
  padding: 0.84rem 2.14rem!important;
  font-size: .81rem!important;
}
.modal-content {
  background-color: #fff;
}
.modal-title {
    color: #000;
}
.modal-body h5{
	color: #000;
}
.btn.btn-md {
  padding: 0.7rem 1.6rem!important;
  font-size: .7rem!important;
}
.main-navigation .menu-toggle {
  background-color: #212121!important;
}

/*Estilos de la pagina de detalle producto*/
.add_to_cart_button{
color: whiteimportant;
background: rgb(153,101,8important);
background: -moz-linear-gradient(270deg, rgba(153,101,8,1) 0%, rgba(254,201,87,1) 50%, rgba(175,99,1,1) 100%)important;
background: -webkit-linear-gradient(270deg, rgba(153,101,8,1) 0%, rgba(254,201,87,1) 50%, rgba(175,99,1,1) 100%)important;
background: linear-gradient(270deg, rgba(153,101,8,1) 0%, rgba(254,201,87,1) 50%, rgba(175,99,1,1) 100%)important;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#996508",endColorstr="#af6301",GradientType=1)important;
}
.woocommerce .cart .button, .woocommerce .cart input.button {
  color: whiteimportant;
background: rgb(153,101,8important);
background: -moz-linear-gradient(270deg, rgba(153,101,8,1) 0%, rgba(254,201,87,1) 50%, rgba(175,99,1,1) 100%)important;
background: -webkit-linear-gradient(270deg, rgba(153,101,8,1) 0%, rgba(254,201,87,1) 50%, rgba(175,99,1,1) 100%)important;
background: linear-gradient(270deg, rgba(153,101,8,1) 0%, rgba(254,201,87,1) 50%, rgba(175,99,1,1) 100%)important;
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#996508",endColorstr="#af6301",GradientType=1)important;
}


/* Estilos del carrito y checkout */

/* Estilos de la pagina de detalle de producto */


.title-close {
  cursor: pointer;
}

.number-input.number-input {
  border: 1px solid #FEC957;
  width: 12rem;
  border-radius: .25rem;
}

.number-input {
  display: flex;
  justify-content: space-around;
  align-items: center;
}

.number-input.number-input button.minus {
  padding-left: 10px;
}

.number-input.number-input button {
  width: 3rem;
  height: .7rem;
}

.number-input button {
  -webkit-appearance: none;
  background-color: transparent;
  border: none;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  margin: 0;
  position: relative;
}

.number-input.number-input input[type=number] {
  max-width: 4rem;
  padding: .5rem;
  border: 1px solid #FEC957;
  border-width: 0 1px;
  font-size: 1rem;
  height: 2rem;
  color: #FEC957;
  background-color: transparent;
}

.number-input input[type=number] {
  text-align: center;
}

input[type=number]::-webkit-inner-spin-button,
input[type=number]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.number-input input[type="number"] {
  -webkit-appearance: textfield;
  -moz-appearance: textfield;
  appearance: textfield;
}

.number-input.number-input button:before,
.number-input.number-input button:after {
  width: .5rem;
  background-color: #FEC957;
}

.number-input button:before,
.number-input button:after {
  display: inline-block;
  position: absolute;
  content: '';
  height: 2px;
  transform: translate(-50%, -50%);
}

.number-input button.plus:after {
  transform: translate(-50%, -50%) rotate(90deg);
}

.remove-card {
  border: none;
  background-color: transparent;
  color: white;
  font-size: 1.2rem;
  float: right;
  margin-right: 1rem;
}

.height-70 {
  max-height: 70vh;
  overflow-x: hidden;
  overflow-y: scroll;

}

.separador-carrito {
  padding: 3vh;
}
.altura-70{
  height: 70%;
}
.altura-30{
  height: 30%;
}
.cart-products{
  max-height: 65vh;
  overflow: auto;
}

/* Contador  */
.number-count {
  width: auto;
  height: auto;
  display: block;
  border-radius: 10px;
  line-height: 60px;
  box-shadow: 3px 3px 7px rgb(0 0 0 / 50%);
  text-align: center;
  font-size: 20px;
  margin: 0 auto;
  font-weight: bold;
  color: white;
  background: rgb(153,101,8);
background: -moz-linear-gradient(0deg, rgba(153,101,8,1) 0%, rgba(254,201,87,1) 50%, rgba(175,99,1,1) 100%);
background: -webkit-linear-gradient(0deg, rgba(153,101,8,1) 0%, rgba(254,201,87,1) 50%, rgba(175,99,1,1) 100%);
background: linear-gradient(0deg, rgba(153,101,8,1) 0%, rgba(254,201,87,1) 50%, rgba(175,99,1,1) 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr="#996508",endColorstr="#af6301",GradientType=1);
}
.fecha {
  text-align: center;
  font-size: 1rem;
  font-weight: 400;
  text-transform: uppercase;
  color: white;
}

span.woocommerce-input-wrapper{
  width:85%;
}

input#billing_first_name.input-text{
  width:85%;
}

input[type="text"], input[type="email"], input[type="url"], input[type="password"], input[type="search"], input[type="number"], input[type="tel"], input[type="range"], input[type="date"], input[type="month"], input[type="week"], input[type="time"], input[type="datetime"], input[type="datetime-local"], input[type="color"], textarea {
  color: #666;
  border: 1px solid #ccc;
  border-radius: 10px;
  padding: 5px;
  height: 35px;
}

.select2-container--default .select2-selection--single {
  background-color: #fff;
  border: 1px solid #aaa;
  border-radius: 10px;
  padding: 0px;
  height: 35px;
}

h1.entry-header{
  display: none !important;
}

h1.entry-title{
  display:none;
}

#error-txt{
  color:#fff;
}
#post-1643 ul li{
color: white;
}


/*Estilos paga On Demand*/
.page-id-6940 .accordion-title {
    font-size: 24px;
}
.page-id-6940 .accordion-header-button h5{
font-size: 16px;
}
.page-id-6940 .collapsed {
    background-color: #4dd40e;
}
.page-id-6940 .text-pink {
    color: #171717 !important;
}
.page-id-6940 .text-fucsia {
    color: #171717 !important;
}
.page-id-6940 .card-header:hover, .card-header:focus, .card-header:focus, .accordion-header-button:not(.collapsed) {
    background-color: #481278 !important;
    color: #FFFFFF;
}
.page-id-6940 .joinchat{
display: none;
}

/* =========================================================
   CARD PRODUCTO WOOCOMMERCE - DERMACOSMÉTICA
   ========================================================= */

/* CARD GENERAL */
.woocommerce ul.products li.product {
    background:
        radial-gradient(circle at top center, rgba(92, 126, 255, 0.35) 0%, rgba(92, 126, 255, 0) 22%),
        radial-gradient(circle at bottom left, rgba(0, 214, 255, 0.12) 0%, rgba(0, 214, 255, 0) 28%),
        linear-gradient(180deg, #20257f 0%, #2c31a0 45%, #3a40ba 100%);
    border-radius: 8px;
    overflow: hidden;
    padding: 0 0 24px;
    box-shadow: 0 14px 34px rgba(0, 0, 0, 0.18);
    text-align: center;
    transition: transform 0.25s ease, box-shadow 0.25s ease;
}

.woocommerce ul.products li.product:hover {
    transform: translateY(-4px);
    box-shadow: 0 20px 42px rgba(0, 0, 0, 0.24);
}

/* LINK DEL PRODUCTO */
.woocommerce ul.products li.product a.woocommerce-LoopProduct-link {
    display: block;
    text-decoration: none;
    color: inherit;
}

/* IMAGEN */
.woocommerce ul.products li.product img {
    display: block;
    width: 100%;
    height: auto;
    margin: 0;
}

/* OCULTAR TÍTULO Y PRECIO NATIVOS SI YA VIENEN EN LA IMAGEN */
.woocommerce ul.products li.product .woocommerce-loop-product__title,
.woocommerce ul.products li.product .price {
    display: none !important;
}

/* BADGE OFERTA */
.woocommerce ul.products li.product .onsale {
    top: 14px;
    left: 14px;
    right: auto;
    min-width: auto;
    min-height: auto;
    padding: 7px 12px;
    border-radius: 999px;
    background: #17c9f4;
    color: #111;
    font-size: 12px;
    font-weight: 700;
    line-height: 1.2;
    box-shadow: 0 4px 10px rgba(0,0,0,0.12);
}

/* =========================================================
   BLOQUE DESCRIPCIÓN / INCLUYE
   ========================================================= */
.woocommerce ul.products li.product .custom-loop-short-description {
    background: linear-gradient(180deg, rgba(255,255,255,0.07) 0%, rgba(255,255,255,0.035) 100%);
    border: 1.5px solid rgba(128, 191, 255, 0.26);
    border-radius: 22px;
    padding: 20px 22px;
    margin: 18px 18px 0;
    text-align: left;
    box-shadow:
        inset 0 1px 0 rgba(255,255,255,0.08),
        0 0 0 1px rgba(255,255,255,0.03),
        0 8px 24px rgba(22, 31, 128, 0.18);
    position: relative;
}
.woocommerce ul.products li.product .custom-loop-short-description::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 22px;
    pointer-events: none;
    box-shadow:
        inset 0 0 0 1px rgba(130, 222, 255, 0.14),
        0 0 18px rgba(88, 174, 255, 0.10);
}

.woocommerce ul.products li.product .custom-loop-short-description h4 {
    margin: 0 0 14px;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    text-align: center;
}

.woocommerce ul.products li.product .custom-loop-short-description ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.woocommerce ul.products li.product .custom-loop-short-description li {
    position: relative;
    margin: 0 0 11px;
    padding-left: 24px;
    font-size: 15px;
    line-height: 1.45;
    color: #f3f4ff;
}

.woocommerce ul.products li.product .custom-loop-short-description li:last-child {
    margin-bottom: 0;
}

.woocommerce ul.products li.product .custom-loop-short-description li::before {
    content: "✓";
    position: absolute;
    left: 0;
    top: 0;
    color: #20d9ff;
    font-weight: 700;
}

.woocommerce ul.products li.product .custom-loop-short-description h4 {
    margin: 0 0 14px;
    padding-bottom: 12px;
    font-size: 18px;
    font-weight: 700;
    color: #fff;
    text-align: center;
    border-bottom: 1px solid rgba(255,255,255,0.10);
    box-shadow: 0 1px 0 rgba(129, 206, 255, 0.05);
}
/* =========================================================
   FORMULARIO
   ========================================================= */
.woocommerce ul.products li.product form.cart {
    margin-top: 18px;
    padding: 0 18px;
}

/* =========================================================
   SELECTOR DE CANTIDAD
   ========================================================= */
.woocommerce ul.products li.product .qib-button-wrapper,
.woocommerce ul.products li.product .qib-button-wrapper * {
    box-sizing: border-box;
}

.woocommerce ul.products li.product .qib-button-wrapper {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    margin: 18px 0 22px;
}

/* BOTONES MENOS / MÁS */
.woocommerce ul.products li.product .qib-button.minus,
.woocommerce ul.products li.product .qib-button.plus {
    width: 54px;
    height: 54px;
    min-width: 54px;
    min-height: 54px;
    border: 0 !important;
    border-radius: 12px;
    background: #ffffff !important;
    color: #111111 !important;
    font-size: 28px;
    font-weight: 500;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    margin: 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.10);
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
    cursor: pointer;
}

.woocommerce ul.products li.product .qib-button.minus:hover,
.woocommerce ul.products li.product .qib-button.plus:hover {
    transform: translateY(-1px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.16);
    opacity: 0.98;
}

/* WRAPPER DEL INPUT */
.woocommerce ul.products li.product .quantity.wqpmb_quantity {
    margin: 0 !important;
    float: none !important;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* INPUT CENTRAL */
.woocommerce ul.products li.product .quantity input.qty,
.woocommerce ul.products li.product .quantity .qty,
.woocommerce ul.products li.product input.wqpmb_input_text.input-text.qty.text {
    width: 88px;
    height: 54px;
    min-width: 88px;
    min-height: 54px;
    border: 2px solid #fff !important;
    border-radius: 14px;
    background: #ffffff !important;
    color: #111111 !important;
    font-size: 24px;
    font-weight: 500;
    line-height: 54px;
    text-align: center;
    padding: 0 !important;
    margin: 0;
    box-shadow: 0 4px 12px rgba(0,0,0,0.10);
    appearance: textfield;
    -moz-appearance: textfield;
}

/* QUITAR FLECHAS NATIVAS */
.woocommerce ul.products li.product input.qty::-webkit-outer-spin-button,
.woocommerce ul.products li.product input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* ELEMENTOS OCULTOS DEL PLUGIN */
.woocommerce ul.products li.product .wqpmb_plain_input.hidden,
.woocommerce ul.products li.product .hidden {
    display: none !important;
}

/* =========================================================
   BOTÓN AGREGAR ENTRADA
   ========================================================= */
.woocommerce ul.products li.product form.cart .button.alt,
.woocommerce ul.products li.product form.cart button.button.alt {
    display: block;
    width: 100%;
    border: 2px solid rgba(214, 247, 255, 0.90) !important;
    border-radius: 999px;
    background:
        radial-gradient(circle at top center, rgba(255,255,255,0.18) 0%, rgba(255,255,255,0) 42%),
        linear-gradient(180deg, #6ecbf0 0%, #59b6e1 100%) !important;
    color: #ffffff !important;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    line-height: 1.15;
    padding: 17px 20px;
    margin: 0;
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.08),
        0 0 18px rgba(85, 185, 255, 0.32),
        0 10px 24px rgba(54, 137, 215, 0.26);
    transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease;
}

.woocommerce ul.products li.product form.cart .button.alt:hover,
.woocommerce ul.products li.product form.cart button.button.alt:hover {
    transform: translateY(-1px);
    box-shadow:
        0 0 0 1px rgba(255,255,255,0.12),
        0 0 24px rgba(85, 185, 255, 0.40),
        0 14px 28px rgba(54, 137, 215, 0.32);
    opacity: 0.99;
}

/* =========================================================
   AJUSTES MÓVIL
   ========================================================= */
@media (max-width: 767px) {
    .woocommerce ul.products li.product {
        border-radius: 18px;
        padding-bottom: 20px;
    }

    .woocommerce ul.products li.product .custom-loop-short-description {
        margin: 16px 16px 0;
        padding: 16px 16px 14px;
        border-radius: 16px;
    }

    .woocommerce ul.products li.product .custom-loop-short-description h4 {
        font-size: 17px;
    }

    .woocommerce ul.products li.product .custom-loop-short-description li {
        font-size: 14px;
    }

    .woocommerce ul.products li.product form.cart {
        padding: 0 16px;
    }

    .woocommerce ul.products li.product .qib-button.minus,
    .woocommerce ul.products li.product .qib-button.plus {
        width: 52px;
        height: 52px;
        min-width: 52px;
        min-height: 52px;
        font-size: 26px;
    }

    .woocommerce ul.products li.product .quantity input.qty,
    .woocommerce ul.products li.product .quantity .qty,
    .woocommerce ul.products li.product input.wqpmb_input_text.input-text.qty.text {
        width: 84px;
        height: 52px;
        min-width: 84px;
        min-height: 52px;
        font-size: 23px;
        line-height: 52px;
    }

    .woocommerce ul.products li.product form.cart .button.alt,
    .woocommerce ul.products li.product form.cart button.button.alt {
        font-size: 17px;
        padding: 16px 18px;
    }
}
@media (max-width: 767px) {
    .woocommerce ul.products li.product .custom-loop-short-description {
        border-radius: 20px;
    }

    .woocommerce ul.products li.product .custom-loop-short-description::before {
        border-radius: 20px;
    }

    .woocommerce ul.products li.product form.cart .button.alt,
    .woocommerce ul.products li.product form.cart button.button.alt {
        box-shadow:
            0 0 0 1px rgba(255,255,255,0.08),
            0 0 14px rgba(85, 185, 255, 0.24),
            0 8px 20px rgba(54, 137, 215, 0.22);
    }
}