/*
	Theme Name: Rehub child theme
	Theme URI: https://wpsoul.com
	Description: A Hybrid magazine/shop/review/news Wordpress Theme
	Author: Sizam
	Author URI: https://wpsoul.com
	Version: 9.4
	Template: rehub-theme
*/
/* =Theme customization starts here
-------------------------------------------------------------- */

/* Estilo personalizado para el botón "Agregar al carrito" en el tema Rehub */
.woocommerce div.product .summary form.cart button.single_add_to_cart_button {
    width: 100% !important;
    min-width: 250px;
    border-radius: 4px !important; /* Redondear los bordes del botón */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
    transition: all 0.3s ease-in-out;
    position: relative;
    background-size: 120%; /* Ajustar el ancho de la parte sombreada */
	
}

/* Modificar el tamaño del botón Añadir al Carrito */
.wpsm_add_to_cart_button {
    font-size: 48px;
    padding: 10px 20px;
    width: 120%;
}

/* Estilos para centrar el contenedor en la pantalla en el PC y ajustarlo al 100% de ancho en dispositivos móviles */
.wpsm_promobox {
  max-width: 600px; /* Establece el ancho máximo del contenedor */
  margin: 0 auto; /* Centra el contenedor en la pantalla */
}

@media (max-width: 767px) { /* Aplica estilos solo en dispositivos móviles */
  .wpsm_promobox {
    max-width: 100%; /* Establece el ancho al 100% en dispositivos móviles */
    margin: 0; /* Elimina el margen en dispositivos móviles */
  }
}

/* Personaliza el estilo de la etiqueta 'label' asociada al campo de selección de cantidad en la página de producto de WooCommerce */
th.label label[for="pa_cantidad"] {
    font-size: 14px; /* Establece un tamaño de fuente personalizado */
    color: #333; /* Establece un color de texto personalizado */
	line-height: 10px; /* Establece una altura de línea personalizada */
}

/* Personaliza el estilo de los selectores de variaciones en la página de producto de WooCommerce */
.rh-var-selector label {
  display: inline-block;
  position: relative;
  padding-left: 30px;
  margin-left: 20px;
  cursor: pointer;
  font-size: 18px;
  line-height: 1.4;
  color: #333;
  font-weight: bold;
  border: 1px solid #006400; /* Cambia el color del borde a #006400 */
}

/* Cambia el color del borde de los selectores cuando se selecciona */
.rh-var-selector input[type="radio"]:checked + label {
  border-color: #006400; /* Cambia el color del borde a #006400 */
}

/* Personaliza el estilo de los selectores de variantes en la página de producto de WooCommerce */
.rh-var-selector label {
  display: inline-block;
  position: relative;
  padding-left: 30px;
  margin-left: 20px;
  margin-right: 20px;
  cursor: pointer;
  font-size: 18px;
  line-height: 1.4;
  color: #333;
  font-weight: bold;
  border: 1px solid #ccc; /* Establece el color predeterminado del borde */
}

/* Crea la apariencia del botón de selección de variantes */
.rh-var-selector label:before {
  content: "";
  display: inline-block;
  width: 18px;
  height: 18px;
  position: absolute;
  left: -28px; /* Mueve el botón hacia el centro del selector de variación */
  top: 50%; /* Centra verticalmente el botón de selección */
  transform: translateY(-50%);
  background-color: #FFFFFF;
  border: 1px solid #333333;
  border-radius: 50%;
  transition: all 0.2s ease-in-out;
}

/* Cambia el estilo del botón de selección de variantes cuando está seleccionado */
.rh-var-selector input[type="radio"]:checked + label:before {
  background-color: #F04057;
  border-color: #000000;
}


/* Oculta el input radio nativo */
.rh-var-selector input[type="radio"] {
  display: none;
}

/* Personaliza el estilo del contenido personalizado en la página de producto de WooCommerce */
.custom-content {
  font-weight: bold; /* Establece un peso de fuente en negrita */
  font-size: 16px; /* Establece un tamaño de fuente personalizado */
  color: #F04057; /* Establece un color de texto personalizado */
  margin-top: 40px; /* Establece un margen superior personalizado */
}

/* Ajustar el margen superior del mensaje personalizado en la página de producto */
.custom-content {
    margin-top: 40px; /* Ajusta el valor del margen superior según sea necesario */
	margin-bottom: -15px; /* Ajusta el valor del margen inferior según sea necesario */
}

/* Estilo del borde redondeado para la imagen */
img.attachment-woocommerce_thumbnail {
    border: 3px solid #B58d47; /* Ancho y color del borde */
    border-radius: 22px; /* Valor de redondez (puedes ajustar según tu preferencia) */
} 
  
/* Aumentar el tamaño del título del producto */
.wc-block-grid__product-title {
  font-size: 26px !important; /* O el tamaño que prefieras */
}

/* Aumentar el tamaño del precio del producto */
.wc-block-grid__product-price {
  font-size: 24px !important; /* O el tamaño que prefieras */
}

/* Aumentar o disminuir tamaño del titulo con la pantilla Review Blocks */

.ce_woo_blocks .woo_bl_title h1 {
    font-size: 24px !important; /* Tamaño del texto, ajusta según sea necesario */    
} 

.woo_bl_title h1 {
    text-align: center !important;
    text-transform: uppercase !important;
    font-weight: bold !important;
    line-height: 1.5 !important; /* Puedes ajustar este valor según tus necesidades */
    margin-top: 0px !important; /* Puedes ajustar este valor según tus necesidades */
	margin-bottom: -25px !important;
}

/* Alinear el botón Añadir al Carrito a la izquierda */

button.single_add_to_cart_button {
    margin-left: -15px; /* Ajusta según sea necesario */
}

/* Cambiar el color de fondo y el color de la fuente de la pestaña "Descripción" */
.woocommerce-tabs .tabs .description_tab {
    background-color: #f46d3e;
    color: #000000;
} 

/* Cambiar el color de fondo y el color de la fuente de la pestaña "Descripción" */
.woocommerce-tabs .tabs li.description_tab a {
    background-color: #ffffff;
    color: #000000;
}

/* Cambiar el color de fondo y el color de la fuente de la pestaña "Descripción en dispositivos móviles */

@media screen and (max-width: 767px) {
    body.woocommerce div.product .woocommerce-tabs ul.tabs li.active a {
        background: #fff !important;
        color: #000 !important;
        text-shadow: none !important;
    }
}

/* Estilos específicos para el widget "Top Ofertas" */
.widget.top_offers .rh-deal-price .woocommerce-Price-amount.amount {
    font-size: 16px; /* Tamaño de fuente para el precio regular en el widget */
}

/* Cambiar el color de la cabecera del widget "Top Ofertas" */
.widget.top_offers .title {
    color: #928DFC !important; /* Cambiado a azul con !important */
    padding: 7px;
    text-align: center;
    position: relative;
}


.widget.top_offers .rh-deal-price del {
    font-size: 90%; /* Tamaño de fuente para el precio en oferta tachado en el widget */
    opacity: 1; /* Opacidad del precio en oferta tachado en el widget */
    color: #888; /* Color gris para el precio en oferta tachado en el widget */
    font-weight: normal; /* Peso de la fuente para el precio en oferta tachado en el widget */
}

/* Estilos específicos para el widget "Te Puede Interesar" */
.widget_products .product_list_widget .woocommerce-Price-amount.amount {
    font-size: 16px; /* Tamaño de fuente para el precio regular en el widget */
}

.widget_products .product_list_widget del {
    font-size: 90%; /* Tamaño de fuente para el precio en oferta tachado en el widget */
    opacity: 1; /* Opacidad del precio en oferta tachado en el widget */
    color: #888; /* Color gris para el precio en oferta tachado en el widget */
    font-weight: normal; /* Peso de la fuente para el precio en oferta tachado en el widget */
}

/* Estilos específicos para el widget "Vistos recientemente" */
.widget_recently_viewed_products .product_list_widget .woocommerce-Price-amount.amount {
    font-size: 16px; /* Tamaño de fuente para el precio regular en el widget */
}

.widget_recently_viewed_products .product_list_widget del {
    font-size: 90%; /* Tamaño de fuente para el precio en oferta tachado en el widget */
    opacity: 1; /* Opacidad del precio en oferta tachado en el widget */
    color: #888; /* Color gris para el precio en oferta tachado en el widget */
    font-weight: normal; /* Peso de la fuente para el precio en oferta tachado en el widget */
}

.widget_recently_viewed_products .product_list_widget del:after {
    content: ""; /* Quitar la línea de tachado en el widget */
}

.single-product .woocommerce-Price-amount.amount .woocommerce-Price-currencySymbol {
    font-size: 18px !important;
}


/* Ajustar el tamaño de fuente solo para la parte tachada del precio en oferta */
.price del .woocommerce-Price-amount.amount {
    font-size: inherit;
} 

/* Cambiar el color del nombre del producto en el carrusel de productos */
h3.fontnormal.mb10.mt0.lineheight25 a {
    color: #928DFC !important; /* Cambia este valor al tono de verde que prefieras */
}


/* Cambiar el color y el estilo del precio del producto en WooCommerce */
.woocommerce-Price-amount.amount {
    color: #252847; /* Cambia este valor al color que prefieras */
    font-weight: bold;
}

/* Estilo del botón "Agregar al carrito" en la página de producto individual */
.woocommerce div.product .summary form.cart button.single_add_to_cart_button {
    background-color: #C5E96D !important; /* Cambia este valor al color que prefieras */
    color: #252847 !important; /* Cambia el color del texto si es necesario */
}

/* Estilo del botón "Agregar al carrito" en las vistas de archivo de producto (como categorías o tienda) */
.woocommerce ul.products li.product a.button {
    background-color: #C5E96D !important; /* Cambia este valor al color que prefieras */
    color: #252847 !important; /* Cambia el color del texto si es necesario */
}

/* Estilo para cambiar el color de la cabecera 'Top Ofertas' */
.widget.top_offers .title, .widget.cegg_widget_products .title {
    color: blue; /* Cambiado a azul */
    padding: 7px;
    text-align: center;
    position: relative;
}

/* Cambiar el color del título del producto en WooCommerce */
h1.product_title.entry-title {
    color: #928DFC !important; /* Cambiado a azul */
}

/* Cambia el color del texto del elemento con clases .redbrightcolor y .redcolor */
.redbrightcolor.redcolor {
    color: #252847;
}

/* Cambia el color del texto del span dentro del enlace en el elemento con clase .product_title */
.product_title a span {
    color: #928DFC !important; /* Cambia este valor por el color que prefieras */
}

/* ====================================================================
   Global Base – Landing Pages Bienestar (versión 2025‑06‑29)
   ==================================================================== */

/* 1. Variables genéricas de marca (por defecto ResvisFactor) */
:root {
  /* Paleta principal */
  --color-primary: #26a69a; /* Menta ResvisFactor */
  --color-primary-dark: #1d8f84;
  --color-secondary: #0a3d62; /* Azul oscuro */

  /* Tipografía */
  --font-main: "Segoe UI", sans-serif;
  --radius-lg: 1.5rem;
  --shadow-lg: 0 12px 24px rgba(0,0,0,.08);
}

/* 2. Reset ligero + layout utilitario */
html { scroll-behavior: smooth; }
body { margin:0; font-family: var(--font-main); -webkit-font-smoothing: antialiased; }
img { max-width:100%; height:auto; display:block; }

/* 3. Componentes reutilizables  ------------------------------------------------*/
.btn-primary {
  background: var(--color-primary);
  color:#fff;
  padding:1rem 2rem;
  border-radius: var(--radius-lg);
  text-decoration:none;
  display:inline-block;
  transition:background .3s ease, transform .3s ease;
}
.btn-primary:hover,
.btn-primary:focus { background: var(--color-primary-dark); transform: translateY(-2px); }

/* 4. Sección Hero genérica  ----------------------------------------------------*/
.hero-bloque { position:relative; overflow:hidden; padding:1.5rem 1.2rem 2.5rem; text-align:center; color:var(--color-secondary); }
.hero-overlay{ position:absolute; inset:0; background:rgba(255,255,255,.78); backdrop-filter:brightness(1.1) blur(2px); }
.hero-container{ position:relative; z-index:1; max-width:640px; margin-inline:auto; display:flex; flex-direction:column; gap:.9rem; align-items:center; }
.hero-titulo{ font-size:clamp(1.4rem,6vw,2.2rem); font-weight:900; line-height:1.3; max-width:34ch; }
.hero-titulo .gradiente{ background:linear-gradient(90deg,var(--color-primary),var(--color-secondary)); -webkit-background-clip:text; -webkit-text-fill-color:transparent; }

@media(prefers-reduced-motion:reduce){ *,*:before,*:after{ animation-duration:.01ms!important; animation-iteration-count:1!important; transition-duration:.01ms!important; scroll-behavior:auto!important; } }