/*
 Theme Name:     Biojuve
 Theme URI:      https://imesdisseny.com
 Description:    Divi Child Theme
 Author:         imesdisseny
 Author URI:     https://imesdisseny.com
 Template:       Divi
 Version:        1.1.0
*/
 
 
/* =Theme customization starts here
------------------------------------------------------- */

h2 {
  font-size: 3rem;
}

strong, b {
  color: #f7be00;
}

.custom-button {
    display: inline-block;
    padding: 10px 20px 10px 20px; 
    text-decoration: none;
    color: #fff;
    background-color: #f7be00;
    transition: padding-right 0.3s ease, padding-left 0.3s ease;
    position: relative; 
    border-radius: 3px;
}

.custom-button .button-icon {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%) translateX(100%); 
    width: 20px; 
    opacity: 0; 
    transition: opacity 0.3s ease, transform 0.3s ease; 
}

.custom-button:hover {
    padding-right: 50px;
    padding-left: 10px; 
}

.custom-button:hover .button-icon {
    opacity: 1; /* Hace el ícono completamente visible */
    transform: translateY(-50%) translateX(0%); /* Mueve el ícono a su posición final */
}

.img-hover:hover {
    filter: grayscale(100%) sepia(100%) hue-rotate(20deg) saturate(50%);
    mix-blend-mode: multiply;
}

/* rutina */
div.rutina {
    position: relative;
    background: radial-gradient(circle at center 25%, #999999 0%,  #2a312d 40%, #2a312d 100%);
    min-height: 600px;
}

div.rutina::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 45%; 
    background-color: #2a312d;
}


div.rutina .et_pb_blurb .et_pb_module_header {
  padding-bottom: 20px;
}

div.rutina div.et_pb_blurb_container p {
  padding-bottom: 10px;
}

div.rutina div.et_pb_blurb_container p span.paso {
  font-weight: bold;
}

div.rutina div.et_pb_blurb_container p span.paso2 {
  font-weight: bold;
  font-size: 1.2em;
}

.dd-divimenu-open .dd-mb-image-opacity, .dd-image-opacity .dd-menu-item-content.active img, .dd-image-opacity img:hover, .dd-menu-button:not(.dd-disabled) .dd-mb-image-opacity:hover {
  opacity: .8 !important; 
}

.imes-number-counter-after .percent-value:after {
  content: "%";
}


/* Estilo básico del formulario */
body .gform_wrapper {
    font-family: "Manrope", 'Helvetica', sans-serif; /* Fuente similar a la usada en Divi */
    color: #333; /* Color de texto general */
    background-color: #fff; /* Fondo del formulario */
    padding: 20px; /* Espaciado interno */
    border-radius: 8px; /* Bordes redondeados */
    box-shadow: 0 0 15px rgba(0,0,0,0.1); /* Sombra suave */
}

/* Estilos de los inputs y textareas */
body .gform_wrapper input[type=text],
body .gform_wrapper input[type=email],
body .gform_wrapper textarea {
    width: 100%; /* Ancho completo */
    padding: 10px 15px; /* Espaciado interno */
    border: 1px solid #ccc; /* Borde */
    border-radius: 4px; /* Bordes redondeados */
    margin-bottom: 15px; /* Margen inferior */
}

/* Estilo de los labels */
body .gform_wrapper label {
    display: block; /* Hacer que los labels sean bloques */
    margin-bottom: 5px; /* Espacio antes del input */
    font-weight: bold; /* Texto en negrita */
}

body .gform_required_legend {
  display: none;
}


/* Botón de envío */
body .gform_wrapper .gform_footer input[type=submit] {
    background-color: #333 !important; /* Color de fondo */
    color: #fff; /* Color de texto */
    border: none; /* Sin bordes */
    padding: 10px 20px; /* Espaciado interno */
    border-radius: 4px; /* Bordes redondeados */
    cursor: pointer; /* Cursor en forma de mano */
    transition: background-color 0.3s; /* Transición suave */
}

/* Hover del botón de envío */
body .gform_wrapper .gform_footer input[type=submit]:hover {
    background-color: #555; /* Color al pasar el mouse */
}

/* Mensajes de error */
body .gform_wrapper .validation_error {
    color: red; /* Color del texto de error */
    font-size: 0.9em; /* Tamaño del texto */
    margin-bottom: 15px; /* Espacio después del mensaje */
}


/* responsive */

/*** Responsive Styles Large Desktop And Above ***/
@media all and (min-width: 1405px) {
}
 
/*** Responsive Styles Standard Desktop Only ***/
@media all and (min-width: 1100px) and (max-width: 1405px) {
}
 
/*** Responsive Styles Tablet And Below ***/
@media all and (max-width: 980px) {
 }
 
/*** Responsive Styles Tablet Only ***/
@media all and (min-width: 768px) and (max-width: 980px) {
 }
 
/*** Responsive Styles Smartphone Only ***/
@media all and (max-width: 767px) {
  h2 {
    font-size: 2.6rem;
  }
  
  div.et_pb_section.et_pb_section_15 {
    background-size: 60% auto !important;
    background-position: right 0% center;
    background-image: url(http://biojuve.es/wp-content/uploads/2024/02/Biojuve_DNA_white-01.png) !important;
  }
  
}

/*** Responsive Styles Smartphone Portrait ***/
@media all and (max-width: 479px) {
 }