/** * Capa estética global de Farmacia Vía Roma. * * Reglas de oro de este archivo: * 1. Nada se oculta si el JavaScript no ha arrancado. Las animaciones sólo * existen cuando lleva la clase .vr-est-js. * 2. Nada se aplica dentro del editor de Elementor ni del escritorio. * 3. Todo se apaga con prefers-reduced-motion. * 4. Todo se apaga entero desde Alquiler → Contacto y SEO. */ :root { /* Paleta. El verde es el de la farmacia: el del titular de portada y el del botón de llamar. Antes tirábamos del azul de la plantilla, que no aparece por ninguna parte en la web real. */ --vr-verde: #004739; --vr-verde-claro: #0b6a55; --vr-verde-agua: #eef4f1; --vr-tinta: #16211f; --vr-suave: #4c5a63; --vr-crema: #f7f6ef; --vr-linea: rgba( 0, 71, 57, 0.14 ); --vr-linea-fuerte: rgba( 0, 71, 57, 0.32 ); --vr-curva: cubic-bezier( 0.22, 0.61, 0.36, 1 ); --vr-radio: 16px; --vr-radio-chico: 10px; --vr-sombra: 0 1px 2px rgba( 22, 33, 31, 0.05 ), 0 10px 26px -16px rgba( 22, 33, 31, 0.35 ); --vr-sombra-alta: 0 2px 4px rgba( 22, 33, 31, 0.07 ), 0 24px 48px -20px rgba( 22, 33, 31, 0.45 ); --vr-texto: 'Work Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif; } /* ------------------------------------------------------------------ * * 1. Aparición al hacer scroll * ------------------------------------------------------------------ */ .vr-est-js [data-vr-rev] { opacity: 0; transform: translate3d( 0, 22px, 0 ); transition: opacity 0.7s var( --vr-curva ), transform 0.7s var( --vr-curva ); transition-delay: var( --vr-espera, 0ms ); will-change: opacity, transform; } .vr-est-js [data-vr-rev].vr-visible { opacity: 1; transform: none; } /* Una vez visto, se libera la capa de composición: si se queda puesta, rompe los modos de fusión de Elementor en los elementos de dentro. */ .vr-est-js [data-vr-rev].vr-listo { will-change: auto; transition: none; } /* ------------------------------------------------------------------ * * 2. Portada: que el titular se lea sobre cualquier foto * * La sección de cabecera lleva un pase de fotos de fondo y los títulos * usan mix-blend-mode: multiply. Con la diapositiva oscura se leen; con la * clara (las bolsas del SPD sobre blanco) desaparecen. Se pone un velo * blanco sobre las fotos y se quita la fusión: así se lee siempre. * ------------------------------------------------------------------ */ .vr-est .elementor-background-slideshow::after, .vr-est .elementor-background-overlay + .elementor-background-slideshow::after { content: ''; position: absolute; inset: 0; z-index: 2; pointer-events: none; background: linear-gradient( 180deg, rgba( 255, 255, 255, 0.72 ) 0%, rgba( 255, 255, 255, 0.5 ) 50%, rgba( 255, 255, 255, 0.7 ) 100% ); } /* El velo por sí solo no basta con una foto muy clara: el halo blanco alrededor de la letra es lo que garantiza que se lea con cualquier diapositiva. Los tamaños de letra y los márgenes se dejan a Elementor, para que se puedan retocar desde el editor sin tocar el plugin. */ .vr-est .elementor-top-section:has( .elementor-background-slideshow ) .elementor-heading-title { mix-blend-mode: normal !important; color: var( --vr-verde ) !important; text-shadow: 0 0 18px rgba( 255, 255, 255, 0.95 ), 0 1px 2px rgba( 255, 255, 255, 0.9 ); } .vr-est .elementor-top-section:has( .elementor-background-slideshow ) .elementor-widget-text-editor, .vr-est .elementor-top-section:has( .elementor-background-slideshow ) p { color: var( --vr-tinta ); text-shadow: 0 1px 0 rgba( 255, 255, 255, 0.5 ); } /* ------------------------------------------------------------------ * * 3. Los bloques de servicio pasan a ser tarjetas * ------------------------------------------------------------------ */ /* Nada de igualar alturas. Se probó a estirar todas las tarjetas de una fila hasta la más alta, y en la portada el resultado era malo: la de las marcas mide trece líneas y dejaba a sus dos vecinas convertidas en cajas casi vacías de 800 px. Cada tarjeta mide lo que mide su contenido; lo que las hace parecer un juego es el marco, no la altura. */ .vr-est .elementor-widget-icon-box .elementor-icon-box-wrapper, .vr-est .elementor-widget-image-box .elementor-image-box-wrapper { padding: 30px 26px 32px; border: 1px solid var( --vr-linea ); border-radius: var( --vr-radio ); background: #fff; box-shadow: var( --vr-sombra ); transition: transform 0.35s var( --vr-curva ), box-shadow 0.35s var( --vr-curva ), border-color 0.35s var( --vr-curva ); } .vr-est .elementor-widget-icon-box:hover .elementor-icon-box-wrapper, .vr-est .elementor-widget-image-box:hover .elementor-image-box-wrapper { transform: translateY( -4px ); border-color: var( --vr-linea-fuerte ); box-shadow: var( --vr-sombra-alta ); } .vr-est .elementor-icon-box-title, .vr-est .elementor-image-box-title { color: var( --vr-tinta ); letter-spacing: -0.01em; text-wrap: balance; } /* Algunos títulos de tarjeta son enlaces y salían en el azul de la plantilla, un color que no aparece en ninguna otra parte de la web. */ .vr-est .elementor-icon-box-title a, .vr-est .elementor-image-box-title a { color: var( --vr-verde ) !important; text-decoration: none; } .vr-est .elementor-icon-box-title a:hover, .vr-est .elementor-image-box-title a:hover { color: var( --vr-verde-claro ) !important; text-decoration: underline; text-underline-offset: 4px; } .vr-est .elementor-icon-box-description, .vr-est .elementor-image-box-description { color: var( --vr-suave ); font-family: var( --vr-texto ); line-height: 1.7; } .vr-est .elementor-icon-box-icon .elementor-icon, .vr-est .elementor-widget-icon .elementor-icon { transition: transform 0.4s var( --vr-curva ); } /* Listas de marcas en horizontal. Trece marcas, una por línea, hacían que ese panel midiera el triple que sus vecinos. En etiquetas que fluyen ocupan tres o cuatro líneas y la fila queda pareja. El marcado lo pone el texto del propio widget. */ .vr-est .vr-marcas { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 16px; } .vr-est .vr-marca { display: inline-block; padding: 5px 13px; border: 1px solid var( --vr-linea ); border-radius: 999px; background: var( --vr-verde-agua ); color: var( --vr-verde ); font-family: var( --vr-texto ); font-size: 13.5px; font-weight: 500; line-height: 1.35; white-space: nowrap; } /* En columnas estrechas (tablet) trece etiquetas ocupan demasiado; se encogen para que el panel no vuelva a descuadrar la fila. */ @media ( max-width: 1024px ) { .vr-est .vr-marcas { gap: 6px; } .vr-est .vr-marca { padding: 4px 10px; font-size: 12px; } } /* Un panel a todo el ancho no debe tener renglones de 200 caracteres. */ .vr-est .elementor-col-100 .elementor-icon-box-description, .vr-est .elementor-col-100 .elementor-image-box-description { max-width: 78ch; margin-inline: auto; } .vr-est .elementor-widget-icon-box:hover .elementor-icon { transform: translateY( -3px ) scale( 1.06 ); } /* ------------------------------------------------------------------ * * 4. El sombreado azul al pasar por encima * * La plantilla pintaba la columna entera de azul acero al pasar el ratón, * y el texto negro encima se quedaba sin contraste. Se quita ese relleno y * el gesto lo hace la tarjeta: se levanta, se marca el borde y crece la * sombra. El texto no cambia de color, así que siempre se lee. * ------------------------------------------------------------------ */ .vr-est .elementor-column:hover > .elementor-widget-wrap, .vr-est .elementor-column:hover > .elementor-element-populated, .vr-est .elementor-element:hover > .elementor-widget-wrap.elementor-element-populated { background-color: transparent !important; background-image: none !important; } .vr-est .elementor-column > .elementor-widget-wrap { transition: background-color 0.3s var( --vr-curva ); } /* ------------------------------------------------------------------ * * 5. Botones * ------------------------------------------------------------------ */ .vr-est .elementor-button, .vr-est .ast-button, .vr-est .wp-block-button__link, .vr-est .woocommerce a.button, .vr-est .woocommerce button.button, .vr-est .vr-boton { background-color: var( --vr-verde ) !important; color: #fff !important; border: 0 !important; border-radius: 999px !important; padding: 14px 30px !important; font-family: var( --vr-texto ); font-size: 15px !important; font-weight: 600; letter-spacing: 0.02em; line-height: 1.2; text-decoration: none; box-shadow: 0 8px 20px -12px rgba( 0, 71, 57, 0.9 ); transition: transform 0.25s var( --vr-curva ), box-shadow 0.25s var( --vr-curva ), background-color 0.25s var( --vr-curva ); } .vr-est .elementor-button:hover, .vr-est .ast-button:hover, .vr-est .wp-block-button__link:hover, .vr-est .woocommerce a.button:hover, .vr-est .woocommerce button.button:hover, .vr-est .vr-boton:hover { background-color: var( --vr-verde-claro ) !important; transform: translateY( -2px ); box-shadow: 0 14px 28px -14px rgba( 0, 71, 57, 0.95 ); } .vr-est .elementor-button:active, .vr-est .vr-boton:active { transform: translateY( 0 ); } /* ------------------------------------------------------------------ * * 6. Enlaces de texto * * Sólo se marca el enlace, no el bloque entero: un subrayado que se dibuja * de izquierda a derecha y un punto de color. Nada de fondos amplios. * ------------------------------------------------------------------ */ .vr-est .entry-content a:not( .elementor-button ):not( .button ):not( .wp-block-button__link ):not( .ast-button ), .vr-est .elementor-widget-text-editor a:not( .elementor-button ), .vr-est .elementor-widget-theme-post-content a:not( .elementor-button ), .vr-est .elementor-icon-box-description a, .vr-est .vr-catalogo a.vr-enlace { color: var( --vr-verde ); text-decoration: none; background-image: linear-gradient( var( --vr-verde ), var( --vr-verde ) ); background-repeat: no-repeat; background-position: 0 100%; background-size: 0 2px; padding-bottom: 2px; transition: background-size 0.35s var( --vr-curva ), color 0.25s var( --vr-curva ); box-decoration-break: clone; -webkit-box-decoration-break: clone; } .vr-est .entry-content a:not( .elementor-button ):not( .button ):not( .wp-block-button__link ):not( .ast-button ):hover, .vr-est .elementor-widget-text-editor a:not( .elementor-button ):hover, .vr-est .elementor-widget-theme-post-content a:not( .elementor-button ):hover, .vr-est .elementor-icon-box-description a:hover, .vr-est .vr-catalogo a.vr-enlace:hover { background-size: 100% 2px; color: var( --vr-verde-claro ); } /* ------------------------------------------------------------------ * * 7. Menú de navegación * ------------------------------------------------------------------ */ .vr-est .main-header-menu > .menu-item > .menu-link { position: relative; transition: color 0.25s var( --vr-curva ); } .vr-est .main-header-menu > .menu-item > .menu-link::after { content: ''; position: absolute; left: 1em; right: 1em; bottom: 0.5em; height: 2px; border-radius: 2px; background: var( --vr-verde ); transform: scaleX( 0 ); transform-origin: left center; transition: transform 0.3s var( --vr-curva ); } .vr-est .main-header-menu > .menu-item > .menu-link:hover::after, .vr-est .main-header-menu > .menu-item.current-menu-item > .menu-link::after { transform: scaleX( 1 ); } .vr-est .ast-header-break-point .main-header-menu > .menu-item > .menu-link::after { display: none; } /* ------------------------------------------------------------------ * * 8. Imágenes y fichas de producto * * Las fotos del catálogo vienen de proveedores distintos: unas cuadradas, * otras apaisadas, con más o menos aire alrededor. Todas van dentro del * mismo marco blanco cuadrado y se escalan sin recortar, así que la * rejilla se ve pareja aunque los archivos no lo sean. * ------------------------------------------------------------------ */ .vr-est .vr-tarjeta__foto, .vr-est .vr-ficha__foto, .vr-est .vr-mini__foto, .vr-est .vr-tarjeta__sinfoto { display: block; width: 100%; aspect-ratio: 1 / 1; padding: 14px; border: 1px solid var( --vr-linea ); border-radius: var( --vr-radio-chico ); background: #fff; overflow: hidden; } .vr-est .vr-tarjeta__foto img, .vr-est .vr-ficha__foto img, .vr-est .vr-mini__foto img { width: 100%; height: 100%; object-fit: contain; display: block; border-radius: 0; transition: transform 0.5s var( --vr-curva ); } .vr-est .vr-tarjeta:hover .vr-tarjeta__foto img, .vr-est .vr-mini:hover .vr-mini__foto img { transform: scale( 1.04 ); } .vr-est .vr-tarjeta__sinfoto { display: flex; align-items: center; justify-content: center; color: var( --vr-suave ); font-size: 13px; text-align: center; } .vr-est .vr-tarjeta { border-radius: var( --vr-radio ); transition: transform 0.3s var( --vr-curva ), box-shadow 0.3s var( --vr-curva ), border-color 0.3s var( --vr-curva ); } .vr-est .vr-tarjeta:hover { transform: translateY( -3px ); border-color: var( --vr-linea-fuerte ); box-shadow: var( --vr-sombra-alta ); } .vr-est .elementor-widget-image img, .vr-est .wp-block-image img { border-radius: var( --vr-radio-chico ); transition: transform 0.5s var( --vr-curva ), box-shadow 0.4s var( --vr-curva ); } .vr-est .elementor-widget-image a:hover img, .vr-est .wp-block-image a:hover img { transform: scale( 1.02 ); box-shadow: var( --vr-sombra-alta ); } .vr-est .custom-logo-link img, .vr-est .site-logo-img img { border-radius: 0; transform: none !important; box-shadow: none !important; } /* ------------------------------------------------------------------ * * 9. Legibilidad y ritmo * ------------------------------------------------------------------ */ .vr-est .elementor-widget-text-editor, .vr-est .entry-content p { line-height: 1.72; color: var( --vr-suave ); } /* ---- Dos tipografías, no cuatro ----------------------------------- * * * La web mezclaba Verdana en el menú, Federo en la portada, Roboto en las * tarjetas y Work Sans en el cuerpo. Se deja la que ya usa el nombre de la * farmacia bajo el logotipo —DM Serif Display— para todo lo que sea título, * y Work Sans para todo lo que sea leer o pulsar. Las dos ya las cargaba el * tema, así que esto no añade ni una descarga. */ .vr-est h1, .vr-est h2, .vr-est h3, .vr-est h4, .vr-est .elementor-heading-title, .vr-est .elementor-icon-box-title, .vr-est .elementor-image-box-title, .vr-est .site-title, .vr-est .site-title a, .vr-est .vr-ficha__titulo, .vr-est .vr-tarjeta__titulo, .vr-est .vr-similares__titulo, .vr-est .vr-catalogo h2, .vr-est .vr-catalogo h3 { font-family: 'DM Serif Display', Georgia, 'Times New Roman', serif !important; font-weight: 400 !important; letter-spacing: -0.005em; text-wrap: balance; } .vr-est, .vr-est p, .vr-est li, .vr-est td, .vr-est th, .vr-est label, .vr-est .elementor-widget-text-editor, .vr-est .elementor-icon-box-description, .vr-est .elementor-image-box-description, .vr-est .menu-link, .vr-est .site-description, .vr-est button, .vr-est input, .vr-est select, .vr-est textarea, .vr-est .elementor-button, .vr-est .vr-boton { font-family: var( --vr-texto ) !important; } /* El nombre de la farmacia iba en un gris azulado que no aparece en ninguna otra parte. Va en el verde de la casa, el mismo del rótulo. */ .vr-est .site-title, .vr-est .site-title a { color: var( --vr-verde ) !important; } /* El aviso de la tienda venía con el estilo de fábrica de WooCommerce. */ .vr-est .woocommerce-store-notice { background: var( --vr-verde ) !important; color: #fff !important; font-family: var( --vr-texto ); font-size: 14px !important; letter-spacing: 0.01em; padding: 10px 20px !important; box-shadow: none; } .vr-est .woocommerce-store-notice a { color: #fff !important; text-decoration: underline; text-underline-offset: 3px; } /* ------------------------------------------------------------------ * * 10. Foco de teclado visible (accesibilidad) * ------------------------------------------------------------------ */ .vr-est a:focus-visible, .vr-est button:focus-visible, .vr-est input:focus-visible, .vr-est select:focus-visible, .vr-est textarea:focus-visible { outline: 3px solid var( --vr-verde-claro ); outline-offset: 2px; border-radius: 4px; } /* ------------------------------------------------------------------ * * 11. Botón de volver arriba * * Se coloca justo encima de los botones fijos de llamar y WhatsApp. El * JavaScript mide esa barra y ajusta la separación; los valores de aquí * son sólo el punto de partida por si no la encuentra. * ------------------------------------------------------------------ */ .vr-arriba { position: fixed; right: var( --vr-arriba-derecha, 16px ); bottom: var( --vr-arriba-abajo, 150px ); z-index: 9997; width: 42px; height: 42px; display: flex; align-items: center; justify-content: center; padding: 0; border: 1px solid rgba( 255, 255, 255, 0.35 ); border-radius: 50%; cursor: pointer; background: var( --vr-verde ); color: #fff; box-shadow: 0 10px 24px -12px rgba( 22, 33, 31, 0.8 ); opacity: 0; visibility: hidden; transform: translateY( 10px ); transition: opacity 0.3s var( --vr-curva ), transform 0.3s var( --vr-curva ), background-color 0.25s var( --vr-curva ), visibility 0.3s; } .vr-arriba.vr-visible { opacity: 1; visibility: visible; transform: none; } .vr-arriba:hover { background: var( --vr-verde-claro ); transform: translateY( -3px ); } .vr-arriba svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; } @media ( max-width: 782px ) { .vr-arriba { width: 38px; height: 38px; } } /* ------------------------------------------------------------------ * * 12. Nada de esto molesta a quien pide menos movimiento * ------------------------------------------------------------------ */ @media ( prefers-reduced-motion: reduce ) { .vr-est-js [data-vr-rev] { opacity: 1 !important; transform: none !important; transition: none !important; } .vr-est *, .vr-est *::before, .vr-est *::after { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; scroll-behavior: auto !important; } }