/** * PSLEGAL — hoja de estilo del sitio. * * Orden del archivo: * 0. Variables y base * 1. Utilidades de composición * 2. Tipografía del sitio * 3. Botones * 4. Cabecera y menú * 5. Portada * 6. Bandas y encabezados de sección * 7. Tarjetas, pasos, áreas, equipo * 8. Imágenes y sus animaciones * 9. Blog, formularios, preguntas * 10. Pie de página y botón de WhatsApp * 11. Animaciones de entrada * 12. Responsive */ /* ========================================================================= * 0. Variables y base * ========================================================================= */ :root { /* Colores de marca. El azul sale del manual: #1F2D52. */ --ps-navy: #1F2D52; --ps-navy-deep: #182340; --ps-navy-soft: #3A4A7A; --ps-paper: #FFFFFF; --ps-bone: #F6F7F9; --ps-gray-700: #4A4F5A; --ps-gray-500: #767C88; --ps-gray-200: #E6E6EA; --ps-gray-100: #F2F3F5; /* * El acento cambia desde el panel (Apariencia › PSLEGAL › Marca). * --ps-accent es el color decorativo; --ps-accent-ink es la versión que * sí se puede leer sobre blanco. Son dos porque la plata del logotipo, * usada como texto, no llega al contraste mínimo. */ --ps-accent: #FF7A00; --ps-accent-ink: #B75700; --ps-accent-soft: #FFC38C; --ps-metal: linear-gradient(135deg, #FFB870 0%, #FF7A00 45%, #FFCA9E 60%, #DB6900 100%); /* * El color de los botones que tienen que llamar la atención: WhatsApp, * «Consulta ahora», «Agendar». Va aparte del acento a propósito. El acento * es decoración —filetes, iconos— y puede ser tan suave como quiera la * marca; este tiene un solo trabajo, que es que se vea. Todos estos valores * los vuelve a escribir el panel (Apariencia › PSLEGAL › Diseño): lo de aquí * es lo que se ve si el panel nunca se toca. */ --ps-cta: #FF7A00; --ps-cta-deep: #D66600; --ps-cta-soft: #FFD7B2; /* * Tinta oscura y no blanca: sobre el naranja #FF7A00, el blanco da 2,61 de * contraste —muy por debajo del mínimo legible de 4,5— y el azul marino da * 6,15. La maqueta llevaba el texto en blanco; en pantalla no se lee, así * que va en azul. Es además el valor que calcula solo el panel, de modo que * el archivo y el panel dicen lo mismo en lugar de contradecirse. */ --ps-cta-ink: #16203C; /* WhatsApp sigue al color de botón salvo que en el panel se pida su verde. */ --ps-wa: var(--ps-cta); --ps-wa-deep: var(--ps-cta-deep); --ps-wa-ink: var(--ps-cta-ink); --ps-line: 1px solid var(--ps-gray-200); --ps-ease: cubic-bezier(0.16, 1, 0.3, 1); --ps-shell: 1240px; --ps-header-h: 136px; /* La altura que acaba midiendo la cabecera. La escribe el JS; aquí solo se declara el valor de partida por si el JS no llega a ejecutarse. */ --ps-header-real: var(--ps-header-h); --ps-radius: 3px; --ps-shadow: 0 1px 2px rgba(31, 43, 79, .04), 0 8px 24px rgba(31, 43, 79, .06); --ps-shadow-lg: 0 2px 6px rgba(31, 43, 79, .06), 0 24px 60px rgba(31, 43, 79, .12); } /* Variante dorada del acento. La pone el panel en el . */ body.ps-accent-oro { --ps-accent: #A8894F; --ps-accent-ink: #8A6D34; --ps-accent-soft: #E4D5BA; --ps-metal: linear-gradient(135deg, #E4CFA5 0%, #A8894F 45%, #F0E2C4 60%, #8A6D34 100%); } * { box-sizing: border-box; } html { scroll-behavior: smooth; /* * Sin esto, un enlace a un ancla deja el título justo debajo de la cabecera * pegada, que es como no haber saltado a ninguna parte. */ scroll-padding-top: calc(var(--ps-header-real) + 16px); /* * iOS agranda por su cuenta el texto de algunos bloques al girar el * teléfono. Con esto el tamaño es el que dice la hoja de estilo, siempre. */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } @media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } *, *::before, *::after { animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; } } body { margin: 0; background: var(--ps-paper); color: var(--ps-navy); -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; overflow-x: hidden; } img, video, svg, iframe, table { max-width: 100%; } img, video { height: auto; display: block; } iframe { border: 0; } /* * Una dirección de correo larga, una URL o el nombre de una ley no se pueden * partir por sílabas: en una pantalla de 320 px empujan la página entera hacia * la derecha y aparece la barra horizontal. Aquí se les autoriza a partirse. */ :where(h1, h2, h3, h4, p, li, a, span, dd, dt, td, th, summary) { overflow-wrap: break-word; } /* * WordPress puede dejar un párrafo vacío alrededor de un shortcode que * devuelve un bloque. No se ve, pero dentro de una retícula o de un flex * cuenta como celda y descoloca lo que viene detrás. */ p:empty { display: none; } ::selection { background: var(--ps-navy); color: #fff; } /* * Medida por defecto de los iconos. Cada sitio donde se usan les da la suya, * pero sin esta línea un icono suelto se pintaría a tamaño completo: el SVG no * tiene alto ni ancho propios, solo su lienzo de coordenadas. */ .ps-ico { width: 1.25em; height: 1.25em; flex: none; } :where(a, button, summary):focus-visible { outline: 2px solid var(--ps-accent-ink); outline-offset: 3px; border-radius: 2px; } /* Salto al contenido, para teclado y lectores de pantalla. */ .ps-skip { position: absolute; left: -9999px; top: 0; z-index: 999; padding: 12px 20px; background: var(--ps-navy); color: #fff; font-size: .875rem; } .ps-skip:focus { left: 12px; top: 12px; } /* Barra de progreso de lectura. */ .ps-progress { position: fixed; inset: 0 0 auto 0; height: 2px; background: var(--ps-metal); transform: scaleX(0); transform-origin: 0 50%; z-index: 60; pointer-events: none; } /* ========================================================================= * 1. Utilidades de composición * ========================================================================= */ .ps-shell { width: 100%; max-width: var(--ps-shell); margin-inline: auto; padding-inline: clamp(20px, 5vw, 48px); } .ps-section { position: relative; padding-block: clamp(64px, 9vw, 120px); } .ps-section--tight { padding-block: clamp(44px, 6vw, 76px); } /* Bandas de color. Se alternan para que la página respire. */ .ps-band-bone { background: var(--ps-bone); } .ps-band-gray { background: var(--ps-gray-100); } .ps-band-navy { background: var(--ps-navy); color: #fff; } .ps-band-navy :where(h1, h2, h3, h4, p, li, a) { color: #fff; } .ps-band-navy .ps-eyebrow { color: var(--ps-accent-soft); } .ps-band-navy .ps-lead { color: rgba(255, 255, 255, .82); } .ps-band-navy .ps-contact__l { color: rgba(255, 255, 255, .55); } .ps-band-navy .ps-contact__v { color: rgba(255, 255, 255, .88); } .ps-band-navy .ps-contact__i { border-bottom-color: rgba(255, 255, 255, .14); } /* Filete metálico: el detalle que repite el logotipo. */ .ps-rule { height: 2px; width: 64px; background: var(--ps-metal); border: 0; margin: 0; transform-origin: 0 50%; transform: scaleX(0); transition: transform 1s var(--ps-ease); } .ps-rule.is-in { transform: scaleX(1); } .ps-rule--center { margin-inline: auto; transform-origin: 50% 50%; } .ps-rule--full { width: 100%; height: 1px; background: var(--ps-gray-200); } /* Retícula tenue de fondo. Da profundidad sin cargar la página. */ .ps-grid-bg { position: absolute; inset: 0; pointer-events: none; background-image: linear-gradient(to right, rgba(31, 43, 79, .03) 1px, transparent 1px), linear-gradient(to bottom, rgba(31, 43, 79, .03) 1px, transparent 1px); background-size: 76px 76px; mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 78%); -webkit-mask-image: radial-gradient(ellipse 80% 60% at 50% 0%, #000 20%, transparent 78%); } /* ========================================================================= * 2. Tipografía del sitio * ========================================================================= */ .ps-eyebrow { /* La rayita de color delante viene de la maqueta de septiembre de 2026. Va en el antetítulo y no como elemento aparte para que no se pueda quedar huérfana al mover un bloque. */ display: flex; align-items: center; gap: 14px; font-family: Poppins, sans-serif; font-size: .75rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--ps-accent-ink); margin: 0 0 14px; } .ps-eyebrow::before { content: ""; width: 30px; height: 2px; flex: none; background: var(--ps-accent); } .ps-sechead--center .ps-eyebrow, .has-text-align-center.ps-eyebrow { justify-content: center; } .ps-display { font-family: Lora, Georgia, serif; font-weight: 600; font-size: clamp(2.2rem, 5.2vw, 4rem); line-height: 1.12; letter-spacing: -.018em; margin: 0; color: var(--ps-navy); } .ps-h2 { font-family: Lora, Georgia, serif; font-weight: 600; font-size: clamp(1.75rem, 3.4vw, 2.75rem); line-height: 1.2; letter-spacing: -.014em; margin: 0; } .ps-h3 { font-family: Lora, Georgia, serif; font-weight: 600; font-size: clamp(1.15rem, 1.8vw, 1.4rem); line-height: 1.3; margin: 0; } .ps-lead { font-size: clamp(1rem, 1.35vw, 1.15rem); line-height: 1.75; color: var(--ps-gray-700); margin: 0; max-width: 62ch; } .ps-body { font-size: .975rem; line-height: 1.75; color: var(--ps-gray-700); margin: 0; } .ps-small { font-size: .8125rem; line-height: 1.6; color: var(--ps-gray-500); margin: 0; } /* Texto largo de las páginas interiores. */ .ps-prose :where(p, ul, ol) { color: var(--ps-gray-700); line-height: 1.8; } .ps-prose :where(h2, h3) { margin-top: 2.2em; } /* * El subrayado del texto no debe alcanzar a los botones. * * La regla de abajo pesa (0,2,1) —«.ps-prose» más «a» más el «:not()», que * también suma— y le ganaba a «.ps-btn--wa» (0,1,0). Dentro de un artículo, el * botón de WhatsApp salía subrayado y con el texto en azul marino en vez de en * el color que le toca. Se lee mal y parece un enlace roto. */ .ps-prose :where(a):not(.wp-element-button):not(.ps-btn) { color: var(--ps-navy); text-decoration: underline; text-decoration-color: var(--ps-accent-soft); text-underline-offset: 4px; transition: text-decoration-color .3s; } .ps-prose :where(a):not(.wp-element-button):not(.ps-btn):hover { text-decoration-color: var(--ps-accent-ink); } /* Y por si algún día aparece otra regla que quiera subrayarlos. */ .ps-prose .ps-btn { text-decoration: none; } /* ========================================================================= * 3. Botones * ========================================================================= */ .wp-block-button__link, .wp-element-button, .ps-btn { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 10px; overflow: hidden; isolation: isolate; font-family: Poppins, sans-serif; font-size: .875rem; font-weight: 500; letter-spacing: .02em; line-height: 1.2; padding: .95rem 1.8rem; border-radius: var(--ps-radius); border: 1px solid transparent; background: var(--ps-navy); color: #fff; cursor: pointer; text-decoration: none; transition: transform .45s var(--ps-ease), box-shadow .45s var(--ps-ease), background-color .35s, color .35s, border-color .35s; } /* El brillo metálico que cruza el botón al pasar el cursor. */ .wp-block-button__link::after, .ps-btn::after { content: ""; position: absolute; inset: 0; z-index: -1; background: linear-gradient(115deg, transparent 30%, rgba(255, 255, 255, .28) 48%, transparent 66%); transform: translateX(-120%); transition: transform .85s var(--ps-ease); } .wp-block-button__link:hover, .ps-btn:hover { background: var(--ps-navy-deep); color: #fff; transform: translateY(-2px); box-shadow: 0 10px 26px rgba(31, 43, 79, .22); } .wp-block-button__link:hover::after, .ps-btn:hover::after { transform: translateX(120%); } .wp-block-button__link:active, .ps-btn:active { transform: translateY(0); } /* Contorno: el secundario del sitio. */ .is-style-ps-ghost .wp-block-button__link, .ps-btn--ghost { background: transparent; color: var(--ps-navy); border-color: var(--ps-gray-200); box-shadow: none; } .is-style-ps-ghost .wp-block-button__link:hover, .ps-btn--ghost:hover { background: transparent; color: var(--ps-navy); border-color: var(--ps-accent); box-shadow: 0 8px 22px rgba(31, 43, 79, .1); } /* Contorno metálico, para usar sobre azul. */ .is-style-ps-metal .wp-block-button__link, .ps-btn--metal { background: transparent; border-color: var(--ps-accent); color: var(--ps-accent-ink); } .ps-band-navy .is-style-ps-metal .wp-block-button__link, .ps-band-navy .ps-btn--metal, .ps-hero--dark .ps-btn--metal { color: #fff; border-color: rgba(255, 255, 255, .45); } .is-style-ps-metal .wp-block-button__link:hover, .ps-btn--metal:hover { background: var(--ps-accent); border-color: var(--ps-accent); color: #fff; } /* * Botón claro sobre banda azul. * * Sin esto, un botón sólido sobre la banda azul es azul marino sobre azul * marino: existe, se puede pulsar, y no se ve. Aplica igual a los botones de * bloque y a los que pinta el tema. */ .ps-band-navy .wp-block-button:not(.is-style-ps-ghost):not(.is-style-ps-metal) .wp-block-button__link, .ps-band-navy .ps-btn:not(.ps-btn--metal):not(.ps-btn--ghost), .ps-hero--dark .ps-btn:not(.ps-btn--metal):not(.ps-btn--ghost), .ps-pagehead .ps-btn:not(.ps-btn--metal):not(.ps-btn--ghost) { background: #fff; color: var(--ps-navy); } .ps-band-navy .wp-block-button:not(.is-style-ps-ghost):not(.is-style-ps-metal) .wp-block-button__link:hover, .ps-band-navy .ps-btn:not(.ps-btn--metal):not(.ps-btn--ghost):hover, .ps-hero--dark .ps-btn:not(.ps-btn--metal):not(.ps-btn--ghost):hover, .ps-pagehead .ps-btn:not(.ps-btn--metal):not(.ps-btn--ghost):hover { background: var(--ps-bone); color: var(--ps-navy); } /* El contorno claro también necesita verse sobre azul. */ .ps-band-navy .ps-btn--ghost, .ps-hero--dark .ps-btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .38); } .ps-band-navy .ps-btn--ghost:hover, .ps-hero--dark .ps-btn--ghost:hover { color: #fff; border-color: #fff; background: rgba(255, 255, 255, .08); } /* ========================================================================= * Botones destacados * * La clienta pidió «darle mayor protagonismo a los botones de consulta y * WhatsApp». Hasta ahora eran azul marino: el mismo color que los títulos, que * el pie y que media página. Un botón del color de todo lo demás no es un * botón, es un párrafo con borde. * * Estos van del color que diga el panel, y ese color no se usa en ningún otro * sitio. Esa es toda la técnica: no destaca por ser dorado, destaca por ser el * único elemento dorado de la página. * ========================================================================= */ .ps-btn--cta, .ps-btn--wa, .ps-header__cta .ps-btn, .ps-header__cta .wp-block-button__link { background: var(--ps-cta); color: var(--ps-cta-ink); border-color: transparent; font-weight: 600; box-shadow: 0 6px 18px color-mix(in srgb, var(--ps-cta) 34%, transparent); } .ps-btn--cta:hover, .ps-btn--wa:hover, .ps-header__cta .ps-btn:hover, .ps-header__cta .wp-block-button__link:hover { background: var(--ps-cta-deep); color: var(--ps-cta-ink); box-shadow: 0 12px 30px color-mix(in srgb, var(--ps-cta) 46%, transparent); } /* Los de WhatsApp pueden ir en su verde, si se marca en el panel. */ .ps-btn--wa { background: var(--ps-wa); color: var(--ps-wa-ink); } .ps-btn--wa:hover { background: var(--ps-wa-deep); color: var(--ps-wa-ink); } .ps-btn--wa .ps-wa-ico { width: 18px; height: 18px; flex: none; } /* WhatsApp en contorno. Dos clases (0,2,0) porque .ps-btn--wa se declara más abajo que .ps-btn--ghost y sin esto pintaba el fondo de color igualmente. */ .ps-btn--wa.ps-btn--ghost, .ps-btn--wa.ps-btn--ghost:hover { background: transparent; border-color: currentColor; } .ps-btn--wa.ps-btn--ghost { color: var(--ps-navy); } .ps-btn--wa.ps-btn--ghost:hover { color: var(--ps-cta); } .ps-hero--marca .ps-btn--wa.ps-btn--ghost { color: #fff; border-color: rgba(255, 255, 255, .5); } .ps-hero--marca .ps-btn--wa.ps-btn--ghost:hover { color: var(--ps-cta); border-color: var(--ps-cta); } /* * Sobre la banda azul y sobre el héroe oscuro, la regla general convierte los * botones sólidos en blancos para que no desaparezcan. Los destacados no * necesitan ese rescate: su color ya contrasta con el azul, y perderlo era * justamente lo que los volvía invisibles como llamada a la acción. */ .ps-band-navy .ps-btn--cta, .ps-band-navy .ps-btn--wa, .ps-hero--dark .ps-btn--cta, .ps-hero--dark .ps-btn--wa, .ps-pagehead .ps-btn--cta, .ps-pagehead .ps-btn--wa { background: var(--ps-cta); color: var(--ps-cta-ink); } .ps-band-navy .ps-btn--wa, .ps-hero--dark .ps-btn--wa, .ps-pagehead .ps-btn--wa { background: var(--ps-wa); color: var(--ps-wa-ink); } .ps-band-navy .ps-btn--cta:hover, .ps-hero--dark .ps-btn--cta:hover, .ps-pagehead .ps-btn--cta:hover { background: var(--ps-cta-deep); color: var(--ps-cta-ink); } .ps-band-navy .ps-btn--wa:hover, .ps-hero--dark .ps-btn--wa:hover, .ps-pagehead .ps-btn--wa:hover { background: var(--ps-wa-deep); color: var(--ps-wa-ink); } /* Navegadores viejos sin color-mix: sombra fija, que se pierde poco. */ @supports not (color: color-mix(in srgb, red 50%, blue)) { .ps-btn--cta, .ps-btn--wa { box-shadow: 0 6px 18px rgba(31, 43, 79, .22); } } .wp-block-buttons { gap: 12px; } /* * Fila de botones. En pantalla ancha van uno junto a otro y centrados; en un * teléfono pasan a ocupar todo el ancho, cada uno en su línea. Antes esto iba * escrito a mano en el estilo de cada patrón, y por eso en el móvil salían de * anchos distintos: parecía que el segundo botón valía menos que el primero. */ .ps-btnrow { display: flex; gap: 12px; justify-content: center; flex-wrap: wrap; margin-top: 2.2rem; } .ps-btnrow > * { flex: 0 1 auto; } /* Botón grande: para la página que tiene un solo botón y nada más que decidir. */ .ps-btn--grande { padding: 18px 34px; font-size: 1.02rem; } .ps-btn--grande .ps-wa-ico { width: 21px; height: 21px; } /* ========================================================================= * 4. Cabecera y menú * ========================================================================= */ .ps-header { position: sticky; top: 0; z-index: 50; background: rgba(255, 255, 255, .88); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid transparent; transition: border-color .4s, box-shadow .4s, background-color .4s; } .ps-header.is-stuck { border-bottom-color: var(--ps-gray-200); box-shadow: 0 6px 24px rgba(31, 43, 79, .06); } .ps-header__in { display: flex; align-items: center; gap: clamp(16px, 3vw, 40px); min-height: var(--ps-header-h); padding-block: 14px; } .ps-header.is-stuck .ps-header__in { min-height: 96px; } /* Marca */ .ps-logo { display: inline-flex; align-items: center; gap: 10px; flex: none; font-family: Lora, Georgia, serif; font-size: 1.35rem; font-weight: 600; letter-spacing: .04em; color: var(--ps-navy); text-decoration: none; line-height: 1; } .ps-logo span { background: var(--ps-metal); -webkit-background-clip: text; background-clip: text; color: transparent; } .ps-logo-img { display: block; width: auto; /* Más grande desde septiembre de 2026: la clienta lo pidió, y tiene razón —el logotipo es la única marca que hay en la cabecera. */ height: clamp(74px, 7.4vw, 104px); max-height: 112px; transition: height .4s var(--ps-ease); } .ps-header.is-stuck .ps-logo-img { height: clamp(58px, 5.8vw, 76px); } /* --- Lupa de búsqueda de la cabecera --- */ .ps-busca { position: relative; display: flex; align-items: center; } .ps-busca__b { display: grid; place-items: center; width: 42px; height: 42px; border: 0; background: transparent; color: inherit; cursor: pointer; border-radius: 50%; transition: background .3s, color .3s; } .ps-busca__b:hover { background: rgba(31, 45, 82, .07); color: var(--ps-cta); } .ps-busca__b svg { width: 21px; height: 21px; stroke: currentColor; fill: none; stroke-width: 1.7; } .ps-busca__x { display: none; } .ps-busca.is-open .ps-busca__ico { display: none; } .ps-busca.is-open .ps-busca__x { display: block; } .ps-busca__f { position: absolute; top: calc(100% + 12px); right: 0; display: none; align-items: center; gap: 6px; background: var(--ps-paper); border: 1px solid var(--ps-gray-200); border-radius: var(--ps-radius); box-shadow: var(--ps-shadow-lg); padding: 8px 10px; z-index: 30; } .ps-busca.is-open .ps-busca__f { display: flex; } .ps-busca__f input { width: min(280px, 52vw); border: 0; outline: 0; font-family: Poppins, sans-serif; font-size: .92rem; color: var(--ps-navy); background: transparent; padding: 6px 4px; } .ps-busca__f button { border: 0; background: var(--ps-cta); color: var(--ps-cta-ink); width: 34px; height: 34px; border-radius: var(--ps-radius); display: grid; place-items: center; cursor: pointer; flex: none; } .ps-busca__f button svg { width: 18px; height: 18px; stroke: currentColor; fill: none; stroke-width: 1.8; } /* Texto solo para lectores de pantalla. */ .ps-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } /* Navegación */ .ps-nav { margin-left: auto; } .ps-nav .wp-block-navigation__container, .ps-nav ul { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); list-style: none; margin: 0; padding: 0; } /* * El color de los enlaces del menú necesita más peso del que parece. * * WordPress trae esta regla en la hoja del bloque de navegación: * * .wp-block-navigation .wp-block-navigation-item__content.wp-block-navigation-item__content { color: inherit } * * La clase va repetida a propósito: así gana en especificidad a casi cualquier * cosa que escriba un tema, sin importar en qué orden se carguen las hojas. Por * eso el selector de aquí abajo lleva `.ps-header` delante — para pesar más—, y * por eso en el móvil el color va marcado como importante: allí el panel es * azul marino, y heredar el color del cuerpo dejaba los seis enlaces en azul * marino sobre azul marino. Estaban, pero no se veían. */ .ps-nav a, .ps-nav .wp-block-navigation-item__content, .ps-header .ps-nav a.wp-block-navigation-item__content { position: relative; font-family: Poppins, sans-serif; font-size: .9rem; font-weight: 400; color: var(--ps-navy); text-decoration: none; padding-block: 6px; transition: color .3s; } /* Subrayado que crece desde la izquierda. */ .ps-nav a::after, .ps-nav .wp-block-navigation-item__content::after { content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1.5px; background: var(--ps-metal); transform: scaleX(0); transform-origin: 0 50%; transition: transform .45s var(--ps-ease); } .ps-nav a:hover::after, .ps-nav li.current-menu-item > a::after, .ps-nav .wp-block-navigation-item__content:hover::after { transform: scaleX(1); } .ps-header__cta { flex: none; margin-left: 4px; } .ps-header__cta .wp-block-button__link { padding: .72rem 1.3rem; font-size: .82rem; } /* Botón hamburguesa */ .ps-burger { display: none; flex: none; width: 44px; height: 44px; margin-left: auto; padding: 0; background: transparent; border: 1px solid var(--ps-gray-200); border-radius: var(--ps-radius); cursor: pointer; position: relative; } .ps-burger span { position: absolute; left: 12px; width: 20px; height: 1.5px; background: var(--ps-navy); transition: transform .4s var(--ps-ease), opacity .25s; } .ps-burger span:nth-child(1) { top: 16px; } .ps-burger span:nth-child(2) { top: 21px; } .ps-burger span:nth-child(3) { top: 26px; } .ps-burger.is-open span:nth-child(1) { transform: translateY(5px) rotate(45deg); } .ps-burger.is-open span:nth-child(2) { opacity: 0; } .ps-burger.is-open span:nth-child(3) { transform: translateY(-5px) rotate(-45deg); } /* --- Accesos rápidos de la cabecera en móvil --- El botón «Consulta ahora» no cabe junto al logotipo en una pantalla de teléfono, pero esconder el contacto detrás de la hamburguesa es perder al visitante justo cuando quería escribir. Estos iconos ocupan lo que un botón y dejan el WhatsApp y el teléfono a un toque. */ .ps-header__quick { display: none; } .ps-quick { display: grid; place-items: center; width: 44px; height: 44px; flex: none; border: 1px solid var(--ps-gray-200); border-radius: var(--ps-radius); color: var(--ps-navy); transition: background-color .3s, border-color .3s, color .3s; } .ps-quick svg { width: 21px; height: 21px; } .ps-quick:hover { border-color: var(--ps-accent); } /* La palabra junto al icono. Se enciende en el bloque de móvil. */ .ps-quick__txt { display: none; } .ps-quick--wa { background: var(--ps-wa); border-color: var(--ps-wa); color: var(--ps-wa-ink); } .ps-quick--wa:hover { background: var(--ps-wa-deep); border-color: var(--ps-wa-deep); color: var(--ps-wa-ink); } /* --- El pie del menú desplegado --- Va dentro del panel de navegación, debajo de los enlaces: teléfono, correo, horario y redes. El JS lo mueve dentro de