/* Theme Name: StarFarma Corporate Author: STARFARMA - CRISTINA BUSTELO Author URI: https://starfarma.es/ Template: Divi Version: 2.2 Description: Diseño para Farmacia de Mera. Optimizado para Divi 5. */ /* 1. IMPORTACIONES ============================================================ */ @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;700&family=Tenor+Sans&display=swap'); /* 2. VARIABLES DE DISEÑO (Configuración Global) ============================================================ */ :root { --azul-logo: #81B9D7; --verde-menta: #A0D2AC; --gris-texto: #666666; --gris-titulos: #4A5568; --blanco-fondo: #FFFFFF; --crema-papel: #F9F7F2; /*--font-titulos: 'Tenor Sans', sans-serif;*/ --font-titulos: 'Times New Roman', sans-serif; --font-cuerpo: 'Inter', sans-serif; } /* 3. TIPOGRAFÍA BASE (Estética Editorial) ============================================================ */ body { font-family: var(--font-cuerpo) !important; font-weight: 300; line-height: 1.8; color: var(--gris-texto); background-color: var(--blanco-fondo); -webkit-font-smoothing: antialiased; } /* Títulos con aire de revista */ h1, h2, h3, h4, h5, h6 { font-family: var(--font-titulos) !important; text-transform: uppercase; letter-spacing: 2px; color: var(--gris-titulos); line-height: 1.2em; font-weight: 400 !important; } /* Tamaños Responsivos h1 { font-size: 64px !important; margin-bottom: 30px; } h2 { font-size: 38px !important; margin-bottom: 25px; } h3 { font-size: 24px !important; margin-bottom: 20px; } */ @media (max-width: 767px) { h1 { font-size: 34px !important; } h2 { font-size: 26px !important; } h3 { font-size: 20px !important; } } p { margin-bottom: 1.6em; } /* 4. HEADER Y NAVEGACIÓN (Desktop) ============================================================ */ @media only screen and (min-width: 981px) { #et-top-navigation { vertical-align: middle; float: none !important; text-align: center; } .container { display: table; } #et-top-navigation > * { text-align: left; } .et-menu-nav, #et_top_search { float: none !important; display: inline-block !important; } #et_top_search { vertical-align: top !important; margin-top: 3px; } } /* Estilo Menú Superior */ #top-menu li a { font-family: var(--font-cuerpo) !important; font-weight: 300 !important; letter-spacing: 1px; color: var(--gris-titulos) !important; } .et_secondary_nav_enabled #page-container #top-header { background: linear-gradient(135deg, var(--verde-menta) 0%, var(--azul-logo) 100%); min-height: 47px; } /* Submenús */ .et-menu-nav li li a { padding: 8px 30px; /* Un poco más de aire */ font-size: 14px; } /* ============================================================ REPARACIÓN FORZADA DE LOGO EN RESOLUCIONES INTERMEDIAS ============================================================ */ /* Corregimos el espacio del contenedor del logo en pantallas intermedias */ @media only screen and (max-width: 1250px) and (min-width: 981px) { /* Forzamos al contenedor de Divi a respetar un ancho máximo y no desbordarse */ .logo_container { max-width: 180px !important; /* Limita el ancho horizontal del logo */ display: flex !important; align-items: center !important; } #logo { max-height: 85% !important; /* Forzamos a que deje aire arriba y abajo */ width: auto !important; /* Evita que se deforme o estire */ object-fit: contain !important; } /* Le damos más espacio al menú para que no choque con el logo */ #et-top-navigation { padding-left: 200px !important; /* Deja espacio libre para el logo fijo */ } /* Reducimos ligeramente el tamaño de la fuente del menú para que quepa en una sola línea */ #top-menu li a { font-size: 13px !important; padding-right: 12px !important; /* Estrecha el espacio entre enlaces */ } } /* Corrección extra para el menú flotante cuando haces scroll (Fixed) */ .et-fixed-header #logo { max-height: 80% !important; } /* 5. MENÚ MÓVIL (Colapsable) ============================================================ */ .et_mobile_menu .menu-item-has-children > a { position: relative; } .et_mobile_menu .menu-item-has-children > a::after { font-family: 'ETmodules'; content: '\4c'; /* Icono + */ position: absolute; font-size: 18px; top: 11px; right: 13px; } .et_mobile_menu .menu-item-has-children.visible > a::after { content: '\4d'; /* Icono - */ } .et_mobile_menu ul.sub-menu { display: none !important; visibility: hidden !important; } .et_mobile_menu li.visible > ul.sub-menu { display: block !important; visibility: visible !important; } /* 6. COMPONENTES Y CLASES ESPECIALES ============================================================ */ /* Excepción — solo los que tienen clase .degradado .degradado h1, .degradado h2, .degradado h3, .degradado h4, .degradado h5, .degradado h6, .degradado p, .degradado * { background: linear-gradient(135deg, var(--verde-menta) 0%, var(--azul-logo) 100%); -webkit-background-clip: text !important; -webkit-text-fill-color: transparent !important; background-clip: text !important; display: inline-block; font-weight:bolder !important; }*/ /* CORRECCIÓN OPTIMIZADA PARA DEGRADADOS EN TÍTULOS (STARFARMA) */ /* 1. Aplicamos el degradado limpio SOLO al span o fragmento específico */ h1 .degradado, h2 .degradado, h3 .degradado, .degradado { background: linear-gradient(135deg, var(--verde-menta) 0%, var(--azul-logo) 100%) !important; -webkit-background-clip: text !important; background-clip: text !important; -webkit-text-fill-color: transparent !important; color: transparent !important; /* Salvavidas de renderizado */ /* Cambiado a inline para que fluya de manera natural dentro de la línea de texto */ display: inline !important; vertical-align: baseline; font-weight: bolder !important; } /* 2. Escudo global anti-roturas para palabras largas en móviles */ h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word !important; word-wrap: break-word !important; word-break: break-word !important; /* El salvavidas para palabras como DERMOCOSMÉTICA */ } /* 3. Ajustes de visualización y tamaños para pantallas móviles */ @media (max-width: 767px) { h1 .degradado, h2 .degradado, h3 .degradado { display: inline !important; /* Mantenemos comportamiento fluido en teléfonos */ max-width: 100% !important; } h1 { font-size: 26px !important; letter-spacing: 1px !important; } } /* Fondo crema sutil (Aplicar clase: seccion-crema) */ .seccion-crema { background-color: var(--crema-papel) !important; } /* Imágenes con bordes suaves (Aplicar clase: imagen-editorial) */ .imagen-editorial img { border-radius: 24px !important; box-shadow: 0 15px 35px rgba(0,0,0,0.05) !important; } /* Botones estilo píldora */ .et_pb_button, .boton-revista { font-family: var(--font-cuerpo) !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 2px !important; font-size: 13px !important; color: #FFFFFF !important; background-color: var(--azul-logo) !important; border-radius: 50px !important; padding: 10px 20px !important; border: none !important; transition: all 0.3s ease !important; } .et_pb_button:hover, .boton-revista:hover { transform: translateY(-2px); box-shadow: 0 8px 20px rgba(112, 201, 233, 0.3) !important; background-color: var(--azul-logo) !important; } /* Estilo personalizado para el botón del pie de página */ .boton-footer { font-family: var(--font-cuerpo) !important; font-weight: 700 !important; text-transform: uppercase !important; letter-spacing: 2px !important; font-size: 13px !important; color: #FFFFFF !important; background-color: #ffffff !important; border-radius: 50px !important; padding: 10px 20px !important; border: none !important; transition: all 0.3s ease !important; } /* 7. ACCESIBILIDAD Y OTROS ============================================================ */ #acwp-toolbar-btn-wrap.show { margin-top: 250px; } /* ============================================================ /* 8 ICONOS ENMARCADOS CON DEGRADADO MERA ============================================================ */ .icono-premium { /* 1. Forzamos el contenedor a comportarse como un bloque flexible alineado */ display: inline-flex !important; align-items: center !important; justify-content: center !important; /* 2. Dimensiones perfectas del círculo */ width: 48px !important; height: 48px !important; border-radius: 50% !important; padding-left: 30px; /* 3. Fondo degradado corporativo */ background: linear-gradient(135deg, var(--verde-menta) 0%, var(--azul-logo) 100%) !important; /* 4. Estilo y MATRICERÍA DEL ICONO (Aquí eliminamos el descentrado) */ color: #FFFFFF !important; font-size: 30px !important; /* El icono ocupa exactamente la mitad del círculo */ line-height: 0 !important; /* Destruye el espacio fantasma inferior de las tipografías */ text-indent: 0 !important; /* Evita sangrías heredadas de Divi */ text-align: center !important; /* 5. Márgenes de separación editorial */ margin-right: 14px; margin-bottom: 8px; /* 6. Estética general */ box-shadow: 0 8px 20px rgba(112, 201, 233, 0.25) !important; text-transform: none !important; letter-spacing: normal !important; transition: all 0.3s ease !important; } /* Efecto hover */ .icono-premium:hover { transform: translateY(-2px); box-shadow: 0 12px 25px rgba(112, 201, 233, 0.4) !important; }