.elementor-kit-6{--e-global-color-primary:#2F6790;--e-global-color-secondary:#15425B;--e-global-color-text:#0B1A24;--e-global-color-accent:#80C2D6;--e-global-color-pmarena:#F4F1EB;--e-global-color-pmniebla:#D7DCD6;--e-global-color-pmmarclaro:#397CA5;--e-global-color-pmblanco:#FFFFFF;--e-global-color-pmgris:#51606B;--e-global-typography-primary-font-family:"DM Sans";--e-global-typography-primary-font-size:clamp(2.25rem, 1.4rem + 3.6vw, 4.75rem);--e-global-typography-primary-font-weight:500;--e-global-typography-primary-line-height:1.02em;--e-global-typography-primary-letter-spacing:-0.035em;--e-global-typography-secondary-font-family:"DM Sans";--e-global-typography-secondary-font-size:0.8125rem;--e-global-typography-secondary-font-weight:500;--e-global-typography-secondary-text-transform:uppercase;--e-global-typography-secondary-line-height:1.3em;--e-global-typography-secondary-letter-spacing:0.14em;--e-global-typography-text-font-family:"DM Sans";--e-global-typography-text-font-size:clamp(1rem, .96rem + .2vw, 1.125rem);--e-global-typography-text-font-weight:400;--e-global-typography-text-line-height:1.6em;--e-global-typography-accent-font-family:"DM Sans";--e-global-typography-accent-font-size:1rem;--e-global-typography-accent-font-weight:500;--e-global-typography-accent-line-height:1.2em;--e-global-typography-accent-letter-spacing:-0.005em;--e-global-typography-pmhero-font-family:"DM Sans";--e-global-typography-pmhero-font-size:clamp(3.25rem, 1.6rem + 6.4vw, 8rem);--e-global-typography-pmhero-font-weight:500;--e-global-typography-pmhero-line-height:0.95em;--e-global-typography-pmhero-letter-spacing:-0.045em;--e-global-typography-pmh3-font-family:"DM Sans";--e-global-typography-pmh3-font-size:clamp(1.375rem, 1.1rem + 1vw, 2rem);--e-global-typography-pmh3-font-weight:500;--e-global-typography-pmh3-line-height:1.1em;--e-global-typography-pmh3-letter-spacing:-0.02em;--e-global-typography-pmcifra-font-family:"DM Sans";--e-global-typography-pmcifra-font-size:clamp(3rem, 2rem + 4vw, 6rem);--e-global-typography-pmcifra-font-weight:300;--e-global-typography-pmcifra-line-height:1em;--e-global-typography-pmcifra-letter-spacing:-0.05em;--e-global-typography-pmserif-font-family:"Instrument Serif";--e-global-typography-pmserif-font-size:1em;--e-global-typography-pmserif-font-weight:400;--e-global-typography-pmserif-font-style:italic;--e-global-typography-pmserif-line-height:1em;--e-global-typography-pmserif-letter-spacing:-0.01em;--e-global-typography-pmentradilla-font-family:"DM Sans";--e-global-typography-pmentradilla-font-size:clamp(1.125rem, 1rem + .6vw, 1.5rem);--e-global-typography-pmentradilla-font-weight:400;--e-global-typography-pmentradilla-line-height:1.45em;--e-global-typography-pmentradilla-letter-spacing:-0.01em;background-color:#F4F1EB;color:#0B1A24;font-family:"DM Sans", system-ui, -apple-system, Segoe UI, sans-serif;}.elementor-kit-6 button,.elementor-kit-6 input[type="button"],.elementor-kit-6 input[type="submit"],.elementor-kit-6 .elementor-button{background-color:#0B1A24;font-family:"DM Sans", system-ui, -apple-system, Segoe UI, sans-serif;font-size:1rem;font-weight:500;color:#FFFFFF;border-radius:999px 999px 999px 999px;padding:16px 28px 16px 28px;}.elementor-kit-6 button:hover,.elementor-kit-6 button:focus,.elementor-kit-6 input[type="button"]:hover,.elementor-kit-6 input[type="button"]:focus,.elementor-kit-6 input[type="submit"]:hover,.elementor-kit-6 input[type="submit"]:focus,.elementor-kit-6 .elementor-button:hover,.elementor-kit-6 .elementor-button:focus{background-color:#80C2D6;color:#0B1A24;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-kit-6 a{color:#2F6790;}.elementor-kit-6 a:hover{color:#15425B;}.elementor-kit-6 h1{font-family:"DM Sans", system-ui, -apple-system, Segoe UI, sans-serif;font-weight:500;}.elementor-kit-6 input:not([type="button"]):not([type="submit"]),.elementor-kit-6 textarea,.elementor-kit-6 .elementor-field-textual{border-radius:14px 14px 14px 14px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1440px;}.e-con{--container-max-width:1440px;--container-default-padding-top:0px;--container-default-padding-right:0px;--container-default-padding-bottom:0px;--container-default-padding-left:0px;}.elementor-widget:not(:last-child){--kit-widget-spacing:0px;}.elementor-element{--widgets-spacing:0px 0px;--widgets-spacing-row:0px;--widgets-spacing-column:0px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:1024px;}.e-con{--container-max-width:1024px;}}@media(max-width:767px){.elementor-section.elementor-section-boxed > .elementor-container{max-width:767px;}.e-con{--container-max-width:767px;}}
/* Start custom CSS *//* ==========================================================================
Publicidad Mediterránea — CSS del kit de Elementor
Fuente versionada de Elementor > Ajustes del sitio > CSS personalizado.
Se edita aquí y se pega allí entero; nunca al revés.
Colores y tipografías: se definen como Globales del kit (no aquí) para que
los widgets los usen desde el panel. Este archivo solo los referencia con
las variables que genera Elementor (--e-global-color-*) y añade las que el
panel no tiene (movimiento, curvas, capas).
Clases que se ponen en Avanzado > Clases CSS de cada widget o contenedor:
pm-reveal fundido + subida corta al entrar en pantalla
pm-split titular que se revela línea a línea (separar líneas con
)
pm-zoom imagen con zoom leve al pasar el ratón (en la tarjeta)
pm-link subrayado animado en enlaces de texto
pm-card tarjeta de portfolio (zoom de imagen + velo + título)
pm-scrub escala con el scroll (solo navegadores con scroll-timeline)
pm-video tarjeta de vídeo en bucle; el JS le añade el botón de pausa
(pm-video--alto: formato vertical 4:5 en móvil)
pm-sticky columna que se queda fija mientras pasa la de al lado
pm-bento tarjeta de servicio enlazada (pm-fondo: su imagen;
pm-flecha: el icono que avanza al pasar el ratón)
pm-clientes lista de nombres de cliente en línea
En titulares, la palabra entre sale en el serif de acento.
Regla de la agencia: solo transform y opacity, nada de rebotes ni
parpadeos, y todo se anula con prefers-reduced-motion.
========================================================================== */
:root {
--pm-ease: cubic-bezier(.22, 1, .36, 1); /* salida suave, tipo Apple */
--pm-dur: .9s;
--pm-dur-corta: .45s;
--pm-desplazamiento: 28px;
--pm-tinta: var(--e-global-color-text, #0B1A24);
--pm-acento: var(--e-global-color-accent, #80C2D6);
}
/* ---------- Cursor: el barco de papel de la marca ----------------------- */
/* Punto activo en la proa (2,9). Enlaces y botones mantienen la mano. */
@media (pointer: fine) {
body {
cursor: url("/wp-content/themes/pm-child/assets/img/cursor-barco.svg") 2 9, auto;
}
a, button, [role="button"], .elementor-button, label, summary,
input[type="submit"], select {
cursor: pointer;
}
input, textarea {
cursor: text;
}
}
/* ---------- Revelado al entrar en pantalla ------------------------------ */
/* Solo con .pm-js (lo pone el script del tema hijo): sin JS todo es visible. */
.pm-js .pm-reveal {
opacity: 0;
transform: translate3d(0, var(--pm-desplazamiento), 0);
transition: opacity var(--pm-dur) var(--pm-ease), transform var(--pm-dur) var(--pm-ease);
transition-delay: var(--pm-retardo, 0s);
}
.pm-js .pm-reveal.is-inview {
opacity: 1;
transform: none;
}
/* Titulares línea a línea */
.pm-split .pm-line {
display: block;
overflow: hidden;
padding-bottom: .08em; /* que no se corten los descendentes */
}
.pm-split .pm-line > span {
display: inline-block;
transform: translate3d(0, 105%, 0);
transition: transform 1.1s var(--pm-ease);
transition-delay: calc(var(--i, 0) * 90ms);
}
.pm-split.is-inview .pm-line > span {
transform: none;
}
/* ---------- Hover ------------------------------------------------------- */
.pm-zoom {
overflow: hidden;
}
.pm-zoom img {
transition: transform 1.2s var(--pm-ease);
}
.pm-zoom:hover img {
transform: scale(1.04);
}
/* Subrayado que crece desde la izquierda (scaleX, no background-size) */
.pm-link a,
a.pm-link {
position: relative;
text-decoration: none;
}
.pm-link a::after,
a.pm-link::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: -2px;
height: 1px;
background: currentColor;
transform: scaleX(0);
transform-origin: right;
transition: transform var(--pm-dur-corta) var(--pm-ease);
}
.pm-link a:hover::after,
a.pm-link:hover::after,
.pm-link a:focus-visible::after {
transform: scaleX(1);
transform-origin: left;
}
/* Botones: en una sola línea, y la flecha avanza un poco */
.elementor-button { white-space: nowrap; }
.elementor-button .elementor-button-icon {
transition: transform var(--pm-dur-corta) var(--pm-ease);
}
.elementor-button:hover .elementor-button-icon {
transform: translateX(4px);
}
/* Tarjeta de portfolio (Loop Item) */
.pm-card {
position: relative;
overflow: hidden;
isolation: isolate;
}
.pm-card img {
transition: transform 1.2s var(--pm-ease);
}
.pm-card::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 45%, rgba(11, 26, 36, .75));
opacity: .6;
transition: opacity var(--pm-dur-corta) var(--pm-ease);
pointer-events: none;
z-index: 1;
}
.pm-card .pm-card__meta {
position: relative;
z-index: 2;
transform: translate3d(0, 10px, 0);
opacity: .85;
transition: transform var(--pm-dur-corta) var(--pm-ease), opacity var(--pm-dur-corta) var(--pm-ease);
}
.pm-card:hover img { transform: scale(1.05); }
.pm-card:hover::after { opacity: 1; }
.pm-card:hover .pm-card__meta { transform: none; opacity: 1; }
/* ---------- Scroll ligado (estilo Apple) -------------------------------- */
/* Mejora progresiva: donde no hay scroll-timeline la imagen queda estática. */
@supports (animation-timeline: view()) {
.pm-scrub {
animation: pm-scrub linear both;
animation-timeline: view();
animation-range: entry 0% cover 45%;
}
@keyframes pm-scrub {
from { transform: scale(.9); }
to { transform: scale(1); }
}
}
/* ---------- Cabecera ---------------------------------------------------- */
/* La cabecera del Theme Builder lleva la clase pm-header (y sticky nativo).
El fondo vidrio es una capa fija que solo cambia de opacidad. */
.pm-header {
position: relative;
isolation: isolate;
}
.pm-header::before {
content: "";
position: absolute;
inset: 0;
z-index: -1;
background-color: rgba(244, 241, 235, .78);
border-bottom: 1px solid rgba(11, 26, 36, .08);
-webkit-backdrop-filter: saturate(180%) blur(18px);
backdrop-filter: saturate(180%) blur(18px);
opacity: 0;
transition: opacity var(--pm-dur-corta) var(--pm-ease);
pointer-events: none;
}
.pm-scrolled .pm-header::before {
opacity: 1;
}
/* Menú desplegable con sombra suave */
.pm-header .elementor-nav-menu--dropdown {
box-shadow: 0 24px 48px -24px rgba(11, 26, 36, .28);
overflow: hidden;
}
/* ---------- Pie ---------------------------------------------------------- */
.pm-sedes p { margin-bottom: 1.1em; }
.pm-pie .elementor-icon-list-item a { display: inline-block; }
/* ---------- Transiciones entre páginas ---------------------------------- */
/* Fundido nativo del navegador al cambiar de página (mejora progresiva). */
@media (prefers-reduced-motion: no-preference) {
@view-transition {
navigation: auto;
}
}
/* ---------- Acento serif ------------------------------------------------ */
/* En cualquier titular, la palabra entre sale en Instrument Serif. */
.elementor-heading-title em,
.elementor-widget-text-editor em.pm-serif {
font-family: "Instrument Serif", Georgia, serif;
font-style: italic;
font-weight: 400;
letter-spacing: -0.01em;
}
/* ---------- Vídeo en tarjeta -------------------------------------------- */
.pm-video {
position: relative;
overflow: hidden;
border-radius: 28px;
isolation: isolate;
}
.pm-video video {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
}
@media (max-width: 767px) {
.pm-video { border-radius: 20px; }
.pm-video.pm-video--alto .elementor-wrapper { aspect-ratio: 4 / 5; }
}
.pm-pausa {
position: absolute;
right: 20px;
bottom: 20px;
z-index: 2;
display: grid;
place-items: center;
width: 44px;
height: 44px;
padding: 0;
border: 0;
border-radius: 50%;
color: #fff;
background: rgba(11, 26, 36, .5);
-webkit-backdrop-filter: blur(8px);
backdrop-filter: blur(8px);
transition: transform var(--pm-dur-corta) var(--pm-ease);
}
.pm-pausa:hover { transform: scale(1.06); }
.pm-pausa svg { width: 14px; height: 14px; fill: currentColor; }
/* ---------- Columna pegajosa -------------------------------------------- */
@media (min-width: 1025px) {
.pm-sticky {
position: sticky;
top: 120px;
align-self: flex-start;
}
}
/* ---------- Tarjetas de servicio (bento) -------------------------------- */
.pm-bento {
position: relative;
overflow: hidden;
isolation: isolate;
transition: transform var(--pm-dur-corta) var(--pm-ease);
}
.pm-bento:hover { transform: translate3d(0, -4px, 0); }
.pm-bento .elementor-icon,
.pm-bento .pm-flecha {
transition: transform var(--pm-dur-corta) var(--pm-ease);
}
.pm-bento:hover .pm-flecha { transform: translate3d(4px, -4px, 0); }
.pm-bento:focus-visible { outline-offset: 4px; }
/* Imagen de fondo de una tarjeta, con zoom leve al pasar el ratón */
.pm-bento .pm-fondo {
position: absolute;
inset: 0;
z-index: -1;
}
.pm-bento .pm-fondo img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 1.2s var(--pm-ease);
}
.pm-bento:hover .pm-fondo img { transform: scale(1.04); }
/* Bento: una tarjeta a dos columnas y otra a lo ancho */
@media (min-width: 768px) {
.pm-bento--completo { grid-column: 1 / -1; }
}
@media (min-width: 1025px) {
.pm-bento--ancho { grid-column: span 2; }
.pm-bento--completo { min-height: 440px; }
}
/* ---------- Trabajo: retícula asimétrica -------------------------------- */
@media (min-width: 768px) {
.pm-trabajos > .e-con:nth-child(even) { margin-top: 96px; }
}
/* El mismo desfase en el archivo de proyectos (Loop Grid) */
@media (min-width: 768px) {
.pm-trabajos-loop .elementor-loop-container > .e-loop-item:nth-child(even) { margin-top: 96px; }
}
/* ---------- Filtro por área (píldoras) ---------------------------------- */
.pm-filtro .e-filter {
gap: 8px;
}
.pm-filtro .e-filter-item {
padding: 10px 18px;
border: 1px solid rgba(11, 26, 36, .2);
border-radius: 999px;
color: var(--e-global-color-text);
background: transparent;
}
.pm-filtro .e-filter-item:hover {
border-color: var(--e-global-color-text);
}
.pm-filtro .e-filter-item[aria-pressed="true"] {
color: var(--e-global-color-pmarena, #F4F1EB);
background: var(--e-global-color-text);
border-color: var(--e-global-color-text);
}
/* ---------- Campos opcionales del caso ---------------------------------- */
/* Un bloque .pm-opcional sin ningún .pm-dato con contenido no se muestra. */
.pm-opcional:not(:has(.pm-dato)) { display: none; }
/* ---------- Lista de clientes ------------------------------------------- */
.pm-clientes .elementor-icon-list-items {
gap: .25em 1.4em;
}
.pm-clientes .elementor-icon-list-item::after { display: none; }
/* ---------- Accesibilidad ----------------------------------------------- */
:focus-visible {
outline: 2px solid var(--pm-acento);
outline-offset: 3px;
}
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: .01ms !important;
animation-iteration-count: 1 !important;
transition-duration: .01ms !important;
scroll-behavior: auto !important;
}
.pm-js .pm-reveal,
.pm-split .pm-line > span {
opacity: 1;
transform: none;
}
}/* End custom CSS */