crece para empujar el footer al fondo. */ body:not(:has(> .wp-site-blocks)) { display: flex; flex-direction: column; min-height: 100vh; min-height: 100dvh; } body:not(:has(> .wp-site-blocks)) > main { flex: 1 0 auto; } /* La cabecera fija tapa la franja superior del viewport. Se reserva ese alto al hacer scroll (anclas y el scrollIntoView del catálogo dinámico) para que el inicio del contenido —p. ej. el botón "Volver" de las fichas de producto— no quede oculto bajo el header. */ html { scroll-padding-top: 6rem; } .plastyverg-catalogo { scroll-margin-top: 6rem; } .plastyverg-header { position: sticky; top: 0; z-index: 100; background-color: color-mix(in srgb, var(--wp--preset--color--base) 86%, transparent); backdrop-filter: saturate(160%) blur(12px); -webkit-backdrop-filter: saturate(160%) blur(12px); box-shadow: 0 1px 8px rgba(14, 27, 44, 0.08); } /* Navegadores sin soporte de backdrop-filter: fondo sólido para que el contenido detrás no se transparente sin el desenfoque que lo disimula. */ @supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .plastyverg-header { background-color: var(--wp--preset--color--base); } } /* Menú móvil abierto: el overlay usa position:fixed relativo al viewport, pero el backdrop-filter del header lo convierte en bloque contenedor de los fixed, atrapando el overlay dentro de la franja del header (se veía oculto tras el resto de la página). Mientras el menú está abierto se quita el backdrop-filter para que el overlay ocupe toda la pantalla. */ .plastyverg-header:has(.wp-block-navigation__responsive-container.is-menu-open) { backdrop-filter: none; -webkit-backdrop-filter: none; } /* En páginas FSE el header va dentro de

, cuyo padre es alto; en plantillas clásicas el grupo .plastyverg-header es hijo directo del body. Se fija sticky en ambos para que el menú siempre se vea. */ header.wp-block-template-part { position: sticky; top: 0; z-index: 100; } /* Tratamiento moderno del menú de escritorio: subrayado animado en vez de la píldora de fondo sólida. El estado de hover del overlay móvil (más abajo) no se ve afectado: usa un selector más específico. */ .plastyverg-nav-principal .wp-block-navigation-item__content { position: relative; padding: 0.5rem 1rem; font-size: 1rem; font-weight: 500; border-radius: 4px; transition: color 0.2s ease; } .plastyverg-nav-principal .wp-block-navigation-item__content::after { content: ""; position: absolute; left: 1rem; right: calc(100% - 1rem); bottom: 0.15rem; height: 2px; border-radius: 1px; background-color: var(--wp--preset--color--primary); transition: right 0.25s var(--pv-ease); } .plastyverg-nav-principal .wp-block-navigation-item__content:hover, .plastyverg-nav-principal .wp-block-navigation-item__content:focus-visible { color: var(--wp--preset--color--primary-dark); background-color: transparent; } .plastyverg-nav-principal .wp-block-navigation-item__content:hover::after, .plastyverg-nav-principal .wp-block-navigation-item__content:focus-visible::after { right: 1rem; } /* Menú móvil (overlay): sin colores propios, WordPress lo abría como una pantalla blanca vacía con los enlaces pegados al borde — se veía "en blanco". Los colores de marca (teal + texto blanco) se fijan vía los atributos overlayBackgroundColor/overlayTextColor del bloque de navegación (que generan clases utilitarias con !important). Estas reglas replican la especificidad de la regla por defecto de WordPress (0,5,0) y la superan (0,6,0) como respaldo determinista, por si el mapeo de atributos cambiara. */ .wp-block-navigation.plastyverg-nav-principal:not(.has-background) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) { background-color: var(--wp--preset--color--primary); padding: 5rem 1.5rem 2rem; } .wp-block-navigation.plastyverg-nav-principal:not(.has-text-color) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay), .wp-block-navigation.plastyverg-nav-principal:not(.has-text-color) .wp-block-navigation__responsive-container.is-menu-open:not(.disable-default-overlay) a, .wp-block-navigation.plastyverg-nav-principal .wp-block-navigation__responsive-container-close { color: var(--wp--preset--color--base); } .plastyverg-nav-principal .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { gap: 0.5rem; align-items: center; justify-content: center; } .plastyverg-nav-principal .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-size: 1.25rem; padding: 0.75rem 1.5rem; } /* El subrayado animado es un tratamiento de escritorio; en el overlay a pantalla completa (fondo teal) no aporta nada y podría quedar invisible. */ .plastyverg-nav-principal .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content::after { display: none; } .plastyverg-nav-principal .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content:hover { background-color: color-mix(in srgb, var(--wp--preset--color--base) 18%, transparent); color: var(--wp--preset--color--base); } /* El menú del footer usa el ancho amplio (igual que las columnas de contacto) para que sus opciones quepan en una sola fila en escritorio; si no caben en pantallas más chicas, envuelven en varias líneas (sin barra de scroll). */ .wp-footer-nav { max-width: var(--wp--style--global--wide-size); } .wp-footer-nav .wp-block-navigation__container { flex-wrap: wrap; overflow-x: visible; justify-content: center; gap: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40); } .wp-footer-nav .wp-block-navigation-item { font-size: var(--wp--preset--font-size--medium); white-space: nowrap; } .plastyverg-equipo-imagen { aspect-ratio: 3 / 2; overflow: hidden; border-radius: 4px; } .plastyverg-equipo-imagen img { width: 100%; height: 100%; object-fit: cover; } .plastyverg-producto-imagen { aspect-ratio: 3 / 2; overflow: hidden; border-radius: 4px; } .plastyverg-producto-imagen img { width: 100%; height: 100%; object-fit: cover; } /* Página "La Empresa": tiene mucho contenido, así que se le da un ancho de contenido mayor (que los 720px por defecto) sobrescribiendo la variable de WordPress solo en esta página. Las líneas quedan más anchas y la página menos alta. Las secciones alignwide/alignfull no se ven afectadas. */ .page-la-empresa { --wp--style--global--content-size: 1000px; } /* Página "La Empresa": títulos ~2px más chicos que el resto del sitio. */ .page-la-empresa h2 { font-size: clamp(1.5rem, 3.5vw, 2rem); } .page-la-empresa h3 { font-size: 1rem; } /* Botón flotante "volver arriba" para páginas con mucho texto. El botón se crea vía assets/js/volver-arriba.js y aparece al desplazarse hacia abajo. */ .plastyverg-volver-arriba { position: fixed; bottom: 1.5rem; right: 1.5rem; width: 44px; height: 44px; border: none; border-radius: 50%; background-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--base); font-size: 1.25rem; line-height: 1; cursor: pointer; box-shadow: 0 2px 10px rgba(14, 27, 44, 0.25); opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity 0.2s ease, transform 0.2s ease, visibility 0.2s ease, background-color 0.2s ease; /* Debajo del contexto de apilamiento de la cabecera fija (z-index:100), para que el overlay del menú móvil, al abrirse a pantalla completa, tape este botón. Espacialmente nunca se solapan (cabecera arriba, botón abajo-der.). */ z-index: 90; } .plastyverg-volver-arriba.is-visible { opacity: 1; visibility: visible; transform: none; } .plastyverg-volver-arriba:hover, .plastyverg-volver-arriba:focus-visible { background-color: var(--wp--preset--color--primary-dark); } .plastyverg-volver-arriba:focus-visible { outline: 2px solid var(--wp--preset--color--contrast); outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .plastyverg-volver-arriba { transition: opacity 0.2s ease, visibility 0.2s ease; transform: none; } } /* ========================================================================== SISTEMA DE DISEÑO MODERNO Componentes reutilizables para las plantillas y patterns (Tarea 3+), adaptados del mockup aprobado (scratchpad/tema-moderno.html). ========================================================================== */ /* Botones: la píldora base (color, radio 999px, padding, peso 600) ya la fija theme.json vía styles.elements.button. Aquí se agrega el estado hover con lift + sombra, y las variantes contorno/fantasma-sobre-oscuro. */ .wp-element-button, .wp-block-button__link { transition: transform 0.25s var(--pv-ease), background-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease; } .wp-element-button:hover, .wp-block-button__link:hover { transform: translateY(-2px); box-shadow: 0 10px 24px rgba(19, 150, 145, 0.28); } /* Variante contorno (usar el estilo nativo "Contorno" del bloque Botón, o la clase utilitaria .pv-btn-outline en HTML/patterns). */ .wp-block-button.is-style-outline .wp-block-button__link, .pv-btn-outline { background-color: transparent; color: var(--wp--preset--color--ink); border: 1px solid var(--wp--preset--color--border); } .wp-block-button.is-style-outline .wp-block-button__link:hover, .pv-btn-outline:hover { background-color: transparent; border-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--primary-dark); box-shadow: none; } /* Variante fantasma sobre fondo oscuro (hero, banda CTA, footer). */ .pv-btn-ghost, .wp-block-button.pv-btn-ghost .wp-block-button__link { background-color: transparent; color: var(--wp--preset--color--base); border: 1px solid rgba(255, 255, 255, 0.35); } .pv-btn-ghost:hover, .wp-block-button.pv-btn-ghost .wp-block-button__link:hover { background-color: rgba(255, 255, 255, 0.1); color: var(--wp--preset--color--base); box-shadow: none; } /* Ritmo de secciones: franjas alternadas blanco / superficie / tinta oscura. */ .pv-section { padding: 88px 0; } .pv-section--soft { background-color: var(--wp--preset--color--surface); } .pv-section--ink { background-color: var(--wp--preset--color--ink); color: var(--wp--preset--color--base); } .pv-section--ink h1, .pv-section--ink h2, .pv-section--ink h3, .pv-section--ink h4 { color: var(--wp--preset--color--base); } .pv-section--ink p { color: #B8C4D2; } @media (max-width: 600px) { .pv-section { padding: 56px 0; } } /* Etiqueta destacada (encima de un título de sección). */ .pv-eyebrow { display: inline-block; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--primary-dark); } .pv-section--ink .pv-eyebrow { color: #7FE3DD; } /* Bloque de encabezado de sección (eyebrow + h2 + texto de apoyo). */ .pv-head { max-width: 56ch; } .pv-head h2 { margin-top: 12px; } .pv-head p { color: var(--pv-muted); margin-top: 14px; font-size: 1.08rem; } .pv-section--ink .pv-head p { color: #B8C4D2; } /* Tarjeta con imagen recortada, borde suave y lift al pasar el cursor. */ /* Grilla del catálogo con número de columnas FIJO por breakpoint (2 → 3 → 4), en vez de auto-fill, para que TODAS las vistas (grilla de categorías y listados de productos) muestren tarjetas del mismo tamaño sin depender del número de ítems. */ .pv-catalogo-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--wp--preset--spacing--40); margin-top: var(--wp--preset--spacing--40); } @media (min-width: 640px) { .pv-catalogo-grid { grid-template-columns: repeat(3, 1fr); } } @media (min-width: 1000px) { .pv-catalogo-grid { grid-template-columns: repeat(4, 1fr); } } .pv-card { display: flex; flex-direction: column; background-color: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--border); border-radius: 14px; overflow: hidden; box-shadow: var(--pv-shadow); transition: transform 0.3s var(--pv-ease), box-shadow 0.3s ease; } /* La tarjeta completa es un enlace ; sin esto, el subrayado por defecto de los enlaces aparecía sobre el texto (título, extracto, "Explorar →"). */ .pv-card, .pv-card:hover, .pv-card:focus-visible, .pv-card:hover .pv-card__more, .pv-card:focus-visible .pv-card__more { text-decoration: none; } .pv-card:hover { transform: translateY(-6px); box-shadow: var(--pv-shadow-lift); } .pv-card__imagen { aspect-ratio: 3 / 2; overflow: hidden; background-color: var(--wp--preset--color--surface); } .pv-card__imagen img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.5s var(--pv-ease); } .pv-card:hover .pv-card__imagen img { transform: scale(1.04); } .pv-card__body { padding: 18px 20px 22px; } .pv-card__body h3 { font-size: 1.12rem; /* Altura fija de 2 líneas para el título: así TODAS las tarjetas del catálogo (categorías y productos) miden igual sin importar el largo del nombre; los nombres muy largos se recortan con elipsis. La imagen (3:2) y el enlace "más" también son de alto fijo, por lo que la tarjeta completa es uniforme. */ line-height: 1.25; min-height: 2.5em; display: -webkit-box; -webkit-line-clamp: 2; line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .pv-card__body p { color: var(--pv-muted); font-size: 0.92rem; margin-top: 6px; } .pv-card__more { display: inline-block; margin-top: 12px; color: var(--wp--preset--color--primary-dark); font-weight: 600; font-size: 0.9rem; } /* Enlace "volver" del catálogo dinámico (categoría → categorías, producto → categoría): flecha + texto en el color de acento, con un leve desplazamiento al pasar el cursor en vez del subrayado plano del diseño anterior. */ .pv-volver { display: inline-block; font-weight: 600; font-size: 0.92rem; color: var(--wp--preset--color--primary-dark); text-decoration: none; transition: transform 0.2s var(--pv-ease), color 0.2s ease; } .pv-volver:hover, .pv-volver:focus-visible { color: var(--wp--preset--color--primary); transform: translateX(-3px); } /* Tabla de especificaciones técnicas del detalle de producto: caja con borde suave y radio, filas alternadas, en vez de la tabla plana con líneas grises del diseño anterior. */ .pv-specs { margin-top: var(--wp--preset--spacing--40); border: 1px solid var(--wp--preset--color--border); border-radius: 14px; overflow: hidden; background-color: var(--wp--preset--color--base); box-shadow: var(--pv-shadow); } .pv-specs__table { width: 100%; border-collapse: collapse; } .pv-specs__table tr { border-bottom: 1px solid var(--wp--preset--color--border); } .pv-specs__table tr:last-child { border-bottom: none; } .pv-specs__table tr:nth-child(even) { background-color: var(--wp--preset--color--surface); } .pv-specs__table th, .pv-specs__table td { padding: 0.75rem 1.25rem; text-align: left; } .pv-specs__table th { font-weight: 600; color: var(--wp--preset--color--ink); width: 40%; } .pv-specs__table td { color: var(--pv-muted); } @media (max-width: 480px) { .pv-specs__table th, .pv-specs__table td { padding: 0.6rem 0.9rem; } } /* Bloque de característica: icono de línea + título + texto. */ .pv-feature { display: flex; gap: 16px; align-items: flex-start; background-color: var(--wp--preset--color--base); border: 1px solid var(--wp--preset--color--border); border-radius: 14px; padding: 24px; box-shadow: var(--pv-shadow); transition: transform 0.3s var(--pv-ease), box-shadow 0.3s ease; } .pv-feature:hover { transform: translateY(-4px); box-shadow: var(--pv-shadow-lift); } .pv-feature__icono { flex: 0 0 46px; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; background-color: color-mix(in srgb, var(--wp--preset--color--primary) 12%, white); color: var(--wp--preset--color--primary-dark); } .pv-feature__icono svg { width: 24px; height: 24px; } .pv-feature h3 { font-size: 1.05rem; } .pv-feature p { color: var(--pv-muted); font-size: 0.9rem; margin-top: 5px; } /* Sección "Razones para preferir a Plastyverg": tarjetas centradas en la página (ícono arriba, título y texto centrados). */ .pv-razones .pv-feature { flex-direction: column; align-items: center; text-align: center; /* Como ítem flex del contenedor de abajo: base 220px, puede crecer hasta 280 para llenar la fila de forma pareja. */ flex: 1 1 220px; max-width: 280px; } /* El grid del bloque (auto-fill) crea columnas vacías que LLENAN el ancho, así que justify-content no tenía espacio libre y las tarjetas quedaban a la izquierda. Se cambia a flex con envoltura y centrado real: cualquier fila —completa o no— queda centrada. Se acota el contenedor a wide-size por si el alignwide no lo centrara. Doble clase para ganar a la CSS de layout que el bloque imprime tarde. */ .pv-razones .pv-razones__grid { display: flex; flex-wrap: wrap; justify-content: center; max-width: var(--wp--style--global--wide-size); margin-inline: auto; } /* Imagen de contenido de la página de Servicios presentada como tarjeta, igual que las tarjetas de producto (bordes suaves, esquinas redondeadas, sombra). Se acota a `main` para no afectar los logos del header/footer. */ .page-servicios main .wp-block-image img { border-radius: 14px; border: 1px solid var(--wp--preset--color--border); box-shadow: var(--pv-shadow-lift); } /* Banda CTA en color de acento. */ .pv-cta { background-color: var(--wp--preset--color--primary); color: var(--wp--preset--color--base); border-radius: 22px; padding: 52px; display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; box-shadow: 0 20px 50px rgba(19, 150, 145, 0.25); } .pv-cta h2, .pv-cta h3 { color: var(--wp--preset--color--base); } .pv-cta p { color: rgba(255, 255, 255, 0.9); margin-top: 8px; } /* Cifras destacadas (grid de estadísticas). */ .pv-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 22px; } @media (max-width: 640px) { .pv-stats { grid-template-columns: repeat(2, 1fr); } } .pv-stat__numero { font-family: var(--wp--preset--font-family--sora); font-weight: 800; font-size: 2.6rem; color: var(--wp--preset--color--primary); } .pv-section--ink .pv-stat__numero { color: var(--wp--preset--color--base); } .pv-stat__etiqueta { color: var(--pv-muted); font-size: 0.92rem; margin-top: 2px; } .pv-section--ink .pv-stat__etiqueta { color: #B8C4D2; } /* Franja de clientes en escala de grises. */ .pv-clientes { border-bottom: 1px solid var(--wp--preset--color--border); background-color: var(--wp--preset--color--base); } .pv-clientes__lista { display: flex; flex-direction: column; gap: 1.75rem; padding: 26px 0; } /* Cada fila de logos, centrada horizontalmente (dos filas de clientes). */ .pv-clientes__fila { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 1.75rem 2.75rem; } .pv-clientes__lista img { max-height: 32px; width: auto; filter: grayscale(1) opacity(0.6); transition: filter 0.2s ease; } .pv-clientes__lista a:hover img, .pv-clientes__lista img:hover { filter: grayscale(0) opacity(1); } /* Hero: sección oscura de apertura con acento radial y grid a dos columnas. */ .pv-hero { /* Degradado tomado del mockup aprobado; #13293D/#0b2036 son matices de la tinta usados solo aquí como decoración, no como color de marca. */ background: linear-gradient(160deg, var(--wp--preset--color--ink) 0%, #13293D 60%, #0B2036 100%); color: var(--wp--preset--color--base); overflow: hidden; position: relative; } .pv-hero::before { content: ""; position: absolute; inset: 0; background: radial-gradient(700px 400px at 78% 15%, rgba(19, 150, 145, 0.22), transparent 60%); pointer-events: none; } .pv-hero h1 { color: var(--wp--preset--color--base); } .pv-hero .pv-eyebrow { color: #7FE3DD; } .pv-hero p { color: #C7D2DF; } .pv-hero__grid { position: relative; display: grid; grid-template-columns: 1.05fr 0.95fr; gap: 48px; align-items: center; padding: 88px 0 96px; } @media (max-width: 860px) { .pv-hero__grid { grid-template-columns: 1fr; padding: 56px 0 64px; } } .pv-hero__media { aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; box-shadow: 0 30px 60px rgba(0, 0, 0, 0.35); position: relative; } .pv-hero__media img { width: 100%; height: 100%; object-fit: cover; } /* Ken Burns leve para medios de hero: se aplica junto con .pv-hero__media img o a cualquier imagen de fondo que deba respirar suavemente. */ @keyframes pv-ken-burns { from { transform: scale(1.02) translate(0, 0); } to { transform: scale(1.12) translate(-2%, -2%); } } .pv-ken-burns { animation: pv-ken-burns 14s ease-in-out infinite alternate; } /* Footer oscuro. */ .pv-footer { background-color: var(--wp--preset--color--ink); color: #AEB9C6; padding: 56px 0 30px; } .pv-footer h2, .pv-footer h3, .pv-footer h4 { color: var(--wp--preset--color--base); } .pv-footer a { color: #AEB9C6; } .pv-footer a:hover { color: var(--wp--preset--color--base); } .pv-footer__bottom { border-top: 1px solid rgba(255, 255, 255, 0.1); margin-top: 36px; padding-top: 20px; font-size: 0.82rem; color: #8895A5; } /* Utilidades de revelado al hacer scroll (ver assets/js/reveal.js). */ .reveal { opacity: 0; transform: translateY(24px); transition: opacity 0.7s var(--pv-ease), transform 0.7s var(--pv-ease); } .reveal.in { opacity: 1; transform: none; } /* Movimiento reducido: sin transforms ni animaciones prolongadas; el contenido revelado por reveal.js solo hace un fundido corto de opacidad (reveal.js también evita quedarse observando y revela de inmediato). */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; } .reveal { transition: opacity 0.3s ease; transform: none; } .plastyverg-nav-principal .wp-block-navigation-item__content::after { transition: none; } .pv-card, .pv-feature, .wp-element-button, .wp-block-button__link, .pv-btn-ghost, .pv-btn-outline, .pv-volver, .pv-card__imagen img { transition: none; } .pv-card:hover, .pv-feature:hover, .wp-element-button:hover, .wp-block-button__link:hover, .pv-btn-ghost:hover, .pv-volver:hover, .pv-card:hover .pv-card__imagen img { transform: none; } }