:root {
	--wd-text-font: "Montserrat", Arial, Helvetica, sans-serif;
	--wd-text-font-weight: 400;
	--wd-text-color: #767676;
	--wd-text-font-size: 15px;
	--wd-title-font: "Playfair", Arial, Helvetica, sans-serif;
	--wd-title-font-weight: 600;
	--wd-title-color: #242424;
	--wd-entities-title-font: "Montserrat", Arial, Helvetica, sans-serif;
	--wd-entities-title-font-weight: 600;
	--wd-entities-title-color: #333333;
	--wd-entities-title-color-hover: rgb(51 51 51 / 65%);
	--wd-alternative-font: var(--wd-text-font);
	--wd-widget-title-font: "Montserrat", Arial, Helvetica, sans-serif;
	--wd-widget-title-font-weight: 600;
	--wd-widget-title-transform: uppercase;
	--wd-widget-title-color: #333;
	--wd-widget-title-font-size: 16px;
	--wd-header-el-font: "Lato", Arial, Helvetica, sans-serif;
	--wd-header-el-font-weight: 700;
	--wd-header-el-transform: uppercase;
	--wd-header-el-font-size: 13px;
	--wd-otl-style: dotted;
	--wd-otl-width: 2px;
	--wd-primary-color: rgb(0,172,255);
	--wd-alternative-color: rgb(17,134,224);
	--btn-default-bgcolor: #f7f7f7;
	--btn-default-bgcolor-hover: #efefef;
	--btn-accented-bgcolor: rgb(20,56,120);
	--btn-accented-bgcolor-hover: rgb(17,134,224);
	--wd-form-brd-width: 2px;
	--notices-success-bg: rgb(20,56,120);
	--notices-success-color: #fff;
	--notices-warning-bg: rgb(221,51,51);
	--notices-warning-color: #fff;
	--wd-link-color: rgb(30,115,190);
	--wd-link-color-hover: #242424;
	--wd-sticky-btn-height: 95px;
}
.wd-popup.wd-age-verify {
	background-color: rgb(117,117,117);
	background-image: url(https://reset21.uy/wp-content/uploads/2021/10/medical-marijuana-popup-18.jpg);
}
.wd-age-verify-wrap {
	--wd-popup-width: 500px;
}
.wd-popup.wd-promo-popup {
	background-color: #111111;
	background-image: url(https://reset21.uy/wp-content/uploads/2026/10/Gemini_Generated_Image_l6tlril6tlril6tl-scaled.jpg);
	background-repeat: no-repeat;
	background-size: cover;
	background-position: center center;
}
.wd-promo-popup-wrap {
	--wd-popup-width: 800px;
}
:is(.woodmart-woocommerce-layered-nav, .wd-product-category-filter) .wd-scroll-content {
	max-height: 223px;
}
.wd-page-title .wd-page-title-bg img {
	object-fit: cover;
	object-position: center center;
}
.wd-footer {
	background-color: rgb(0,0,0);
	background-image: none;
}
:is(.page, .search-no-results, .error404) :is(.wd-page-content, .whb-header) {
	background-color: rgb(255,255,255);
	background-image: none;
}
.woodmart-archive-shop:not(.single-product) :is(.wd-page-content, .whb-header) {
	background-color: rgb(255,255,255);
	background-image: none;
}
.single-product :is(.wd-page-content, .whb-header) {
	background-color: rgb(255,255,255);
	background-image: none;
}
.mfp-wrap.wd-popup-quick-view-wrap {
	--wd-popup-width: 920px;
}

@media (max-width: 1024px) {
	:root {
		--wd-sticky-btn-height: 95px;
	}

}

@media (max-width: 768.98px) {
	:root {
		--wd-sticky-btn-height: 42px;
	}

}
:root{
--wd-container-w: 1222px;
--wd-form-brd-radius: 0px;
--btn-default-color: #333;
--btn-default-color-hover: #333;
--btn-accented-color: #fff;
--btn-accented-color-hover: #fff;
--btn-default-brd-radius: 0px;
--btn-default-box-shadow: none;
--btn-default-box-shadow-hover: none;
--btn-default-box-shadow-active: none;
--btn-default-bottom: 0px;
--btn-accented-bottom-active: -1px;
--btn-accented-brd-radius: 0px;
--btn-accented-box-shadow: inset 0 -2px 0 rgba(0, 0, 0, .15);
--btn-accented-box-shadow-hover: inset 0 -2px 0 rgba(0, 0, 0, .15);
--wd-brd-radius: 0px;
}

@media (min-width: 1222px) {
section.elementor-section.wd-section-stretch > .elementor-container {
margin-left: auto;
margin-right: auto;
}
}


.wd-page-title {
background-color: #0a0a0a;
}

/* ========================================================
   REDISEÑO PACKS RESET 21 (ESTILO EDITORIAL PREMIUM)
   ======================================================== */

/* Contenedor principal de los packs */
.custom-pack-selector {
  display: flex !important;
  flex-direction: column !important;
  gap: 16px !important;
  width: 100% !important;
  max-width: 440px !important;
  margin-top: 15px !important;
  margin-bottom: 25px !important;
}

/* Tarjeta individual */
.custom-pack-card {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  background-color: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 8px !important;
  padding: 16px 20px !important;
  cursor: pointer !important;
  box-shadow: 0 1px 3px rgba(15, 44, 89, 0.05) !important;
  transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1) !important;
  box-sizing: border-box !important;
}

.custom-pack-card:hover {
  border-color: #d4a342 !important;
  background-color: #faf9f6 !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 6px 12px rgba(212, 163, 66, 0.08) !important;
}

/* Tarjeta seleccionada / activa */
.custom-pack-card.active {
  border: 1.5px solid #0f2c59 !important;
  background-color: #ffffff !important;
  box-shadow: 0 4px 15px rgba(15, 44, 89, 0.08) !important;
}

/* Etiqueta MÁS ELEGIDO (Dorado corporativo) */
.custom-pack-card .pack-badge {
  position: absolute !important;
  top: -10px !important;
  left: 24px !important;
  transform: none !important;
  background-color: #d4a342 !important;
  color: #ffffff !important;
  font-size: 8px !important;
  font-weight: 800 !important;
  padding: 3px 10px !important;
  border-radius: 3px !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
  font-family: serif !important;
  z-index: 2 !important;
}

/* Columna izquierda */
.custom-pack-card .pack-left {
  display: flex !important;
  flex-direction: column !important;
  justify-content: center !important;
  gap: 3px !important;
}

.custom-pack-card .pack-title-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.custom-pack-card .pack-name {
  color: #0f2c59 !important;
  font-size: 14px !important;
  font-weight: 700 !important;
}

/* Cápsula de dosis (Azul noche) */
.custom-pack-card .pack-caps {
  background-color: #0f2c59 !important;
  color: #ffffff !important;
  font-size: 9px !important;
  font-weight: 600 !important;
  padding: 4px 10px !important;
  border-radius: 4px !important;
  letter-spacing: 0.3px !important;
}

.custom-pack-card .pack-sub {
  color: #a0aec0 !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  letter-spacing: 0.5px !important;
  text-transform: uppercase !important;
}

/* Columna derecha: Precios */
.custom-pack-card .pack-right {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-end !important;
  justify-content: center !important;
  line-height: 1.1 !important;
}

.custom-pack-card .pack-price {
  color: #0f2c59 !important;
  font-size: 16px !important;
  font-weight: 800 !important;
}

.custom-pack-card .pack-old-price {
  color: #cbd5e1 !important;
  font-size: 11px !important;
  text-decoration: line-through !important;
  margin-top: 2px !important;
}

/* Ocultar la fila/tabla nativa de selección de variación */
.single-product table.variations,
.single-product-page table.variations,
.home table.variations {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Ocultar el enlace de "Limpiar" (reset variations) */
.reset_variations,
a.reset_variations {
    display: none !important;
}

/* fin capsulas */


/* Botón de compra dorado */
.single_add_to_cart_button.button {
    background-color: #d89e2c !important;
    color: #ffffff !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    border-radius: 6px !important;
    padding: 16px 20px !important;
    text-transform: uppercase;
    width: 100% !important;
}

/* Color normal del botón Añadir al carrito */
.single-product .single_add_to_cart_button.button {
    background-color: rgb(20,56,120) !important; /* Color de fondo principal */
    color: #ffffff !important;            /* Color del texto */
    border-color: rgb(20,56,120) !important;     /* Color del borde si aplica */
}

/* Color al pasar el cursor (Hover) */
.single-product .single_add_to_cart_button.button:hover {
    background-color: rgb(17,134,224) !important; /* Color de fondo al hacer hover */
    color: #ffffff !important;
    border-color: rgb(17,134,224) !important;
}


/* Eliminar contenedor de pestañas del producto */
.single-product .product-tabs-wrapper {
    display: none !important;
}

/* Ocultar migas de pan generadas dentro del producto o shortcode */
.woocommerce-breadcrumb,
.wd-breadcrumbs,
.yoast-breadcrumbs,
.rank-math-breadcrumb,
.single-product-page .woocommerce-breadcrumb {
    display: none !important;
}

/* Si solo quieres ocultarlas cuando se usa en la Home / Landing */
.home .woocommerce-breadcrumb,
.home .wd-breadcrumbs {
    display: none !important;
}

/* Ocultar botón 'Back to products' y navegación de productos de WoodMart */
.wd-products-nav,
.woodmart-products-nav,
.single-product-page .wd-products-nav,
.single-product-page .woodmart-products-nav {
    display: none !important;
}

/* Corregir estructura horizontal del selector de cantidad */
.single-product form.cart .quantity,
.home form.cart .quantity {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    border: 1px solid #e0e0e0 !important;
    border-radius: 6px !important;
    overflow: hidden !important;
    height: 48px !important;
    width: 130px !important;
    margin-right: 12px !important;
    margin-bottom: 0 !important;
}

/* Botones de + y - */
.single-product form.cart .quantity .minus,
.single-product form.cart .quantity .plus,
.home form.cart .quantity .minus,
.home form.cart .quantity .plus {
    width: 38px !important;
    height: 100% !important;
    line-height: 46px !important;
    background-color: #f7f7f7 !important;
    color: #333333 !important;
    border: none !important;
    font-size: 16px !important;
    cursor: pointer !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    margin: 0 !important;
}

.single-product form.cart .quantity .minus:hover,
.single-product form.cart .quantity .plus:hover,
.home form.cart .quantity .minus:hover,
.home form.cart .quantity .plus:hover {
    background-color: #e9e9e9 !important;
}

/* Campo numérico central */
.single-product form.cart .quantity input.qty,
.home form.cart .quantity input.qty {
    width: 54px !important;
    height: 100% !important;
    border: none !important;
    border-left: 1px solid #e0e0e0 !important;
    border-right: 1px solid #e0e0e0 !important;
    text-align: center !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #111111 !important;
    padding: 0 !important;
    margin: 0 !important;
    background: #ffffff !important;
}

/* Quitar flechas nativas del navegador en inputs numéricos */
.single-product form.cart .quantity input.qty::-webkit-outer-spin-button,
.single-product form.cart .quantity input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}

/* Forzar ancho completo al contenedor del slider */
.home .woodmart-slider,
.home .wd-slider,
.home .wd-slider-wrapper {
    width: 100vw !important;
    position: relative !important;
    left: 50% !important;
    right: 50% !important;
    margin-left: -50vw !important;
    margin-right: -50vw !important;
}

/* 1. Forzar al contenedor de los packs a ocupar toda la fila y romperla */
.custom-pack-selector {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    flex: 1 1 100% !important;
    max-width: 100% !important;
    clear: both !important;
    margin-bottom: 25px !important;
}

/* 2. Forzar al contenedor del formulario y tabla a que no permitan elementos a los lados */
.single-product form.variations_form,
.home form.variations_form,
.single-product-page form.variations_form {
    display: block !important;
    width: 100% !important;
}

.single-product form.variations_form .variations,
.home form.variations_form .variations {
    display: block !important;
    width: 100% !important;
    float: none !important;
    clear: both !important;
    margin-bottom: 0 !important;
}

/* 3. El bloque donde se ubica el precio, cantidad y botón debe empezar en una fila nueva */
.single-product .single_variation_wrap,
.home .single_variation_wrap,
.single-product .woocommerce-variation-add-to-cart,
.home .woocommerce-variation-add-to-cart {
    display: block !important;
    width: 100% !important;
    clear: both !important;
    margin-top: 20px !important;
    float: none !important;
}

/* 4. Mostrar el precio de la variación arriba de la fila de compra */
.single-product .woocommerce-variation-price,
.home .woocommerce-variation-price {
    display: block !important;
    width: 100% !important;
    margin-bottom: 12px !important;
}

/* 5. Alinear ÚNICAMENTE el selector [- 1 +] y el botón azul en la misma fila horizontal */
.single-product .woocommerce-variation-add-to-cart,
.home .woocommerce-variation-add-to-cart {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: 12px !important;
    width: 100% !important;
}

.single-product form.cart .quantity,
.home form.cart .quantity {
    display: inline-flex !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
}

.single-product form.cart button.single_add_to_cart_button,
.home form.cart button.single_add_to_cart_button {
    flex: 1 1 auto !important;
    height: 48px !important;
    margin: 0 !important;
    width: auto !important;
    display: block !important;
}


/* Ajustar texto y proporciones del botón de carrito en móviles */
@media (max-width: 768px) {
    .single-product form.cart button.single_add_to_cart_button,
    .home form.cart button.single_add_to_cart_button,
    .single-product-page form.cart button.single_add_to_cart_button {
        font-size: 13px !important;       /* Reduce el tamaño del texto */
        padding: 10px 12px !important;    /* Reduce el relleno interno lateral */
        letter-spacing: 0px !important;   /* Evita separación excesiva entre letras */
        white-space: nowrap !important;   /* Mantiene el texto en una sola línea */
    }

    /* Reducir ligeramente el ancho del selector de cantidad para darle más espacio al botón */
    .single-product form.cart .quantity,
    .home form.cart .quantity {
        width: 105px !important;
        min-width: 105px !important;
    }

    .single-product form.cart .quantity input.qty,
    .home form.cart .quantity input.qty {
        width: 40px !important;
        font-size: 13px !important;
    }

    .single-product form.cart .quantity .minus,
    .single-product form.cart .quantity .plus,
    .home form.cart .quantity .minus,
    .home form.cart .quantity .plus {
        width: 32px !important;
    }
}


/* Quita los controles nativos del navegador y muestra el cursor de mano */
video {
    cursor: pointer !important;
}

/* Ocultar barra de controles en reproductores de navegadores WebKit/Blink */
video::-webkit-media-controls-enclosure,
video::-webkit-media-controls-panel {
    display: none !important;
    -webkit-appearance: none;
}






/*cambios ultimos*/
/* Ocultar únicamente la descripción corta en la Home */
.home .product .woocommerce-product-details__short-description {
    display: none !important;
}



/* Botón Sticky en mayúsculas y precio destacado */
.wd-sticky-btn .single_add_to_cart_button,
.wd-sticky-btn .add_to_cart_button {
    text-transform: uppercase !important;
    font-weight: 700 !important;
    letter-spacing: 0.5px !important;
    padding-left: 20px !important;
    padding-right: 20px !important;
}

/* Ocultar precios viejos tachados en la barra si molestan */
.wd-sticky-btn .price del {
    opacity: 0.6 !important;
    margin-right: 5px !important;
}



/* ========================================================
   AJUSTE DE ANCHO Y MÁRGENES DEL CHECKOUT (FUNNELKIT)
   ======================================================== */

/* 1. Contenedor principal: ancho máximo y centrado fluido */
.wfk-checkout-page,
.wfk-checkout-form,
.wfk-main-wrapper,
.woocommerce-checkout .site-content .container {
    max-width: 1240px !important; /* Ancho total del contenedor */
    width: 94% !important;        /* Margen de seguridad en bordes */
    margin: 0 auto !important;     /* Centrado horizontal automático */
    padding-left: 15px !important;
    padding-right: 15px !important;
    box-sizing: border-box !important;
}

/* 2. Proporción y separación de las 2 columnas */
@media (min-width: 992px) {
    .wfk-checkout-page .wfk-main,
    .wfk-checkout-form .wfk-main,
    .wfk-left-panel {
        padding-right: 35px !important; /* Espacio entre columnas */
        box-sizing: border-box !important;
    }

    .wfk-checkout-page .wfk-sidebar,
    .wfk-checkout-form .wfk-sidebar,
    .wfk-right-panel,
    .wfk-mini-cart-section {
        padding-left: 35px !important;
        box-sizing: border-box !important;
    }
}

/* 3. Reducir el espacio superior bajo la barra negra */
.woocommerce-checkout .main-page-wrapper,
.wfk-checkout-page {
    padding-top: 30px !important;
}


/* ========================================================
   FONDO NEGRO SOLO EN LA PÁGINA DE INICIO (HOME)
   ======================================================== */
/*body.home,
body.home .main-page-wrapper,
body.home .website-wrapper,
body.home .site-content {
    background-color: #000000 !important;
}*/

/* Forzar que las filas/contenedores de maquetador no impongan fondo blanco */
/*body.home .vc_row,
body.home .elementor-section {
    background-color: transparent !important;
}*/



/* Botón de compra dorado con sombra suave */
.single_variation_wrap .single_add_to_cart_button,
.woocommerce-variation-add-to-cart .single_add_to_cart_button {
    background: #d4a342 !important;
    background-color: #d4a342 !important;
    color: #ffffff !important;
    font-size: 17px !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    border-radius: 8px !important;
    height: 54px !important;
    box-shadow: 0 4px 15px rgba(212, 163, 66, 0.3) !important;
    border: none !important;
    width: 100% !important;
    margin-bottom: 25px !important;
}

.single_variation_wrap .single_add_to_cart_button:hover {
    background-color: #be8e31 !important;
}

/* Contenedor de las 3 insignias */
.reset21-trust-badges {
    display: flex !important;
    justify-content: space-between !important;
    align-items: flex-start !important;
    gap: 15px !important;
    margin-top: 20px !important;
    margin-bottom: 25px !important;
    width: 100% !important;
    box-sizing: border-box !important;
}

.reset21-trust-badges .badge-item {
    flex: 1 1 33.33% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
}

/* Cuadrados negros con esquinas redondeadas para el icono */
.reset21-trust-badges .badge-icon {
    width: 44px !important;
    height: 44px !important;
    background-color: #0d0d0d !important;
    border-radius: 10px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin-bottom: 10px !important;
}

.reset21-trust-badges .badge-icon svg {
    width: 22px !important;
    height: 22px !important;
}

/* Textos bajo los íconos */
.reset21-trust-badges .badge-item p {
    font-size: 13px !important;
    line-height: 1.35 !important;
    color: #111827 !important;
    margin: 0 !important;
    padding: 0 !important;
}

/* Forzar que el bloque de insignias pase a una fila nueva debajo del botón */
.reset21-trust-badges {
    flex-basis: 100% !important;
    width: 100% !important;
    order: 99 !important;
    clear: both !important;
    margin-top: 25px !important;
}

/* Permitir que el contenedor del formulario envuelva los elementos en múltiples filas */
form.cart,
.woocommerce-variation-add-to-cart,
.single_variation_wrap {
    flex-wrap: wrap !important;
}

.reset21-trust-badges .badge-item p strong {
    font-weight: 700 !important;
    color: #000000 !important;
}

/* Fondo azul con esquinas redondeadas */
.reset21-trust-badges .badge-icon {
    background-color: #0f2c59 !important; /* Azul corporativo RESET 21 */
}

/* Ícono en color blanco */
.reset21-trust-badges .badge-icon svg {
    stroke: #ffffff !important;
}


/* ========================================================
   CARRITO MINIMALISTA SHOPIFY (1 COLUMNA COMPLETA)
   ======================================================== */

/* 1. Contenedor general centrado y limpio */
.woocommerce-cart .woocommerce {
    max-width: 960px !important;
    margin: 40px auto !important;
    padding: 0 20px !important;
    display: flex !important;
    flex-direction: column !important;
}

/* Título superior "Tu carrito" */
.woocommerce-cart .entry-title,
.woocommerce-cart h1.page-title {
    font-size: 26px !important;
    font-weight: 800 !important;
    color: #111827 !important;
    text-align: left !important;
    margin-bottom: 25px !important;
}

/* 2. Formulario de tabla a ancho completo (sin columna lateral) */
.woocommerce-cart .woocommerce-cart-form {
    width: 100% !important;
    flex: 1 1 100% !important;
    border-bottom: 1px solid #eeeeee !important;
    padding-bottom: 30px !important;
}

/* Cabeceras de columnas sutiles */
.woocommerce-cart table.cart thead th {
    font-size: 11px !important;
    font-weight: 600 !important;
    text-transform: uppercase !important;
    letter-spacing: 1px !important;
    color: #9ca3af !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid #e5e7eb !important;
    padding: 12px 0 !important;
    background: transparent !important;
}

/* Filas de productos con separador tenue */
.woocommerce-cart table.cart tbody tr.cart_item td {
    padding: 22px 0 !important;
    border-top: none !important;
    border-left: none !important;
    border-right: none !important;
    border-bottom: 1px solid #f3f4f6 !important;
    vertical-align: middle !important;
    background: transparent !important;
}

/* Imagen del producto */
.woocommerce-cart table.cart td.product-thumbnail {
    width: 80px !important;
    padding-right: 15px !important;
}
.woocommerce-cart table.cart td.product-thumbnail img {
    width: 72px !important;
    height: 72px !important;
    object-fit: cover !important;
    border-radius: 8px !important;
}

/* Título y detalles del producto */
.woocommerce-cart table.cart td.product-name a {
    font-size: 14px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    text-decoration: none !important;
    display: inline-block !important;
    margin-bottom: 4px !important;
}

/* Ocultar columna redundante de precio unitario si se prefiere minimalista */
.woocommerce-cart table.cart th.product-price,
.woocommerce-cart table.cart td.product-price {
    display: none !important;
}

/* Subtotal / Precio final alineado a la derecha */
.woocommerce-cart table.cart td.product-subtotal,
.woocommerce-cart table.cart th.product-subtotal {
    text-align: right !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #111827 !important;
}

/* 3. Selector de cantidad: píldora suave con signos diminutos */
.woocommerce-cart td.product-quantity .quantity,
.woocommerce-cart .quantity {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    width: 96px !important;
    height: 34px !important;
    background-color: #faf8f5 !important; /* Tono crema tenue de la imagen */
    border: 1px solid #f0ece1 !important;
    border-radius: 6px !important;
    padding: 0 4px !important;
    margin: 0 auto !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}

.woocommerce-cart .quantity .minus,
.woocommerce-cart .quantity .plus,
.woocommerce-cart .quantity input[type="button"] {
    width: 24px !important;
    height: 100% !important;
    line-height: 32px !important;
    background: transparent !important;
    border: none !important;
    color: #6b7280 !important;
    font-size: 12px !important;
    font-weight: 600 !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    text-align: center !important;
    box-shadow: none !important;
}

.woocommerce-cart .quantity input.qty {
    width: 36px !important;
    height: 100% !important;
    line-height: 32px !important;
    border: none !important;
    background: transparent !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    text-align: center !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
    -moz-appearance: textfield !important;
}

.woocommerce-cart .quantity input.qty::-webkit-outer-spin-button,
.woocommerce-cart .quantity input.qty::-webkit-inner-spin-button {
    -webkit-appearance: none !important;
    margin: 0 !important;
}

/* Ocultar botón "Actualizar carrito" y campo de cupón si no lo necesitas abajo */
.woocommerce-cart .cart-actions button[name="update_cart"],
.woocommerce-cart .cart-actions .coupon {
    display: none !important;
}

/* 4. Bloque de Totales: tarjeta limpia abajo a la derecha */
.woocommerce-cart .cart_totals {
    width: 100% !important;
    max-width: 340px !important;
    margin-left: auto !important; /* Lo empuja totalmente a la derecha */
    margin-right: 0 !important;
    background: transparent !important;
    border: none !important;
    padding: 25px 0 0 0 !important;
    box-shadow: none !important;
}

/* Ocultar título gigante "TOTALES DEL CARRITO" y fila de envíos de la tabla */
.woocommerce-cart .cart_totals h2,
.woocommerce-cart .cart_totals tr.shipping {
    display: none !important;
}

.woocommerce-cart .cart_totals table.shop_table {
    border: none !important;
    margin-bottom: 15px !important;
    background: transparent !important;
}

.woocommerce-cart .cart_totals table.shop_table tr th,
.woocommerce-cart .cart_totals table.shop_table tr td {
    border: none !important;
    padding: 6px 0 !important;
    background: transparent !important;
}

.woocommerce-cart .cart_totals table.shop_table tr.order-total th {
    font-size: 15px !important;
    font-weight: 700 !important;
    color: #111827 !important;
    text-align: left !important;
}

.woocommerce-cart .cart_totals table.shop_table tr.order-total td {
    font-size: 16px !important;
    font-weight: 800 !important;
    color: #111827 !important;
    text-align: right !important;
}

/* 5. Botón dorado "PAGO SEGURO" */
.woocommerce-cart .wc-proceed-to-checkout a.checkout-button {
    width: 100% !important;
    height: 48px !important;
    min-height: 48px !important;
    line-height: 48px !important;
    background-color: #d4a342 !important;
    color: #ffffff !important;
    font-size: 14px !important;
    font-weight: 800 !important;
    letter-spacing: 0.5px !important;
    text-transform: uppercase !important;
    border-radius: 6px !important;
    text-align: center !important;
    border: none !important;
    box-shadow: 0 4px 12px rgba(212, 163, 66, 0.25) !important;
    display: block !important;
    padding: 0 !important;
    margin-top: 10px !important;
}

.woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover {
    background-color: #be8e31 !important;
}


/* ========================================================
   ESTILO PRECIO DINÁMICO VARIACIÓN (RESET 21)
   ======================================================== */
.woocommerce-variation-price {
    display: flex !important;
    align-items: baseline !important;
    gap: 8px !important;
    margin-bottom: 14px !important;
}

/* Etiqueta previa opcional para dar contexto */
.woocommerce-variation-price::before {
    content: "Total a pagar: " !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    color: #64748b !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

/* Importe en azul corporativo RESET 21 */
.woocommerce-variation-price .price,
.woocommerce-variation-price .price .amount,
.woocommerce-variation-price .price ins .amount {
    font-size: 24px !important;
    font-weight: 900 !important;
    color: #0f2c59 !important;
    text-decoration: none !important;
    line-height: 1 !important;
    letter-spacing: -0.5px !important;
}

/* Precio anterior tachado (si la variación tiene rebaja) */
.woocommerce-variation-price .price del,
.woocommerce-variation-price .price del .amount {
    font-size: 15px !important;
    font-weight: 600 !important;
    color: #94a3b8 !important;
    text-decoration: line-through !important;
    margin-right: 6px !important;
}




/* ========================================================
   LANDING TAB RESPONSIVE (DESKTOP & MOBILE) - RESET 21
   ======================================================== */
.r21-landing-section {
  background-color: #081d3d !important;
  color: #ffffff !important;
  padding: 40px 24px !important;
  max-width: 1200px !important;
  margin: 0 auto !important;
  box-sizing: border-box !important;
  border-radius: 16px !important;
}

/* Selector MEN / FEM superior */
.r21-top-toggle {
  display: flex !important;
  justify-content: flex-end !important;
  margin-bottom: 25px !important;
}

.r21-toggle-pill {
  display: inline-flex !important;
  background-color: rgba(255, 255, 255, 0.08) !important;
  border: 1px solid rgba(255, 255, 255, 0.25) !important;
  border-radius: 40px !important;
  padding: 3px !important;
  width: 200px !important;
}

.r21-tab-btn {
  flex: 1 !important;
  background: transparent !important;
  border: none !important;
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  padding: 8px 0 !important;
  border-radius: 30px !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
}

.r21-tab-btn.active {
  background-color: #ffffff !important;
  color: #081d3d !important;
}

/* Visibilidad de pestañas */
.r21-tab-content {
  display: none !important;
}
.r21-tab-content.active {
  display: block !important;
}

/* GRID PRINCIPAL: 2 Columnas en Desktop */
.r21-desktop-grid {
  display: grid !important;
  grid-template-columns: 1.05fr 1fr !important;
  gap: 48px !important;
  align-items: start !important;
}

/* COLUMNA IZQUIERDA: GALERÍA */
.r21-main-img-wrap {
  width: 100% !important;
  background: #ffffff !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3) !important;
}

.r21-main-img-wrap img {
  width: 100% !important;
  height: auto !important;
  display: block !important;
  object-fit: contain !important;
}

.r21-thumbs-row {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 12px !important;
  margin-top: 15px !important;
}

.thumb-box {
  border: 1.5px solid rgba(255, 255, 255, 0.3) !important;
  border-radius: 10px !important;
  aspect-ratio: 1/1 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  cursor: pointer !important;
  background: rgba(255, 255, 255, 0.05) !important;
  font-size: 11px !important;
  color: #cbd5e1 !important;
  overflow: hidden !important;
  transition: all 0.2s ease !important;
}

.thumb-box img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.thumb-box.active, .thumb-box:hover {
  border-color: #d4a342 !important;
  background: rgba(255, 255, 255, 0.15) !important;
}

/* COLUMNA DERECHA: TEXTOS */
.r21-rating-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  font-size: 13px !important;
  color: #cbd5e1 !important;
  margin-bottom: 8px !important;
}
.r21-rating-row .stars {
  color: #f1c40f !important;
}

.r21-subtitle-tag {
  display: block !important;
  font-size: 10px !important;
  font-weight: 700 !important;
  letter-spacing: 1.2px !important;
  color: #94a3b8 !important;
  margin-bottom: 8px !important;
}

.r21-product-title {
  font-size: 38px !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  line-height: 1.15 !important;
  margin: 0 0 8px 0 !important;
}

.r21-highlight-benefit {
  font-size: 19px !important;
  font-weight: 600 !important;
  color: #e2e8f0 !important;
  margin-bottom: 20px !important;
}

.r21-benefits-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 24px 0 !important;
}

.r21-benefits-list li {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  font-size: 14px !important;
  color: #f8fafc !important;
  margin-bottom: 10px !important;
}

.r21-benefits-list .check-icon {
  width: 18px !important;
  height: 18px !important;
  background: #ffffff !important;
  color: #081d3d !important;
  border-radius: 50% !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 10px !important;
  font-weight: 900 !important;
  flex-shrink: 0 !important;
}

/* 4 TARJETAS DE PACKS */
.r21-packs-group {
  display: flex !important;
  flex-direction: column !important;
  gap: 10px !important;
  margin-bottom: 22px !important;
}

.r21-pack-option {
  position: relative !important;
  display: block !important;
  cursor: pointer !important;
}

.r21-pack-option input[type="radio"] {
  display: none !important;
}

.r21-pack-option .pack-content {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
  border-radius: 10px !important;
  padding: 14px 18px !important;
  transition: all 0.2s ease !important;
}

.r21-pack-option:hover .pack-content {
  border-color: #d4a342 !important;
}

/* Tarjeta seleccionada */
.r21-pack-option.selected .pack-content {
  border: 1.5px solid #d4a342 !important;
  background: rgba(212, 163, 66, 0.1) !important;
}

.pack-info strong {
  display: block !important;
  font-size: 15px !important;
  color: #ffffff !important;
}

.pack-info small {
  display: block !important;
  font-size: 11px !important;
  color: #94a3b8 !important;
  margin-top: 2px !important;
}

.pack-price-box {
  text-align: right !important;
}

.pack-price-box .price-val {
  font-size: 17px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
}

.pack-price-box .old-price-val {
  display: block !important;
  font-size: 11px !important;
  color: #94a3b8 !important;
}

.floating-choice-tag {
  position: absolute !important;
  top: -8px !important;
  left: 20px !important;
  background: #d4a342 !important;
  color: #ffffff !important;
  font-size: 8px !important;
  font-weight: 800 !important;
  padding: 2px 8px !important;
  border-radius: 3px !important;
  letter-spacing: 0.8px !important;
}

.discount-pill {
  background: #d4a342 !important;
  color: #ffffff !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  padding: 2px 6px !important;
  border-radius: 3px !important;
  margin-left: 6px !important;
}

.dot-badge {
  display: inline-block !important;
  width: 7px !important;
  height: 7px !important;
  border-radius: 50% !important;
  margin-left: 4px !important;
}
.blue-dot { background: #3b82f6 !important; }
.pink-dot { background: #ec4899 !important; }

/* Botón Blanco "AGREGAR AL CARRITO" */
.r21-cta-button {
  display: block !important;
  width: 100% !important;
  background: #ffffff !important;
  color: #081d3d !important;
  font-size: 15px !important;
  font-weight: 900 !important;
  text-align: center !important;
  padding: 16px 0 !important;
  border-radius: 30px !important;
  text-decoration: none !important;
  letter-spacing: 1px !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2) !important;
  transition: all 0.25s ease !important;
  box-sizing: border-box !important;
}

.r21-cta-button:hover {
  background: #f1f5f9 !important;
  transform: translateY(-1px) !important;
}

/* RESPONSIVE MÓVIL (< 900px) */
@media (max-width: 900px) {
  .r21-top-toggle {
    justify-content: center !important;
  }
  .r21-toggle-pill {
    width: 100% !important;
    max-width: 320px !important;
  }
  .r21-desktop-grid {
    grid-template-columns: 1fr !important;
    gap: 30px !important;
  }
  .r21-product-title {
    font-size: 30px !important;
  }
}


/* Transición suave para el cambio de color de fondo */
.r21-landing-section {
  transition: background-color 0.4s ease-in-out !important;
}

/* Color de fondo cuando está activo MEN (Azul Noche) */
.r21-landing-section.theme-men {
  background-color: #081d3d !important;
}

/* Fondo general de la sección para FEM */
.r21-landing-section.theme-fem {
  background-color: rgb(242, 210, 212) !important;
  color: #2b1124 !important;
}

/* Botón activo MEN dentro de la pastilla */
.theme-men .r21-tab-btn.active {
  background-color: #ffffff !important;
  color: #081d3d !important;
}

/* Botón activo FEM dentro de la pastilla */
.theme-fem .r21-tab-btn.active {
  background-color: #ffffff !important;
  color: #2b1124 !important;
}

/* Botón inferior "AGREGAR AL CARRITO" según el tab */
.theme-men .r21-cta-button {
  color: #081d3d !important;
}

.theme-fem .r21-cta-button {
  color: #2b1124 !important;
}

/* Resalte de la tarjeta seleccionada en FEM */
.theme-fem .r21-pack-option.selected .pack-content {
  border-color: #e07a9b !important;
  background: rgba(224, 122, 155, 0.12) !important;
}

.theme-fem .floating-choice-tag,
.theme-fem .discount-pill {
  background: #e07a9b !important;
  color: #ffffff !important;
}

.theme-fem .thumb-box.active,
.theme-fem .thumb-box:hover {
  border-color: #e07a9b !important;
}


/* ========================================================
   FORZAR ANCHO COMPLETO (FULL-WIDTH 100vw)
   ======================================================== */
.r21-landing-section {
  width: 100vw !important;
  max-width: 100vw !important;
  position: relative !important;
  left: 50% !important;
  right: 50% !important;
  margin-left: -50vw !important;
  margin-right: -50vw !important;
  border-radius: 0 !important; /* Elimina bordes redondeados en los extremos de la pantalla */
  box-sizing: border-box !important;
  padding: 50px calc((100vw - 1200px) / 2) !important; /* Centra el contenido interior manteniendo el fondo de borde a borde */
}

/* En pantallas menores a 1240px, mantener margen lateral de seguridad */
@media (max-width: 1240px) {
  .r21-landing-section {
    padding-left: 24px !important;
    padding-right: 24px !important;
  }
}


/* ========================================================
   TEMA FEM - FONDO ROSA CLARO rgb(242, 210, 212)
   ======================================================== */

/* Fondo general de la sección para FEM */
.r21-landing-section.theme-fem {
  background-color: rgb(242, 210, 212) !important;
  color: #2b1124 !important;
}

/* Selector superior MEN / FEM cuando está activo FEM */
.theme-fem .r21-toggle-pill {
  background-color: rgba(43, 17, 36, 0.06) !important;
  border-color: rgba(43, 17, 36, 0.2) !important;
}

.theme-fem .r21-tab-btn {
  color: #4a203e !important;
}

.theme-fem .r21-tab-btn.active {
  background-color: #2b1124 !important;
  color: #ffffff !important;
}

/* Textos informativos de FEM a colores oscuros */
.theme-fem #tab-fem .r21-rating-row {
  color: #633352 !important;
}

.theme-fem #tab-fem .r21-subtitle-tag {
  color: #7a4267 !important;
}

.theme-fem #tab-fem .r21-product-title {
  color: #2b1124 !important;
}

.theme-fem #tab-fem .r21-highlight-benefit {
  color: #4a203e !important;
}

/* Lista de beneficios */
.theme-fem #tab-fem .r21-benefits-list li {
  color: #2b1124 !important;
}

.theme-fem #tab-fem .r21-benefits-list .check-icon {
  background: #2b1124 !important;
  color: #ffffff !important;
}

/* Miniaturas de galería */
.theme-fem .thumb-box {
  background: rgba(255, 255, 255, 0.6) !important;
  border-color: rgba(43, 17, 36, 0.15) !important;
  color: #633352 !important;
}

.theme-fem .thumb-box.active,
.theme-fem .thumb-box:hover {
  border-color: #2b1124 !important;
}

/* Tarjetas de packs FEM */
.theme-fem #tab-fem .r21-pack-option .pack-content {
  background: rgba(255, 255, 255, 0.7) !important;
  border: 1px solid rgba(43, 17, 36, 0.15) !important;
}

.theme-fem #tab-fem .r21-pack-option:hover .pack-content {
  border-color: #2b1124 !important;
  background: #ffffff !important;
}

.theme-fem #tab-fem .r21-pack-option.selected .pack-content {
  border: 2px solid #2b1124 !important;
  background: #ffffff !important;
  box-shadow: 0 4px 15px rgba(43, 17, 36, 0.1) !important;
}

.theme-fem #tab-fem .pack-info strong {
  color: #2b1124 !important;
}

.theme-fem #tab-fem .pack-info small {
  color: #7a4267 !important;
}

.theme-fem #tab-fem .pack-price-box .price-val {
  color: #2b1124 !important;
}

.theme-fem #tab-fem .pack-price-box .old-price-val {
  color: #a37291 !important;
}

/* Etiquetas flotantes y badges */
.theme-fem #tab-fem .floating-choice-tag {
  background: #2b1124 !important;
  color: #ffffff !important;
}

.theme-fem #tab-fem .discount-pill {
  background: #d4a342 !important;
  color: #ffffff !important;
}

/* Botón inferior AGREGAR AL CARRITO */
.theme-fem #btn-add-fem.r21-cta-button {
  background: #2b1124 !important;
  color: #ffffff !important;
  box-shadow: 0 6px 18px rgba(43, 17, 36, 0.25) !important;
}

.theme-fem #btn-add-fem.r21-cta-button:hover {
  background: #1a0815 !important;
}

/* ========================================================
   DIVISOR INFERIOR EN FORMA DE SEMICÍRCULO / CURVA
   ======================================================== */
.r21-landing-section {
  /* Añade espacio extra abajo para que la curva no tape el botón */
  padding-bottom: 90px !important; 
  
  /* Crea el arco inferior suave de extremo a extremo */
  clip-path: ellipse(115% 100% at 50% 0%) !important;
}



/* ========================================================
   BLOQUE 2 TARJETAS DUO (MEN / FEM) - RESET 21
   ======================================================== */
.r21-duo-cards-section {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 30px !important;
  max-width: 1200px !important;
  margin: 40px auto !important;
  padding: 0 20px !important;
  box-sizing: border-box !important;
}

/* Base de cada tarjeta */
.r21-duo-card {
  border-radius: 28px !important;
  padding: 30px !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: space-between !important;
  box-sizing: border-box !important;
  transition: transform 0.3s ease, box-shadow 0.3s ease !important;
}

.r21-duo-card:hover {
  transform: translateY(-4px) !important;
}

/* Contenedor blanco con esquinas curvas para la foto */
.r21-duo-card .card-image-wrap {
  width: 100% !important;
  background-color: #ffffff !important;
  border-radius: 20px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08) !important;
  margin-bottom: 30px !important;
}

.r21-duo-card .card-image-wrap img {
  width: 100% !important;
  height: auto !important;
  max-height: 380px !important;
  object-fit: contain !important;
  display: block !important;
}

/* Cuerpo de textos */
.r21-duo-card .card-body {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
}

.r21-duo-card .card-kicker {
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 1.5px !important;
  text-transform: uppercase !important;
  margin-bottom: 12px !important;
}

.r21-duo-card .card-title {
  font-family: inherit !important;
  font-size: 32px !important;
  font-weight: 900 !important;
  line-height: 1.15 !important;
  margin: 0 0 14px 0 !important;
  letter-spacing: -0.5px !important;
}

.r21-duo-card .card-desc {
  font-size: 14px !important;
  line-height: 1.55 !important;
  margin: 0 0 25px 0 !important;
}

/* Botones con estilo pastilla */
.r21-duo-card .card-btn {
  display: inline-block !important;
  padding: 12px 32px !important;
  border-radius: 30px !important;
  font-size: 12px !important;
  font-weight: 900 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  transition: all 0.25s ease !important;
}

/* ----------------------------------------------------
   ESTILOS ESPECÍFICOS: TARJETA MEN (Azul Noche)
   ---------------------------------------------------- */
.r21-duo-card.card-men {
  background-color: #081d3d !important;
  color: #ffffff !important;
  box-shadow: 0 10px 30px rgba(8, 29, 61, 0.15) !important;
}

.r21-duo-card.card-men .card-kicker {
  color: #94a3b8 !important;
}

.r21-duo-card.card-men .card-title {
  color: #ffffff !important;
}

.r21-duo-card.card-men .card-desc {
  color: #cbd5e1 !important;
}

.r21-duo-card.card-men .card-btn {
  background-color: #ffffff !important;
  color: #081d3d !important;
}

.r21-duo-card.card-men .card-btn:hover {
  background-color: #f1f5f9 !important;
}

/* ----------------------------------------------------
   ESTILOS ESPECÍFICOS: TARJETA FEM (Rosa Claro)
   ---------------------------------------------------- */
.r21-duo-card.card-fem {
  background-color: rgb(242, 210, 212) !important;
  color: #2b1124 !important;
  box-shadow: 0 10px 30px rgba(242, 210, 212, 0.35) !important;
}

.r21-duo-card.card-fem .card-kicker {
  color: #8f5848 !important; /* Tono canela/terracota suave de la imagen */
}

.r21-duo-card.card-fem .card-title {
  color: #0f2c59 !important; /* Azul marino editorial */
}

.r21-duo-card.card-fem .card-desc {
  color: #63434d !important;
}

.r21-duo-card.card-fem .card-btn {
  background-color: #0f2c59 !important;
  color: #ffffff !important;
}

.r21-duo-card.card-fem .card-btn:hover {
  background-color: #081d3d !important;
}

/* ----------------------------------------------------
   RESPONSIVE EN MÓVILES (< 850px)
   ---------------------------------------------------- */
@media (max-width: 850px) {
  .r21-duo-cards-section {
    grid-template-columns: 1fr !important;
    gap: 25px !important;
    margin: 25px auto !important;
  }

  .r21-duo-card {
    padding: 24px !important;
    border-radius: 22px !important;
  }

  .r21-duo-card .card-title {
    font-size: 26px !important;
  }
}


/* ========================================================
   SECCIÓN 3 CICLOS / HÁBITO (RESET 21)
   ======================================================== */
.r21-ciclos-section {
  max-width: 1200px !important;
  margin: 50px auto !important;
  padding: 0 20px !important;
  box-sizing: border-box !important;
  font-family: inherit !important;
}

/* Grid de las 3 columnas */
.r21-ciclos-grid {
  display: grid !important;
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 28px !important;
  margin-bottom: 35px !important;
}

/* Tarjeta individual */
.r21-ciclo-card {
  background: #ffffff !important;
  border-radius: 24px !important;
  padding: 24px !important;
  box-shadow: 0 10px 30px rgba(15, 44, 89, 0.05) !important;
  border: 1px solid #f1f5f9 !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.r21-ciclo-card:hover {
  transform: translateY(-4px) !important;
  box-shadow: 0 14px 35px rgba(15, 44, 89, 0.09) !important;
}

/* Marco para la imagen / ilustración */
.ciclo-media-box {
  width: 100% !important;
  height: 200px !important;
  background-color: #e8f0fe !important; /* Tono pastel suave de la captura */
  border-radius: 16px !important;
  overflow: hidden !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 22px !important;
}

.ciclo-media-box .ciclo-img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  display: block !important;
}

.ciclo-media-box .placeholder-text {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #5f7d9c !important;
  letter-spacing: 0.5px !important;
}

/* Encabezado con píldora y estado */
.ciclo-header {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 12px !important;
}

.ciclo-pill {
  background-color: #0b49b3 !important; /* Azul eléctrico de la captura */
  color: #ffffff !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  padding: 4px 12px !important;
  border-radius: 20px !important;
  letter-spacing: 0.6px !important;
}

.ciclo-status {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #475569 !important;
}

/* Textos de la tarjeta */
.ciclo-title {
  font-size: 22px !important;
  font-weight: 900 !important;
  color: #0f2c59 !important;
  margin: 0 0 10px 0 !important;
  line-height: 1.25 !important;
  letter-spacing: -0.3px !important;
}

.ciclo-desc {
  font-size: 14px !important;
  color: #64748b !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}

/* BANNER INFERIOR */
.r21-ciclos-banner {
  background: #ffffff !important;
  border: 1px solid #cbd5e1 !important;
  border-radius: 20px !important;
  padding: 18px 28px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 20px !important;
  box-sizing: border-box !important;
}

.banner-text {
  font-size: 15px !important;
  color: #334155 !important;
  line-height: 1.5 !important;
}

.banner-text strong {
  color: #0f2c59 !important;
  font-weight: 800 !important;
}

/* Botón CTA del banner */
.banner-cta-btn {
  background-color: #0b2246 !important; /* Azul noche corporativo */
  color: #ffffff !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  padding: 14px 28px !important;
  border-radius: 30px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: all 0.25s ease !important;
  box-shadow: 0 4px 12px rgba(11, 34, 70, 0.15) !important;
}

.banner-cta-btn:hover {
  background-color: #08162c !important;
  transform: translateY(-1px) !important;
}

/* RESPONSIVE (< 900px) */
@media (max-width: 900px) {
  .r21-ciclos-grid {
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .r21-ciclos-banner {
    flex-direction: column !important;
    text-align: center !important;
    padding: 24px 20px !important;
  }

  .banner-cta-btn {
    width: 100% !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }
}


/* ========================================================
   BARRA DE CARACTERÍSTICAS - CENTRADO ABSOLUTO Y ESPACIADO
   ======================================================== */
.r21-features-bar {
  width: 100% !important;
  max-width: 100% !important;
  display: flex !important;
  justify-content: center !important; /* Centra el bloque entero en la pantalla */
  align-items: center !important;
  margin: 50px 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}

.r21-features-container {
  display: flex !important;
  justify-content: center !important; /* Centra los 5 items entre sí */
  align-items: flex-start !important;
  gap: clamp(25px, 4vw, 70px) !important; /* Separación amplia y fluida según pantalla */
  width: 100% !important;
  max-width: 1250px !important; /* Espacio justo para que respiren sin desbordar */
  margin: 0 auto !important;
  padding: 0 24px !important;
  box-sizing: border-box !important;
}

/* Item individual */
.r21-feature-item {
  flex: 0 1 180px !important; /* Ancho parejo y fijo para cada icono */
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

/* Envoltorio circular dorado */
.r21-feature-icon-wrap {
  width: 86px !important;
  height: 86px !important;
  border-radius: 50% !important;
  border: 1.5px solid #d4a342 !important;
  background: rgba(212, 163, 66, 0.08) !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 18px !important;
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.25) !important;
  transition: transform 0.25s ease, background-color 0.25s ease !important;
}

.r21-feature-item:hover .r21-feature-icon-wrap {
  transform: translateY(-4px) !important;
  background-color: rgba(212, 163, 66, 0.18) !important;
  border-color: #f3c769 !important;
}

/* Iconos SVG dorados */
.r21-feature-icon-wrap svg {
  width: 34px !important;
  height: 34px !important;
  stroke: #d4a342 !important;
  stroke-width: 1.6 !important;
}

/* Textos en blanco para máximo contraste */
.r21-feature-text {
  font-family: inherit !important;
  font-size: 12.5px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  text-transform: uppercase !important;
  letter-spacing: 1.2px !important;
  line-height: 1.45 !important;
  max-width: 150px !important;
}

/* ========================================================
   RESPONSIVE (TABLETS Y MÓVILES)
   ======================================================== */
@media (max-width: 900px) {
  .r21-features-container {
    gap: 20px !important;
  }
  .r21-feature-icon-wrap {
    width: 70px !important;
    height: 70px !important;
  }
  .r21-feature-icon-wrap svg {
    width: 26px !important;
    height: 26px !important;
  }
  .r21-feature-text {
    font-size: 11px !important;
  }
}

@media (max-width: 680px) {
  .r21-features-container {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 32px 16px !important;
    justify-items: center !important;
  }
  
  .r21-feature-item:nth-child(5) {
    grid-column: span 2 !important;
  }
}

/* ========================================================
   GRILLA DE INGREDIENTES / COMPOSICIÓN (RESET 21)
   ======================================================== */
.r21-ingredients-section {
  max-width: 1200px !important;
  margin: 40px auto !important;
  padding: 0 20px !important;
  box-sizing: border-box !important;
  font-family: inherit !important;
}

/* Grilla de 4 columnas en Desktop */
.r21-ingredients-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 22px !important;
  width: 100% !important;
}

/* Tarjeta estándar blanca */
.r21-ing-card {
  background: #ffffff !important;
  border: 1px solid #eef2f6 !important;
  border-radius: 24px !important;
  padding: 24px 22px !important;
  box-shadow: 0 8px 24px rgba(12, 44, 92, 0.05) !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  box-sizing: border-box !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
  min-height: 220px !important;
}

.r21-ing-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 30px rgba(12, 44, 92, 0.08) !important;
}

/* Fila superior: Icono circular + Pastilla de dosis */
.ing-card-top {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  margin-bottom: 22px !important;
}

.ing-icon-wrap {
  width: 44px !important;
  height: 44px !important;
  border-radius: 50% !important;
  background-color: #e3effd !important; /* Celeste suave */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.ing-icon-wrap svg {
  width: 20px !important;
  height: 20px !important;
}

.ing-dosage-badge {
  background-color: #0c2c5c !important; /* Azul marino */
  color: #ffffff !important;
  font-size: 11.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.5px !important;
  padding: 5px 14px !important;
  border-radius: 20px !important;
}

/* Textos de la tarjeta */
.ing-card-title {
  font-family: inherit !important;
  font-size: 22px !important;
  font-weight: 900 !important;
  color: #0c2c5c !important;
  margin: 0 0 10px 0 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.3px !important;
}

.ing-card-desc {
  font-size: 13.5px !important;
  color: #64748b !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}

/* ========================================================
   TARJETA DESTACADA (CÓMO SE TOMA)
   ======================================================== */
.r21-ing-card.card-featured-dark {
  background-color: #081d3d !important; /* Azul noche profundo */
  border-color: #081d3d !important;
  color: #ffffff !important;
  padding: 28px 24px !important;
  justify-content: center !important;
}

.featured-dark-title {
  font-size: 24px !important;
  font-weight: 900 !important;
  color: #ffffff !important;
  margin: 0 0 14px 0 !important;
  letter-spacing: -0.3px !important;
}

.featured-dark-desc {
  font-size: 14px !important;
  color: #f1f5f9 !important;
  line-height: 1.55 !important;
  margin: 0 0 16px 0 !important;
}

.featured-dark-sub {
  font-size: 12px !important;
  color: #cbd5e1 !important;
  display: block !important;
}

/* ========================================================
   RESPONSIVE (TABLETS Y MÓVILES)
   ======================================================== */
@media (max-width: 1024px) {
  .r21-ingredients-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 18px !important;
  }
}

@media (max-width: 600px) {
  .r21-ingredients-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
  
  .r21-ing-card {
    min-height: auto !important;
    padding: 20px !important;
  }
}


/* ========================================================
   SECCIÓN TESTIMONIOS / OPINIONES (RESET 21)
   ======================================================== */
.r21-reviews-section {
  max-width: 1200px !important;
  margin: 60px auto !important;
  padding: 0 20px !important;
  box-sizing: border-box !important;
  font-family: inherit !important;
}

/* ENCABEZADO CON VALORACIÓN */
.r21-reviews-header {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-end !important;
  margin-bottom: 40px !important;
  gap: 20px !important;
}

.reviews-kicker {
  display: block !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 2px !important;
  color: #64748b !important;
  text-transform: uppercase !important;
  margin-bottom: 8px !important;
}

.reviews-title {
  font-family: inherit !important;
  font-size: 38px !important;
  font-weight: 900 !important;
  color: #0c2c5c !important; /* Azul marino editorial */
  margin: 0 !important;
  line-height: 1.15 !important;
  letter-spacing: -0.5px !important;
}

/* Puntuación derecha */
.header-right-score {
  display: flex !important;
  align-items: center !important;
  gap: 14px !important;
  flex-shrink: 0 !important;
}

.score-number {
  font-family: inherit !important;
  font-size: 50px !important;
  font-weight: 900 !important;
  color: #0c2c5c !important;
  line-height: 1 !important;
  letter-spacing: -1px !important;
}

.score-meta {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
}

.score-meta .stars {
  color: #b28a47 !important; /* Dorado característico */
  font-size: 14px !important;
  letter-spacing: 2px !important;
}

.score-meta .verified-text {
  font-size: 12px !important;
  color: #64748b !important;
  white-space: nowrap !important;
}

/* GRILLA DE TARJETAS (4 Columnas en escritorio) */
.r21-reviews-grid {
  display: grid !important;
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 22px !important;
}

/* Tarjeta individual */
.r21-review-card {
  background: #ffffff !important;
  border: 1px solid #eef2f6 !important;
  border-radius: 24px !important;
  padding: 24px 20px !important;
  box-shadow: 0 8px 25px rgba(12, 44, 92, 0.04) !important;
  display: flex !important;
  flex-direction: column !important;
  box-sizing: border-box !important;
  transition: transform 0.25s ease, box-shadow 0.25s ease !important;
}

.r21-review-card:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 12px 30px rgba(12, 44, 92, 0.08) !important;
}

/* Fila superior: Avatar + Info + Badge */
.card-author-row {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  margin-bottom: 14px !important;
}

/* Círculos con Iniciales */
.author-avatar {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 13px !important;
  font-weight: 900 !important;
  flex-shrink: 0 !important;
}

.avatar-navy {
  background-color: #0c2c5c !important;
  color: #ffffff !important;
}

.avatar-pink {
  background-color: #f7d6db !important;
  color: #633352 !important;
}

.avatar-blue {
  background-color: #0b49b3 !important;
  color: #ffffff !important;
}

.avatar-soft-blue {
  background-color: #dbeafe !important;
  color: #1e40af !important;
}

/* Datos del autor */
.author-info {
  flex: 1 !important;
  line-height: 1.25 !important;
}

.author-info strong {
  display: block !important;
  font-size: 13.5px !important;
  color: #0c2c5c !important;
}

.author-info small {
  display: block !important;
  font-size: 10.5px !important;
  color: #94a3b8 !important;
  margin-top: 2px !important;
}

/* Etiqueta VERIFICADO / EJEMPLO */
.tag-badge {
  border: 1px dashed #cbd5e1 !important;
  border-radius: 12px !important;
  font-size: 9px !important;
  font-weight: 800 !important;
  color: #64748b !important;
  padding: 3px 8px !important;
  letter-spacing: 0.5px !important;
}

/* Estrellas doradas */
.card-stars {
  color: #b28a47 !important;
  font-size: 13px !important;
  letter-spacing: 2px !important;
  margin-bottom: 10px !important;
}

/* Título de la opinión */
.card-review-title {
  font-family: inherit !important;
  font-size: 16px !important;
  font-weight: 900 !important;
  color: #0c2c5c !important;
  margin: 0 0 10px 0 !important;
  line-height: 1.3 !important;
}

/* Texto de la opinión */
.card-review-body {
  font-size: 13px !important;
  color: #475569 !important;
  line-height: 1.55 !important;
  margin: 0 !important;
}

/* ========================================================
   RESPONSIVO (TABLETS Y MÓVILES)
   ======================================================== */
@media (max-width: 1024px) {
  .r21-reviews-grid {
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 18px !important;
  }
}

@media (max-width: 768px) {
  .r21-reviews-header {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 15px !important;
  }
  
  .reviews-title {
    font-size: 30px !important;
  }
}

@media (max-width: 580px) {
  .r21-reviews-grid {
    grid-template-columns: 1fr !important;
    gap: 16px !important;
  }
}



/* ========================================================
   SECCIÓN FAQ & ACORDEÓN (RESET 21)
   ======================================================== */
.r21-faq-section {
  max-width: 920px !important; /* Ancho optimizado para lectura cómoda */
  margin: 60px auto !important;
  padding: 0 20px !important;
  box-sizing: border-box !important;
  font-family: inherit !important;
}

/* Encabezado */
.r21-faq-header {
  text-align: center !important;
  margin-bottom: 35px !important;
}

.faq-kicker {
  display: block !important;
  font-size: 11px !important;
  font-weight: 800 !important;
  letter-spacing: 2px !important;
  color: #64748b !important;
  text-transform: uppercase !important;
  margin-bottom: 10px !important;
}

.faq-title {
  font-family: inherit !important;
  font-size: 40px !important;
  font-weight: 900 !important;
  color: #0c2c5c !important; /* Azul marino de la marca */
  margin: 0 !important;
  letter-spacing: -0.5px !important;
}

/* Contenedor de items */
.r21-accordion-container {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin-bottom: 45px !important;
}

/* Fila individual del acordeón */
.r21-accordion-item {
  background: #ffffff !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 16px !important;
  overflow: hidden !important;
  transition: all 0.25s ease !important;
  box-shadow: 0 2px 8px rgba(12, 44, 92, 0.02) !important;
}

.r21-accordion-item:hover {
  border-color: #cbd5e1 !important;
}

.r21-accordion-item.active {
  box-shadow: 0 6px 20px rgba(12, 44, 92, 0.05) !important;
  border-color: #cbd5e1 !important;
}

/* Botón disparador */
.r21-accordion-trigger {
  width: 100% !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 18px 24px !important;
  background: transparent !important;
  border: none !important;
  cursor: pointer !important;
  text-align: left !important;
  outline: none !important;
}

.trigger-question {
  font-size: 15px !important;
  font-weight: 800 !important;
  color: #0c2c5c !important;
  padding-right: 15px !important;
  line-height: 1.3 !important;
}

/* Icono circular con + o − */
.trigger-icon {
  width: 28px !important;
  height: 28px !important;
  border-radius: 50% !important;
  background-color: #fdf2f2 !important; /* Tono rosa pastel suave */
  color: #a84b60 !important; /* Detalle granate suave */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  font-size: 16px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
  transition: all 0.25s ease !important;
}

.r21-accordion-item.active .trigger-icon {
  background-color: #fce7e7 !important;
  color: #8c3245 !important;
}

/* Contenido desplegable */
.r21-accordion-content {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.35s ease-out, opacity 0.3s ease;
  opacity: 0;
  padding: 0 24px;
}

.r21-accordion-item.active .r21-accordion-content {
  opacity: 1;
  padding-bottom: 20px;
}

.r21-accordion-content p {
  font-size: 13.5px !important;
  color: #64748b !important;
  line-height: 1.6 !important;
  margin: 0 !important;
}

/* ========================================================
   BANNER INFERIOR CTA
   ======================================================== */
.r21-bottom-cta-banner {
  background-color: #081d3d !important; /* Azul marino profundo */
  border-radius: 20px !important;
  padding: 30px 40px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  gap: 25px !important;
  box-sizing: border-box !important;
  box-shadow: 0 12px 35px rgba(8, 29, 61, 0.25) !important;
}

.cta-banner-text {
  flex: 1 !important;
}

.cta-banner-title {
  font-family: inherit !important;
  font-size: 30px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  margin: 0 0 8px 0 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.3px !important;
}

.cta-banner-title strong {
  color: #ffffff !important;
}

.cta-banner-sub {
  font-size: 13px !important;
  color: #cbd5e1 !important;
  margin: 0 !important;
}

/* Botón blanco CTA */
.cta-banner-btn {
  background-color: #ffffff !important;
  color: #081d3d !important;
  font-size: 12.5px !important;
  font-weight: 900 !important;
  letter-spacing: 1.2px !important;
  text-transform: uppercase !important;
  padding: 14px 28px !important;
  border-radius: 30px !important;
  text-decoration: none !important;
  white-space: nowrap !important;
  transition: all 0.25s ease !important;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15) !important;
}

.cta-banner-btn:hover {
  background-color: #f1f5f9 !important;
  transform: translateY(-2px) !important;
}

/* ========================================================
   RESPONSIVE (MÓVILES)
   ======================================================== */
@media (max-width: 768px) {
  .faq-title {
    font-size: 32px !important;
  }
  
  .trigger-question {
    font-size: 14px !important;
  }
  
  .r21-bottom-cta-banner {
    flex-direction: column !important;
    text-align: center !important;
    padding: 28px 20px !important;
    gap: 20px !important;
  }
  
  .cta-banner-title {
    font-size: 24px !important;
  }
  
  .cta-banner-btn {
    width: 100% !important;
    box-sizing: border-box !important;
  }
}

/* ========================================================
   ESTILOS ESPECÍFICOS TAB DUO (Fusión Azul Marino + Ciruela)
   ======================================================== */
.r21-cta-duo {
  background: linear-gradient(135deg, #0c2c5c 0%, #2a1325 100%) !important;
  color: #ffffff !important;
}

#tab-duo .r21-pack-option.selected {
  border-color: #0c2c5c !important;
  box-shadow: 0 0 0 2px #0c2c5c !important;
}

#tab-duo .floating-choice-tag {
  background: linear-gradient(135deg, #0c2c5c, #2a1325) !important;
  color: #ffffff !important;
}

.r21-shipping-duo {
  background-color: #ffffff !important;
  border: 1.5px solid #0c2c5c !important;
}

.r21-shipping-duo .shipping-banner-top {
  color: #0c2c5c !important;
}

.r21-shipping-duo .shipping-tag-badge {
  background: #0c2c5c !important;
  color: #ffffff !important;
}

.r21-trust-duo .r21-trust-icon-box {
  background: #0c2c5c !important;
  color: #ffffff !important;
}

.r21-trust-duo .r21-trust-icon-box svg {
  stroke: #ffffff !important;
}

.r21-trust-duo .r21-trust-text {
  color: #0c2c5c !important;
}

.r21-trust-duo .highlight-pill {
  background-color: #e2e8f0 !important;
  color: #0c2c5c !important;
}

/* ========================================================
   LÍNEA DE TÍTULO Y BADGE DE CÁPSULAS DESTACADAS
   ======================================================== */
.pack-title-line {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  line-height: 1.25 !important;
}

/* Pastilla destacada para las cápsulas */
.capsules-badge {
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  color: #f1f5f9 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  padding: 2px 7px !important;
  border-radius: 6px !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* Realce dorado para la opción seleccionada */
.r21-pack-option.selected .capsules-badge.highlight {
  background: rgba(212, 163, 66, 0.2) !important;
  border-color: #d4a342 !important;
  color: #ffd885 !important;
}

/* Adaptación si está en la pestaña FEM (fondo claro) */
.r21-trust-fem .capsules-badge,
#tab-fem .capsules-badge {
  background: rgba(42, 19, 37, 0.08) !important;
  border-color: rgba(42, 19, 37, 0.2) !important;
  color: #2a1325 !important;
}

/* Sublínea descriptiva */
.pack-sub-line {
  display: block !important;
  margin-top: 4px !important;
  font-size: 12px !important;
  color: #94a3b8 !important;
}

/* En móvil evita que los elementos se encimen si el título es largo */
@media (max-width: 480px) {
  .pack-title-line {
    font-size: 14.5px !important;
    gap: 6px !important;
  }
  
  .capsules-badge {
    font-size: 10px !important;
    padding: 1px 6px !important;
  }
}

/* ========================================================
   IMAGEN BOTÁNICA DE FONDO EN TARJETAS DE INGREDIENTES
   ======================================================== */
.r21-ing-card {
  position: relative !important;
  overflow: hidden !important; /* Mantiene la imagen dentro de los bordes redondeados */
  z-index: 1 !important;
}

/* La imagen de fondo muy suave */
.r21-ing-card::before {
  content: "" !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background-image: var(--bg-img) !important;
  background-repeat: no-repeat !important;
  background-position: right -15px bottom -20px !important; /* Asoma en la esquina inferior derecha */
  background-size: 130px auto !important; /* Tamaño contenido y sutil */
  opacity: 0.07 !important; /* 7% de opacidad: casi una marca de agua, no compite con el texto */
  filter: grayscale(100%) !important; /* Opcional: convierte la imagen a tonos neutros */
  pointer-events: none !important;
  z-index: -1 !important;
  transition: opacity 0.3s ease, transform 0.3s ease !important;
}

/* Sutil realce al pasar el cursor */
.r21-ing-card:hover::before {
  opacity: 0.12 !important;
  transform: scale(1.04) !important;
}

/* Excluir la tarjeta azul oscura "Cómo se toma" */
.r21-ing-card.card-featured-dark::before {
  display: none !important;
}

/* 1. Reduce la altura del divisor de Elementor en celular */
.elementor-shape-bottom {
  height: 45px !important;
}

.elementor-shape-bottom svg {
  height: 45px !important;
  transform: scaleY(0.4) !important;
  transform-origin: bottom !important;
}

/* 2. Empuja el contenido hacia arriba para que no lo tape la curva */
.r21-landing-section,
.r21-tab-content,
div[data-elementor-type="wp-page"] .elementor-section:has(.r21-trust-bar),
div[data-elementor-type="wp-page"] .e-con:has(.r21-trust-bar) {
  padding-bottom: 75px !important;
}

/* 3. Centra la barra de garantías y le da un ancho seguro */
.r21-trust-bar {
  max-width: 290px !important;
  margin: 20px auto 10px auto !important;
}


/* ========================================================
   BARRA DE GARANTÍAS Y BENEFICIOS (OPTIMIZADA PARA MÓVIL)
   ======================================================== */
.r21-trust-bar {
  width: 100% !important;
  max-width: 950px !important;
  margin: 30px auto 20px auto !important;
  padding: 0 15px !important;
  box-sizing: border-box !important;
}

.r21-trust-container {
  display: flex !important;
  justify-content: space-between !important;
  align-items: flex-start !important;
  gap: 24px !important;
  width: 100% !important;
}

/* Item individual */
.r21-trust-item {
  flex: 1 1 0px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  text-align: center !important;
  box-sizing: border-box !important;
}

/* Caja de icono con fondo de alto contraste */
.r21-trust-icon-box {
  width: 52px !important;
  height: 52px !important;
  background: rgba(255, 255, 255, 0.12) !important; /* Translúcido luminoso sobre azul */
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  border-radius: 14px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-bottom: 10px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

.r21-trust-icon-box svg {
  width: 24px !important;
  height: 24px !important;
  stroke: #ffffff !important;
}

/* Textos blancos legibles */
.r21-trust-text {
  font-family: inherit !important;
  font-size: 13px !important;
  line-height: 1.35 !important;
  color: #f1f5f9 !important; /* Blanco suave */
  margin: 0 !important;
}

.r21-trust-text strong {
  font-weight: 800 !important;
  color: #ffffff !important;
}

/* Badge GRATIS */
.highlight-pill {
  background-color: #d4a342 !important; /* Dorado cálido */
  color: #0c2c5c !important;
  padding: 1px 6px !important;
  border-radius: 4px !important;
  font-weight: 900 !important;
  font-size: 11px !important;
}

/* ========================================================
   VISTA CELULAR (< 768px): FILAS HORIZONTALES COMPACTAS
   ======================================================== */
@media (max-width: 768px) {
  .r21-trust-bar {
    margin: 25px auto 45px auto !important; /* Deja respirar antes del corte curvo */
    padding: 0 20px !important;
  }

  .r21-trust-container {
    flex-direction: column !important;
    gap: 14px !important;
    max-width: 320px !important;
    margin: 0 auto !important;
  }

  /* Convierte cada beneficio en una fila (icono a la izquierda, texto a la derecha) */
  .r21-trust-item {
    flex-direction: row !important;
    align-items: center !important;
    text-align: left !important;
    gap: 14px !important;
    width: 100% !important;
  }

  .r21-trust-icon-box {
    width: 44px !important;
    height: 44px !important;
    min-width: 44px !important;
    margin-bottom: 0 !important;
    border-radius: 12px !important;
  }

  .r21-trust-icon-box svg {
    width: 20px !important;
    height: 20px !important;
  }

  .r21-trust-text {
    font-size: 12.5px !important;
    line-height: 1.3 !important;
  }
}

/* ========================================================
   AVISO DE ENTREGA RÁPIDA - VARIANTE FEM
   ======================================================== */
.r21-shipping-fem {
  background-color: #ffffff !important; /* Tarjeta blanca limpia sobre el fondo rosa */
  border: 1.5px solid rgba(42, 19, 37, 0.15) !important; /* Borde ciruela sutil */
  box-shadow: 0 4px 16px rgba(42, 19, 37, 0.05) !important;
}

/* Texto principal en ciruela oscuro */
.r21-shipping-fem .shipping-banner-top {
  color: #2a1325 !important;
}

/* Badge MAÑANA en tono ciruela/berenjena o dorado suave */
.r21-shipping-fem .shipping-tag-badge {
  background-color: #2a1325 !important;
  color: #ffffff !important;
}

/* Textos monoespaciados en tono suave legible */
.r21-shipping-fem .shipping-banner-sub {
  color: #573350 !important;
}

.r21-shipping-fem .shipping-banner-note {
  color: #7a5071 !important;
}

/* ========================================================
   LÍNEA DE TÍTULO Y BADGE DE CÁPSULAS DESTACADAS
   ======================================================== */
.pack-title-line {
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  color: #ffffff !important;
  line-height: 1.25 !important;
}

/* Pastilla destacada para las cápsulas */
.capsules-badge {
  background: rgba(255, 255, 255, 0.12) !important;
  border: 1px solid rgba(255, 255, 255, 0.22) !important;
  color: #f1f5f9 !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.3px !important;
  padding: 2px 7px !important;
  border-radius: 6px !important;
  white-space: nowrap !important;
  display: inline-flex !important;
  align-items: center !important;
}

/* Realce dorado para la opción seleccionada */
.r21-pack-option.selected .capsules-badge.highlight {
  background: rgba(212, 163, 66, 0.2) !important;
  border-color: #d4a342 !important;
  color: #ffd885 !important;
}

/* Adaptación si está en la pestaña FEM (fondo claro) */
.r21-trust-fem .capsules-badge,
#tab-fem .capsules-badge {
  background: rgba(42, 19, 37, 0.08) !important;
  border-color: rgba(42, 19, 37, 0.2) !important;
  color: #2a1325 !important;
}

/* Sublínea descriptiva */
.pack-sub-line {
  display: block !important;
  margin-top: 4px !important;
  font-size: 12px !important;
  color: #94a3b8 !important;
}

/* En móvil evita que los elementos se encimen si el título es largo */
@media (max-width: 480px) {
  .pack-title-line {
    font-size: 14.5px !important;
    gap: 6px !important;
  }
  
  .capsules-badge {
    font-size: 10px !important;
    padding: 1px 6px !important;
  }
}

/* ========================================================
   BOTÓN AGREGAR AL CARRITO - TAB DUO
   ======================================================== */
#btn-add-duo,
.r21-cta-button.r21-cta-duo {
  /* Fondo: Gradiente entre Azul Marino (#0c2c5c) y Ciruela (#2a1325) */
  background: linear-gradient(135deg, #0c2c5c 0%, #2a1325 100%) !important;
  
  /* Color del texto */
  color: #ffffff !important;
  
  /* Tipografía y alineación */
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: 1px !important;
  text-transform: uppercase !important;
  text-decoration: none !important;
  
  /* Espaciado y bordes */
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 16px 24px !important;
  border-radius: 50px !important;
  border: none !important;
  box-shadow: 0 8px 24px rgba(12, 44, 92, 0.25) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease, opacity 0.2s ease !important;
}

/* Efecto hover al pasar el cursor */
#btn-add-duo:hover,
.r21-cta-button.r21-cta-duo:hover {
  color: #ffffff !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 12px 28px rgba(12, 44, 92, 0.35) !important;
  opacity: 0.95 !important;
}

/* ========================================================
   CONTRASTE DE TEXTOS TAB DUO SOBRE FONDO ROSA
   ======================================================== */
#tab-duo .r21-product-title,
#tab-duo .r21-subtitle-tag,
#tab-duo .r21-highlight-benefit,
#tab-duo .r21-benefits-list li,
#tab-duo .pack-title-line,
#tab-duo .reviews-count {
  color: #0c2c5c !important; /* Azul marino legible */
}

#tab-duo .r21-highlight-benefit {
  color: #2a1325 !important; /* Ciruela oscuro */
}

#tab-duo .pack-sub-line {
  color: #556270 !important;
}

#tab-duo .r21-pack-option {
  background: #ffffff !important; /* Tarjetas de packs blancas para destacar */
  border-color: rgba(12, 44, 92, 0.15) !important;
}

#tab-duo .r21-pack-option .price-val {
  color: #0c2c5c !important;
}

#tab-duo .r21-pack-option .old-price-val {
  color: #94a3b8 !important;
}

/* ========================================================
   FONDO GENERAL DE LA SECCIÓN PARA TAB DUO
   ======================================================== */
/* Opción A: Fondo crema/lavanda neutro y limpio para lectura perfecta */
.r21-landing-section.theme-duo {
  background: #f4eff3 !important;
  transition: background 0.4s ease !important;
}

/* Opción B (alternativa si querés un degradé sutil):
.r21-landing-section.theme-duo {
  background: linear-gradient(180deg, #f0ebf2 0%, #f7f5f9 100%) !important;
}
*/

/* ========================================================
   ELIMINAR CONTORNO / BORDE NEGRO DE FOCO AL HACER CLIC
   ======================================================== */
.r21-pack-option,
.r21-pack-option *,
.r21-pack-option:focus,
.r21-pack-option:focus-visible,
.r21-pack-option:focus-within,
.r21-pack-option:active {
  outline: none !important;
  box-shadow: none !important; /* Si querías sombra propia, reemplazala acá */
  -webkit-tap-highlight-color: transparent !important; /* Quita el destello gris/azul en móviles */
}

/* Ocultar visualmente el radio button nativo que genera el recuadro */
.r21-pack-option input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  pointer-events: none !important;
  outline: none !important;
}

/* ========================================================
   ANULAR DEFINITIVAMENTE EL RECUADRO NEGRO AL HACER CLIC
   ======================================================== */

/* 1. Desactivar outline y bordes de foco en label y todos sus hijos */
.r21-pack-option,
.r21-pack-option:focus,
.r21-pack-option:focus-visible,
.r21-pack-option:focus-within,
.r21-pack-option:active,
.r21-pack-option .pack-content,
.r21-pack-option .pack-content:focus,
.r21-pack-option .pack-content:focus-visible,
.r21-pack-option .pack-content:active,
.r21-pack-option * {
  outline: 0 !important;
  outline-color: transparent !important;
  outline-style: none !important;
  outline-width: 0 !important;
  -webkit-tap-highlight-color: transparent !important;
}

/* 2. Remover bordes o sombras negras que inyecta WoodMart en elementos activos */
.r21-pack-option:focus-within .pack-content,
.r21-pack-option:active .pack-content {
  border-color: rgba(12, 44, 92, 0.15) !important;
  box-shadow: none !important;
}

/* 3. Mantener únicamente el borde de selección deseado */
.r21-pack-option.selected .pack-content {
  border-color: #d4a342 !important; /* Si querés dorado */
}

/* 4. Asegurar que el radio nativo no tome foco visual */
.r21-pack-option input[type="radio"] {
  position: absolute !important;
  opacity: 0 !important;
  width: 0 !important;
  height: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
  pointer-events: none !important;
  outline: none !important;
  border: none !important;
}

#tab-duo .r21-pack-option {
  cursor: pointer !important;
  user-select: none !important;
  -webkit-user-select: none !important;
  outline: none !important;
  border: 1.5px solid rgba(12, 44, 92, 0.15) !important;
  border-radius: 12px !important;
  background: #ffffff !important;
  transition: border-color 0.2s ease, box-shadow 0.2s ease !important;
}

#tab-duo .r21-pack-option.selected {
  border-color: #0c2c5c !important;
  box-shadow: 0 0 0 1.5px #0c2c5c !important;
}

#tab-duo .r21-pack-option:focus,
#tab-duo .r21-pack-option:active {
  outline: none !important;
}

/* ========================================================
   TARJETAS DE PACKS DESTACADAS Y LLAMATIVAS (MEN, FEM, DUO)
   ======================================================== */

/* Base compartida para todas las tarjetas */
.r21-pack-option {
  position: relative !important;
  display: block !important;
  margin-bottom: 14px !important;
  border-radius: 14px !important;
  transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1) !important;
  cursor: pointer !important;
  overflow: visible !important;
}

/* --------------------------------------------------------
   1. PESTAÑA MEN (Azul Oscuro Profundo / Neón Glass)
   -------------------------------------------------------- */
#tab-men .r21-pack-option {
  background: linear-gradient(135deg, rgba(255, 255, 255, 0.05) 0%, rgba(255, 255, 255, 0.02) 100%) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.14) !important;
  backdrop-filter: blur(10px) !important;
}

#tab-men .r21-pack-option:hover {
  border-color: rgba(255, 255, 255, 0.35) !important;
  transform: translateY(-2px) !important;
}

/* MEN Seleccionado / Destacado */
#tab-men .r21-pack-option.selected {
  background: linear-gradient(135deg, rgba(212, 163, 66, 0.16) 0%, rgba(12, 44, 92, 0.6) 100%) !important;
  border: 2px solid #d4a342 !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.35), 0 0 16px rgba(212, 163, 66, 0.25) !important;
  transform: translateY(-2px) scale(1.01) !important;
}

/* --------------------------------------------------------
   2. PESTAÑA FEM (Blanco Puro, Sombra Suave y Acento Ciruela)
   -------------------------------------------------------- */
#tab-fem .r21-pack-option {
  background: #ffffff !important;
  border: 1.5px solid rgba(42, 19, 37, 0.12) !important;
  box-shadow: 0 4px 14px rgba(42, 19, 37, 0.05) !important;
}

#tab-fem .r21-pack-option:hover {
  border-color: rgba(42, 19, 37, 0.3) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 20px rgba(42, 19, 37, 0.08) !important;
}

/* FEM Seleccionado / Destacado */
#tab-fem .r21-pack-option.selected {
  background: linear-gradient(135deg, #ffffff 0%, #fff7fa 100%) !important;
  border: 2px solid #2a1325 !important;
  box-shadow: 0 12px 28px rgba(42, 19, 37, 0.14), 0 0 0 1px #2a1325 !important;
  transform: translateY(-2px) scale(1.01) !important;
}

/* --------------------------------------------------------
   3. PESTAÑA DUO (Fusión Premium con Brillo Sutil)
   -------------------------------------------------------- */
#tab-duo .r21-pack-option {
  background: #ffffff !important;
  border: 1.5px solid rgba(12, 44, 92, 0.14) !important;
  box-shadow: 0 4px 16px rgba(12, 44, 92, 0.06) !important;
}

#tab-duo .r21-pack-option:hover {
  border-color: rgba(12, 44, 92, 0.35) !important;
  transform: translateY(-2px) !important;
  box-shadow: 0 8px 22px rgba(12, 44, 92, 0.1) !important;
}

/* DUO Seleccionado / Destacado (Gradiente perimetral y fondo luminoso) */
#tab-duo .r21-pack-option.selected {
  background: linear-gradient(135deg, #ffffff 30%, #f7f3f9 100%) !important;
  border: 2px solid transparent !important;
  background-clip: padding-box !important;
  box-shadow: 0 12px 30px rgba(12, 44, 92, 0.14), 0 0 0 2px #0c2c5c !important;
  transform: translateY(-2px) scale(1.01) !important;
}

/* --------------------------------------------------------
   TAG FLOTANTE "EL MÁS ELEGIDO" (Mayor presencia)
   -------------------------------------------------------- */
.floating-choice-tag {
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.8px !important;
  padding: 4px 10px !important;
  border-radius: 6px !important;
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.18) !important;
  text-transform: uppercase !important;
}

#tab-men .floating-choice-tag {
  background: #d4a342 !important;
  color: #0c2c5c !important;
}

#tab-fem .floating-choice-tag {
  background: #2a1325 !important;
  color: #ffffff !important;
}

#tab-duo .floating-choice-tag {
  background: linear-gradient(135deg, #0c2c5c, #2a1325) !important;
  color: #ffffff !important;
}

/* ========================================================
   ESTILOS DINÁMICOS: SOLO DESTACAR EL PACK SELECCIONADO
   ======================================================== */

/* 1. Tarjetas base (neutras, sutiles y sin saturación) */
.r21-pack-option {
  position: relative !important;
  display: block !important;
  margin-bottom: 12px !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  transition: all 0.22s ease-in-out !important;
  outline: none !important;
}

/* Base neutra MEN (cristal oscuro suave) */
#tab-men .r21-pack-option {
  background: rgba(255, 255, 255, 0.04) !important;
  border: 1.5px solid rgba(255, 255, 255, 0.12) !important;
}

/* Base neutra FEM y DUO (fondo blanco limpio y borde tenue) */
#tab-fem .r21-pack-option,
#tab-duo .r21-pack-option {
  background: #ffffff !important;
  border: 1.5px solid rgba(12, 44, 92, 0.12) !important;
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.03) !important;
}

/* Leve respuesta al pasar el mouse por encima sin exagerar */
.r21-pack-option:hover {
  transform: translateY(-1px) !important;
}


/* --------------------------------------------------------
   2. CUANDO SE SELECCIONA EN "MEN" (Efecto Dorado / Glow)
   -------------------------------------------------------- */
#tab-men .r21-pack-option.selected {
  background: linear-gradient(135deg, rgba(212, 163, 66, 0.18) 0%, rgba(12, 44, 92, 0.85) 100%) !important;
  border: 2px solid #d4a342 !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.4), 0 0 14px rgba(212, 163, 66, 0.3) !important;
  transform: translateY(-2px) scale(1.01) !important;
}


/* --------------------------------------------------------
   3. CUANDO SE SELECCIONA EN "FEM" (Ciruela Profundo Luminoso)
   -------------------------------------------------------- */
#tab-fem .r21-pack-option.selected {
  background: linear-gradient(135deg, #ffffff 15%, #fdf2f7 100%) !important;
  border: 2px solid #2a1325 !important;
  box-shadow: 0 10px 24px rgba(42, 19, 37, 0.14), 0 0 10px rgba(42, 19, 37, 0.08) !important;
  transform: translateY(-2px) scale(1.01) !important;
}


/* --------------------------------------------------------
   4. CUANDO SE SELECCIONA EN "DUO" (Azul Noche Premium)
   -------------------------------------------------------- */
#tab-duo .r21-pack-option.selected {
  background: linear-gradient(135deg, #ffffff 20%, #f1f5f9 100%) !important;
  border: 2px solid #0c2c5c !important;
  box-shadow: 0 10px 24px rgba(12, 44, 92, 0.16), 0 0 12px rgba(12, 44, 92, 0.1) !important;
  transform: translateY(-2px) scale(1.01) !important;
}


/* --------------------------------------------------------
   5. ETIQUETA "EL MÁS ELEGIDO"
   -------------------------------------------------------- */
.floating-choice-tag {
  position: absolute !important;
  top: -11px !important;
  left: 18px !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  letter-spacing: 0.6px !important;
  padding: 3px 9px !important;
  border-radius: 5px !important;
  text-transform: uppercase !important;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.15) !important;
  z-index: 2 !important;
}

/* Colores de la pastilla para cada pestaña */
#tab-men .floating-choice-tag {
  background: #d4a342 !important;
  color: #0c2c5c !important;
}

#tab-fem .floating-choice-tag {
  background: #2a1325 !important;
  color: #ffffff !important;
}

#tab-duo .floating-choice-tag {
  background: linear-gradient(135deg, #0c2c5c, #2a1325) !important;
  color: #ffffff !important;
}

/* ========================================================
   SELECCIÓN IMPACTANTE (MÁS COLOR Y CONTRASTE)
   ======================================================== */

/* --------------------------------------------------------
   1. MEN SELECCIONADO (Dorado intenso y profundo)
   -------------------------------------------------------- */
#tab-men .r21-pack-option.selected {
  background: linear-gradient(135deg, rgba(212, 163, 66, 0.35) 0%, rgba(12, 44, 92, 0.95) 100%) !important;
  border: 2.5px solid #d4a342 !important;
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5), 0 0 20px rgba(212, 163, 66, 0.45) !important;
  transform: translateY(-2px) scale(1.015) !important;
}

#tab-men .r21-pack-option.selected .pack-title-line {
  color: #ffd885 !important;
}


/* --------------------------------------------------------
   2. FEM SELECCIONADO (Ciruela / Berry vibrante)
   -------------------------------------------------------- */
#tab-fem .r21-pack-option.selected {
  background: linear-gradient(135deg, #fce4ec 0%, #f3d1df 100%) !important; /* Tono ciruela/rosa notable */
  border: 2.5px solid #5a1f49 !important;
  box-shadow: 0 12px 28px rgba(90, 31, 73, 0.22), 0 0 16px rgba(90, 31, 73, 0.15) !important;
  transform: translateY(-2px) scale(1.015) !important;
}

#tab-fem .r21-pack-option.selected .pack-title-line {
  color: #3b1130 !important;
}

#tab-fem .r21-pack-option.selected .price-val {
  color: #5a1f49 !important;
}


/* --------------------------------------------------------
   3. DUO SELECCIONADO (Azul Marino + Ciruela con fondo definido)
   -------------------------------------------------------- */
#tab-duo .r21-pack-option.selected {
  background: linear-gradient(135deg, #e3ecfa 0%, #fae6f2 100%) !important; /* Fusión celeste/lavanda clara bien visible */
  border: 2.5px solid #0c2c5c !important;
  box-shadow: 0 12px 28px rgba(12, 44, 92, 0.22), 0 0 16px rgba(42, 19, 37, 0.18) !important;
  transform: translateY(-2px) scale(1.015) !important;
}

#tab-duo .r21-pack-option.selected .pack-title-line {
  color: #0c2c5c !important;
}

#tab-duo .r21-pack-option.selected .price-val {
  color: #0c2c5c !important;
}


/* --------------------------------------------------------
   TAG "EL MÁS ELEGIDO" (Mayor realce)
   -------------------------------------------------------- */
.floating-choice-tag {
  font-weight: 900 !important;
  letter-spacing: 0.8px !important;
  padding: 4px 11px !important;
  box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25) !important;
}

#tab-men .floating-choice-tag {
  background: #f59e0b !important; /* Dorado vivo */
  color: #0c2c5c !important;
}

#tab-fem .floating-choice-tag {
  background: #5a1f49 !important; /* Ciruela saturado */
  color: #ffffff !important;
}

#tab-duo .floating-choice-tag {
  background: linear-gradient(135deg, #0c2c5c 0%, #5a1f49 100%) !important;
  color: #ffffff !important;
}

/* ========================================================
   CONTRASTE PASTILLA DE CÁPSULAS (MEN, FEM, DUO)
   ======================================================== */

/* 1. Pastilla en estado normal (opciones no seleccionadas) */
.capsules-badge {
  display: inline-block !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  line-height: 1 !important;
  padding: 4px 8px !important;
  border-radius: 6px !important;
  vertical-align: middle !important;
  margin-left: 6px !important;
}

/* DUO: Fondo suave con texto azul marino oscuro */
#tab-duo .capsules-badge {
  background: #e2e8f0 !important;
  color: #0c2c5c !important;
  border: 1px solid #cbd5e1 !important;
}

/* FEM: Fondo suave con texto ciruela oscuro */
#tab-fem .capsules-badge {
  background: #f7e6f0 !important;
  color: #4a153b !important;
  border: 1px solid #ebd0e2 !important;
}

/* MEN: Fondo oscuro tenue con texto dorado legible */
#tab-men .capsules-badge {
  background: rgba(255, 255, 255, 0.1) !important;
  color: #ffd885 !important;
  border: 1px solid rgba(255, 255, 255, 0.2) !important;
}


/* --------------------------------------------------------
   2. Pastilla cuando la tarjeta ESTÁ SELECCIONADA
   -------------------------------------------------------- */

/* DUO seleccionado: Píldora en azul marino sólido con texto blanco */
#tab-duo .r21-pack-option.selected .capsules-badge,
#tab-duo .r21-pack-option.selected .capsules-badge.highlight {
  background: #0c2c5c !important;
  color: #ffffff !important;
  border-color: #0c2c5c !important;
  box-shadow: 0 2px 4px rgba(12, 44, 92, 0.2) !important;
}

/* FEM seleccionado: Píldora en ciruela sólido con texto blanco */
#tab-fem .r21-pack-option.selected .capsules-badge,
#tab-fem .r21-pack-option.selected .capsules-badge.highlight {
  background: #5a1f49 !important;
  color: #ffffff !important;
  border-color: #5a1f49 !important;
  box-shadow: 0 2px 4px rgba(90, 31, 73, 0.2) !important;
}

/* MEN seleccionado: Píldora en dorado sólido con texto azul oscuro */
#tab-men .r21-pack-option.selected .capsules-badge,
#tab-men .r21-pack-option.selected .capsules-badge.highlight {
  background: #d4a342 !important;
  color: #0c2c5c !important;
  border-color: #d4a342 !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25) !important;
}

/* ========================================================
   SELECTOR DE PESTAÑAS: CONTRASTE EXCLUSIVO EN DUO
   ======================================================== */

/* 1. Fondo de la cápsula cuando DUO está activo */
.theme-duo .r21-toggle-pill {
  background: rgba(12, 44, 92, 0.08) !important;
  border: 1px solid rgba(12, 44, 92, 0.15) !important;
}

/* 2. Botones inactivos (MEN y FEM) cuando estás en DUO */
.theme-duo .r21-tab-btn:not(.active) {
  color: #0c2c5c !important; /* Azul marino legible */
  opacity: 0.7 !important;
  font-weight: 700 !important;
}

.theme-duo .r21-tab-btn:not(.active):hover {
  opacity: 1 !important;
}

/* 3. Botón activo de DUO */
.theme-duo .r21-tab-btn.active {
  background: #0c2c5c !important;
  color: #ffffff !important;
  box-shadow: 0 2px 8px rgba(12, 44, 92, 0.25) !important;
}

/* ========================================================
   FONDO CON COLOR PARA PACK SELECCIONADO EN FEM
   ======================================================== */
#tab-fem .r21-pack-option.selected,
#tab-fem .r21-pack-option.selected .pack-content {
  /* Fondo rosa/ciruela suave y definido (no blanco) */
  background: #f8e5ee !important;
  border-color: #2a1325 !important;
  box-shadow: 0 8px 22px rgba(42, 19, 37, 0.18) !important;
}

/* Textos oscuros legibles sobre el fondo rosado */
#tab-fem .r21-pack-option.selected .pack-title-line {
  color: #2a1325 !important;
}

#tab-fem .r21-pack-option.selected .pack-sub-line {
  color: #5a274e !important;
}

#tab-fem .r21-pack-option.selected .price-val {
  color: #2a1325 !important;
}

#tab-fem .r21-pack-option.selected .old-price-val {
  color: #8c5d7f !important;
}

/* ========================================================
   TARJETA FEM SELECCIONADA COMPLETA (SIN PARCHES BLANCOS)
   ======================================================== */

/* 1. Fondo rosa uniforme para la tarjeta y su contenedor interno */
#tab-fem .r21-pack-option.selected,
#tab-fem .r21-pack-option.selected .pack-content {
  background: #f4d3e3 !important;
  background-color: #f4d3e3 !important;
  border-color: #2a1325 !important;
}

/* 2. Quitar fondo a las cajas de texto para que sean transparentes y no hagan parches */
#tab-fem .r21-pack-option.selected .pack-info,
#tab-fem .r21-pack-option.selected .pack-price-box {
  background: transparent !important;
  background-color: transparent !important;
}

/* 3. Borde exterior marcado */
#tab-fem .r21-pack-option.selected {
  border: 2px solid #2a1325 !important;
  box-shadow: 0 8px 20px rgba(42, 19, 37, 0.2) !important;
}

/* 4. Textos contrastados */
#tab-fem .r21-pack-option.selected .pack-title-line,
#tab-fem .r21-pack-option.selected .price-val {
  color: #2a1325 !important;
}

#tab-fem .r21-pack-option.selected .pack-sub-line {
  color: #5a274e !important;
}

/* ========================================================
   SELECTOR DE PESTAÑAS PARA INGREDIENTES
   ======================================================== */
.r21-ing-tabs-nav {
  display: flex !important;
  justify-content: center !important;
  gap: 8px !important;
  margin-bottom: 30px !important;
}

.r21-ing-tab-btn {
  background: #ebeef5 !important;
  color: #475569 !important;
  font-size: 13px !important;
  font-weight: 700 !important;
  letter-spacing: 0.6px !important;
  padding: 10px 24px !important;
  border-radius: 50px !important;
  border: 1px solid rgba(12, 44, 92, 0.08) !important;
  cursor: pointer !important;
  transition: all 0.25s ease !important;
  outline: none !important;
}

.r21-ing-tab-btn:hover {
  color: #0c2c5c !important;
}

/* Botón MEN activo */
.r21-ing-tab-btn.active {
  background: #0c2c5c !important;
  color: #ffffff !important;
  box-shadow: 0 4px 14px rgba(12, 44, 92, 0.25) !important;
}

/* Botón FEM activo (toma el tono ciruela) */
.r21-ing-tab-btn.active:nth-child(2) {
  background: #2a1325 !important;
  box-shadow: 0 4px 14px rgba(42, 19, 37, 0.25) !important;
}

/* Dosificación FEM (Pastilla ciruela) */
.ing-dosage-badge.fem-badge {
  background: #2a1325 !important;
  color: #ffffff !important;
}

/* Tarjeta "Cómo se toma" en FEM (Ciruela oscuro profundo) */
.card-featured-fem {
  background: #2a1325 !important;
  border-color: #2a1325 !important;
}

/* ========================================================
   CONTROL DE VISIBILIDAD DE TABS DE INGREDIENTES
   ======================================================== */

/* Por defecto, toda grilla de tab de ingredientes está oculta */
.r21-ing-grid-tab {
  display: none !important;
}

/* Solo la grilla que tenga la clase .active se dibuja como grid */
.r21-ing-grid-tab.active {
  display: grid !important;
}

/* ========================================================
   CONTROL DE VISIBILIDAD DE TABS DE INGREDIENTES
   ======================================================== */

/* Por defecto, toda grilla de tab de ingredientes está oculta */
.r21-ing-grid-tab {
  display: none !important;
}

/* Solo la grilla que tenga la clase .active se dibuja como grid */
.r21-ing-grid-tab.active {
  display: grid !important;
}

/* ========================================================
   TEMA ROSA/CIRUELA PARA INGREDIENTES FEM
   ======================================================== */

/* 1. Fondo de las tarjetas de botánicos en FEM (tono rosa suave de producto) */
#tab-ing-fem .r21-ing-card:not(.card-featured-dark) {
  background-color: #fcf4f8 !important; /* Base rosada pastel muy suave */
  border-color: #ebd3e1 !important;
}

#tab-ing-fem .r21-ing-card:not(.card-featured-dark):hover {
  border-color: #2a1325 !important;
  box-shadow: 0 6px 18px rgba(42, 19, 37, 0.08) !important;
}

/* 2. Círculo del icono en FEM (resalta en blanco sobre el fondo rosa) */
#tab-ing-fem .ing-icon-wrap {
  background: #ffffff !important;
  border: 1px solid #ebd3e1 !important;
}

/* 3. Título de cada botánico en FEM (ciruela oscuro) */
#tab-ing-fem .ing-card-title {
  color: #2a1325 !important;
}

/* 4. Pastilla de dosis en FEM (rellena en el rosa distintivo con borde ciruela) */
#tab-ing-fem .ing-dosage-badge.fem-badge {
  background: #f4d3e3 !important;
  color: #2a1325 !important;
  border: 1px solid #d9a9c2 !important;
  font-weight: 800 !important;
}

/* 5. Tarjeta "Cómo se toma" en FEM (ciruela profundo contrastado) */
#tab-ing-fem .card-featured-fem {
  background: #2a1325 !important;
  border-color: #2a1325 !important;
  box-shadow: 0 8px 24px rgba(42, 19, 37, 0.2) !important;
}