/* Retoques de diseño sobre el tema original (se carga el último y manda sobre él).
   Colores de la marca: naranja de la barra #fc900d, botones #f1b10c. */

/* ---------- Barra naranja: idioma (izquierda), contacto y área de clientes (derecha) ---------- */
#sec-nav-text-area-2,
#sec-nav-text-area-1 { display: flex; align-items: center; min-height: 50px; }
#sec-nav-text-area-1 { justify-content: flex-end; gap: 12px; }
#sec-nav-text-area-1 .ud-social-icons { margin: 0; }

.selector-idioma { display: inline-flex; gap: 2px; padding: 3px; border-radius: 999px; background: rgba(0, 0, 0, .14); }
.selector-idioma a,
.mean-container .mean-bar .selector-idioma a { display: inline-block; float: none; width: auto; height: auto; margin: 0; padding: 6px 12px;
                     border-radius: 999px; background: none; color: #fff !important; font: 700 12px/1 'Raleway', Arial, sans-serif;
                     letter-spacing: .08em; text-decoration: none; transition: background-color .2s, color .2s; }
.selector-idioma a:hover,
.selector-idioma a:focus-visible { background: rgba(255, 255, 255, .25); }
.selector-idioma a[aria-current="page"],
.mean-container .mean-bar .selector-idioma a[aria-current="page"] { background: #fff; color: #d96f00 !important; }

/* iconos de correo y teléfono: blancos sobre el naranja en vez de bolas negras */
#top-wrapper .ud-social-icons.slide li { background: rgba(255, 255, 255, .22); box-shadow: none; transition: background-color .2s; }
#top-wrapper .ud-social-icons.slide li:hover { background: rgba(0, 0, 0, .28); }

.boton-clientes { display: inline-flex; align-items: center; gap: 8px; padding: 9px 18px; border-radius: 999px; background: #fff;
                  color: #d96f00 !important; font: 700 13px/1 'Raleway', Arial, sans-serif; text-decoration: none; white-space: nowrap;
                  box-shadow: 0 2px 8px rgba(0, 0, 0, .12); transition: background-color .2s, color .2s, transform .2s; }
.boton-clientes:hover,
.boton-clientes:focus-visible { background: #3d2b16; color: #fff !important; transform: translateY(-1px); }

/* ---------- Logo de la cabecera ---------- */
/* La imagen mide 290×100 y el tema la metía en 274×80 (estirada a lo ancho); en el móvil,
   sin tamaño, la recortaba por arriba. Ahora se ve entera y con sus proporciones. */
#logo h1 a,
#logo .site-name a { background-size: contain !important; background-position: left center !important; }
@media (max-width: 719px) {
    #logo h1 a,
    #logo .site-name a { background-position: center center !important; }
}

/* ---------- Botones ---------- */
a.flat-custom-button,
.cf-boton { border-radius: 6px !important; box-shadow: 0 4px 12px rgba(241, 177, 12, .35);
            transition: transform .15s, box-shadow .15s, background-color .15s !important; }
a.flat-custom-button:hover,
.cf-boton:hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(241, 177, 12, .45); }

/* ---------- Bloques de la portada y fotos ---------- */
.vc_row-o-equal-height .vc_col-has-fill > .vc_column-inner { border-radius: 12px; overflow: hidden; }
.wpb_single_image .vc_single_image-wrapper img { border-radius: 12px; }

/* fichas de producto (rejilla y carrusel) */
.eg-recipes-wrapper .esg-media-cover-wrapper { border-radius: 12px; overflow: hidden; background: #fff;
                                               box-shadow: 0 4px 18px rgba(60, 40, 10, .08); transition: box-shadow .3s, transform .3s; }
.eg-recipes-wrapper:hover .esg-media-cover-wrapper { box-shadow: 0 12px 30px rgba(60, 40, 10, .16); transform: translateY(-3px); }
.eg-recipes-wrapper .esg-entry-media img { transition: transform .35s ease-out; }
.eg-recipes-wrapper:hover .esg-entry-media img { transform: scale(1.04); }
/* sin la capa oscura con "VER IMAGEN" al pasar el ratón: se pulsa la foto (mejoras.js) */
.eg-recipes-wrapper .esg-entry-cover { display: none !important; }
.eg-recipes-wrapper .esg-entry-media { cursor: zoom-in; }
.eg-recipes-wrapper .esg-entry-media:focus-visible { outline: 3px solid #f1b10c; outline-offset: -3px; }

/* galería de "Inmejorable ubicación" */
.galeria-fija { gap: 6px; padding: 6px; }
.galeria-fija a { border-radius: 8px; overflow: hidden; }
.galeria-fija a { cursor: zoom-in; }
.galeria-fija img { transition: transform .35s ease-out; }
.galeria-fija a:hover img { transform: scale(1.05); }

/* caja "Elija usted consumir...": verde huerta en vez del morado */
.vc_cta3[style*="776c7c"] { background: linear-gradient(135deg, #2f5b3b 0%, #4a7f52 100%) !important; border: 0 !important;
                            border-radius: 14px !important; box-shadow: 0 12px 30px rgba(47, 91, 59, .25); }

/* ---------- Formulario de contacto ---------- */
.cf-input { border-radius: 6px !important; border-color: rgba(255, 255, 255, .35) !important; color: #fff !important;
            transition: border-color .2s, background-color .2s; }
.cf-input:focus { outline: none; border-color: #f1b10c !important; background: rgba(255, 255, 255, .06) !important; }

/* ---------- Móvil ---------- */
/* En el móvil el tema oculta la barra de arriba y usa una barra naranja con el menú
   (hamburguesa). mejoras.js copia ahí el idioma y el área de clientes (.barra-movil),
   a la izquierda de la hamburguesa; correo y teléfono ya están en el menú y en la página. */
.mean-bar { position: relative; }
.barra-movil { position: absolute; top: 0; left: 12px; height: 58px; display: flex; align-items: center; gap: 10px; z-index: 2; }
.barra-movil .selector-idioma a { padding: 6px 9px; }
.barra-movil .boton-clientes { padding: 7px 11px; font-size: 12px; gap: 6px; }
@media (max-width: 359px) {
    .barra-movil .texto-clientes { display: none; }
}