.elementor-45053 .elementor-element.elementor-element-49f9c161 > .elementor-background-overlay{background-color:#FFFFFF;background-image:url("https://marujachocolate.hawkins.es/wp-content/uploads/2025/11/25-05-30_3670_Chefchaouen-scaled-1-e1777981397971.jpg");opacity:1;transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-45053 .elementor-element.elementor-element-49f9c161 > .elementor-container{min-height:899px;}.elementor-45053 .elementor-element.elementor-element-49f9c161{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;}.elementor-45053 .elementor-element.elementor-element-4b2d0b0a{--spacer-size:50px;}.elementor-45053 .elementor-element.elementor-element-658fab4{--spacer-size:30px;}.elementor-45053 .elementor-element.elementor-element-8362180{--spacer-size:50px;}.elementor-45053 .elementor-element.elementor-element-13b8d58{--display:flex;}.elementor-45053 .elementor-element.elementor-element-cb43923{margin:-61px 0px calc(var(--kit-widget-spacing, 0px) + 0px) 0px;padding:0px 0px 0px 0px;}.elementor-45053 .elementor-element.elementor-element-6f57824:not(.elementor-motion-effects-element-type-background), .elementor-45053 .elementor-element.elementor-element-6f57824 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-color:#D31221;}.elementor-45053 .elementor-element.elementor-element-6f57824 > .elementor-container{max-width:500px;}.elementor-45053 .elementor-element.elementor-element-6f57824 > .elementor-background-overlay{opacity:0.5;transition:background 0.3s, border-radius 0.3s, opacity 0.3s;}.elementor-45053 .elementor-element.elementor-element-6f57824{transition:background 0.3s, border 0.3s, border-radius 0.3s, box-shadow 0.3s;margin-top:-73px;margin-bottom:0px;}.elementor-45053 .elementor-element.elementor-element-6f57824 > .elementor-shape-top svg{width:calc(100% + 1.3px);height:0px;}.elementor-45053 .elementor-element.elementor-element-6f57824 > .elementor-shape-top{z-index:2;pointer-events:none;}.elementor-45053 .elementor-element.elementor-element-6f57824 > .elementor-shape-bottom svg{width:calc(189% + 1.3px);height:279px;transform:translateX(-50%) rotateY(180deg);}.elementor-45053 .elementor-element.elementor-element-6f57824 > .elementor-shape-bottom{z-index:2;pointer-events:none;}.elementor-45053 .elementor-element.elementor-element-a17f930{--spacer-size:109px;}@media(max-width:1024px){.elementor-45053 .elementor-element.elementor-element-658fab4{--spacer-size:20px;}}@media(max-width:767px){.elementor-45053 .elementor-element.elementor-element-658fab4{--spacer-size:15px;}}@media(min-width:768px){.elementor-45053 .elementor-element.elementor-element-3f43bedd{width:100%;}}@media(max-width:1024px) and (min-width:768px){.elementor-45053 .elementor-element.elementor-element-63f8ccde{width:65%;}}/* Start custom CSS for shortcode, class: .elementor-element-58ac7c39 *//* 1. Fondo, ancho ampliado, SUBIDO MÁS hacia el header y achatado */
.wpcf7 {
    background-color: rgba(255, 255, 255, 0.90) !important;
    padding: 25px 50px !important; 
    width: 100%;
    max-width: 700px !important; 
    margin: -110px auto 0 auto !important; /* ¡AQUÍ ESTÁ LA MAGIA! (-110px) */
    font-family: Arial, Helvetica, sans-serif;
}
.wpcf7 p { margin: 0 !important; padding: 0 !important; display: contents; }

/* 2. Textos cabecera más grandes y ACHATADOS */
.formulario-intro { margin-bottom: 15px; display: block; } 
.formulario-intro h3 { color: #d1121c !important; font-size: 20px; font-weight: bold; margin: 0 0 5px 0; }
.formulario-intro p { color: #d1121c !important; font-size: 13px; line-height: 1.4; margin: 0; display: block; }

/* 3. Filas proporcionales y MÁS JUNTAS */
.fila-formulario {
    display: flex !important;
    align-items: center;
    margin-bottom: 6px !important; 
    width: 100%;
}
.fila-formulario.align-top { align-items: flex-start; }

/* 4. Columna izquierda (Textos en rojo ampliados) */
.fila-formulario label {
    width: 32%; 
    padding-right: 2%;
    color: #d1121c !important;
    font-size: 14px; 
    margin: 0;
    line-height: 1.2;
    font-weight: normal;
}

/* 5. Columna derecha (Envoltorio cajas) */
.fila-formulario .wpcf7-form-control-wrap {
    width: 68%;
    display: block;
}

/* 6. Cajas de texto MÁS ACHATADAS */
.wpcf7 input[type="text"],
.wpcf7 input[type="email"],
.wpcf7 input[type="tel"],
.wpcf7 select,
.wpcf7 textarea {
    width: 100%;
    height: 30px; 
    border: 1px solid #f2a6a6 !important; 
    background-color: #ffffff !important;
    padding: 0 10px !important;
    color: #333333;
    font-size: 14px; 
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none;
    box-sizing: border-box;
}

/* Caja de mensaje MÁS ACHATADA */
.wpcf7 textarea {
    height: 100px !important; 
    padding-top: 8px !important;
    resize: none;
}

/* 7. Ajuste del triángulo rojo del .elementor-45053 .elementor-element.elementor-element-58ac7c39 al nuevo tamaño */
.wpcf7 select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;utf8,<svg fill='%23d1121c' height='24' viewBox='0 0 24 24' width='24' xmlns='http://www.w3.org/2000/svg'><path d='M7 10l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: 5px center; 
    padding-left: 30px !important; 
}

/* 8. Footer (Política y Botón ampliados) */
.formulario-footer {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    margin-top: 10px; 
    margin-left: 32%; 
    width: 68%;
}

.enlace-politica a {
    color: #d1121c !important;
    font-size: 12px; 
    text-decoration: none;
}
.enlace-politica a:hover { text-decoration: underline; }

.boton-enviar .wpcf7-submit {
    background-color: #d1121c !important;
    color: white !important;
    border: none !important;
    padding: 10px 30px !important; 
    border-radius: 25px !important;
    font-size: 14px !important; 
    cursor: pointer;
    font-weight: normal;
    height: auto; 
}

/* Forzar el color rojo en las etiquetas por encima de los ajustes del tema */
div.wpcf7 form.wpcf7-form .fila-formulario label {
    color: #d1121c !important;
    visibility: visible !important;
    opacity: 1 !important;
}/* End custom CSS */
/* Start custom CSS for section, class: .elementor-element-49f9c161 *//* Forzar la posición del fondo en todas las capas internas de Elementor */
.fondo-chocolate,
.fondo-chocolate > .elementor-background-overlay,
.fondo-chocolate.elementor-section {
    background-position: bottom left !important;
    background-size: cover !important;
    background-repeat: no-repeat !important;
}/* End custom CSS */
/* Start custom CSS for section, class: .elementor-element-6f57824 *//* 1. Hacemos que el bloque del divisor sea invisible para que se vea el fondo azul */
.elementor-shape {
    background-color: transparent !important;
    background: none !important;
    pointer-events: none;
}

/* 2. Forzamos el color rojo de Maruja en la onda */
.elementor-shape .elementor-shape-fill {
    fill: #d1121c !important;
    opacity: 1 !important;
}

/* 3. Liberamos el SVG para que Elementor pueda darle curvas */
.elementor-shape svg {
    height: auto !important; /* Esto permite que el slider de Elementor funcione */
    min-height: 100px; /* Le damos un mínimo para que no desaparezca */
}/* End custom CSS */