/* ===================================================================== Zubizuri · sistema de diseño (v0.4) Todo sale de los tokens de :root. Si hay que cambiar algo, se cambia el token, no el componente. Colores: siempre la paleta de theme.json. ===================================================================== */ /* --------------------------------------------------------------------- 1. Tokens --------------------------------------------------------------------- */ :root { /* Espaciado: escala de 4 px (4 · 8 · 12 · 16 · 24 · 32 · 48 · 64 · 96 · 128). */ --zz-e-1: 0.25rem; --zz-e-2: 0.5rem; --zz-e-3: 0.75rem; --zz-e-4: 1rem; --zz-e-5: 1.5rem; --zz-e-6: 2rem; --zz-e-7: 3rem; --zz-e-8: 4rem; --zz-e-9: 6rem; --zz-e-10: 8rem; /* Ritmo vertical de las secciones: 64 px en móvil, 128 px en escritorio (2026-09-30). */ --zz-seccion: clamp(4rem, 9vw, 8rem); /* 64 px en móvil (antes 80: entre dos fondos distintos quedaban 160 px) → 128 px en escritorio. */ --zz-seccion-compacta: clamp(3.5rem, 6vw, 5rem); /* Separación entre el título de una sección y su contenido. */ --zz-tras-titulo: clamp(2rem, 4vw, 3rem); /* Radios: pequeño para campos, medio para tarjetas, grande para paneles y fotos, píldora para botones y etiquetas. */ --zz-r-xs: 6px; --zz-r-sm: 12px; --zz-r-md: 16px; --zz-r-lg: 24px; --zz-r-full: 999px; /* Superficies y bordes. */ --zz-borde: var(--wp--preset--color--linea); --zz-borde-fuerte: #d6cec4; --zz-borde-campo: #8c8378; /* 3,6:1 sobre blanco, mínimo para bordes de campo (WCAG 1.4.11). */ --zz-texto-suave: var(--wp--preset--color--gris); /* Sombras: casi ninguna. Solo para lo que flota. */ --zz-sombra-1: 0 1px 2px rgb(28 26 24 / 0.06); --zz-sombra-2: 0 16px 40px -20px rgb(28 26 24 / 0.28); --zz-sombra-3: 0 32px 64px -32px rgb(0 0 0 / 0.55); /* Movimiento. */ --zz-curva: cubic-bezier(0.2, 0.7, 0.2, 1); --zz-rapido: 160ms; --zz-medio: 280ms; /* Tipografía de apoyo. */ --zz-medida: 65ch; /* Largo de línea cómodo. */ --zz-cabecera-alto: 72px; --zz-apagado-oscuro: rgb(255 255 255 / 0.47); /* Número aún sin encender sobre tinta: 4,8:1 (el gris del tema daba 2,95:1; al 0,45, 4,47:1). 2026-10-05. */ --zz-contenedor: 1180px; /* Ancho del contenedor de las secciones (theme.json · wideSize). */ /* Margen izquierdo que alinea un elemento estrecho con el borde del contenedor, en cualquier pantalla. */ --zz-borde-izq: max(0px, calc((100% - var(--zz-contenedor)) / 2)); } /* --------------------------------------------------------------------- 2. Base --------------------------------------------------------------------- */ html { scroll-padding-top: calc(var(--zz-cabecera-alto) + var(--zz-e-4)); } /* El formulario corto vive en la portada de Vender: al saltar a él (#zz-form-valoracion) se ve la portada entera, con su titular. */ .zz-form--valoracion-corto { scroll-margin-top: 100vh; } body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility; } :where(a) { text-underline-offset: 0.2em; text-decoration-thickness: 1px; } :where(a):hover { text-decoration-thickness: 2px; } :focus-visible { outline: 2px solid var(--wp--preset--color--terracota-profundo); outline-offset: 3px; border-radius: 4px; } ::selection { background: var(--wp--preset--color--terracota-velado); color: var(--wp--preset--color--tinta); } img { height: auto; } .screen-reader-text { border: 0; clip: rect(1px, 1px, 1px, 1px); clip-path: inset(50%); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute !important; width: 1px; word-wrap: normal !important; } /* --------------------------------------------------------------------- 3. Ritmo entre bloques Las secciones de ancho completo se tocan: sin franjas del color de fondo entre un color y otro. El aire lo pone el padding de cada sección. --------------------------------------------------------------------- */ :where(.wp-site-blocks) > * { margin-block: 0; } .wp-block-post-content > .alignfull, .wp-block-post-content > .alignfull + * , .zz-main > .alignfull, .zz-main > .alignfull + * { margin-block-start: 0 !important; } .wp-block-post-content > .alignfull { margin-block-end: 0 !important; } .zz-seccion { padding-block: var(--zz-seccion); } .zz-seccion--compacta { padding-block: var(--zz-seccion-compacta); } .zz-seccion--arriba { padding-block: var(--zz-e-8) var(--zz-e-6); } .zz-seccion--sin-arriba { padding-top: 0; } .zz-seccion--grande { padding-block: var(--zz-e-10); } /* Dos secciones seguidas del mismo color: no se duplica el aire. */ .zz-seccion:not([class*="zz-seccion--"]):not(.zz-oscuro) + .zz-seccion:not([class*="zz-seccion--"]):not(.zz-oscuro) { padding-top: 0; } /* Fondos de sección. */ .zz-seccion--arena { background: var(--wp--preset--color--arena); } .zz-seccion--velada { background: var(--wp--preset--color--terracota-velado); } /* Cierre de llamada a la acción: la única superficie grande en terracota (decisión del 2026-09-24). Blanco sobre terracota profundo: 5,6:1. El botón se invierte para no desaparecer. */ .zz-seccion--acento { background: var(--wp--preset--color--terracota-profundo); color: #fff; } .zz-seccion--acento :is(h2, h3, p) { color: #fff; } .zz-seccion--acento .zz-entradilla { color: rgb(255 255 255 / 0.9); } .zz-seccion--acento .wp-block-button:not(.is-style-outline) > .wp-block-button__link { background: #fff; color: var(--wp--preset--color--tinta); } .zz-seccion--acento .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover { background: var(--wp--preset--color--papel); color: var(--wp--preset--color--tinta); } .zz-seccion--acento :focus-visible { outline-color: #fff; } /* Cierre con el puente (Inicio, 2026-10-05): la foto de la portada teñida del mismo terracota. Se mezcla en «multiplicar», así que nada queda más claro que el fondo y el blanco mantiene al menos 5,6:1. Reutiliza las fotos AVIF de la portada (mismas URL): el navegador ya las tiene y no descarga nada más. Sin image-set(): en el pseudoelemento no pintaba. Sin AVIF (navegadores muy antiguos) queda el rojo liso. Escritorio: mitad derecha, fundida hacia la izquierda. Móvil: de fondo, fundida desde arriba. */ .zz-cierre-puente { position: relative; isolation: isolate; overflow: hidden; view-timeline-name: --zz-cierre; } .zz-cierre-puente::before { content: ""; position: absolute; z-index: -1; inset: -12% 0; pointer-events: none; background: center / cover no-repeat; background-image: url("../media/hero-movil.avif"); filter: grayscale(1) contrast(1.15); mix-blend-mode: multiply; -webkit-mask-image: linear-gradient(to bottom, transparent, #000 75%); mask-image: linear-gradient(to bottom, transparent, #000 75%); } @media (min-width: 782px) { .zz-cierre-puente::before { left: 35%; background-image: url("../media/hero-1920.avif"); -webkit-mask-image: linear-gradient(to right, transparent, #000 45%); mask-image: linear-gradient(to right, transparent, #000 45%); } } @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { /* Parallax suave: la foto va algo más despacio que la página. */ .zz-cierre-puente::before { animation: zz-parallax linear both; animation-timeline: --zz-cierre; animation-range: cover; } } } @keyframes zz-parallax { from { transform: translateY(-8%); } to { transform: translateY(8%); } } .zz-seccion--blanca { background: var(--wp--preset--color--blanco); } .zz-oscuro { background: var(--wp--preset--color--tinta); color: #d9d3cb; } /* Título de sección → contenido. */ .zz-seccion > h2.wp-block-heading:first-child, .zz-seccion > .zz-antetitulo + h2.wp-block-heading { margin-bottom: var(--zz-tras-titulo); } .zz-seccion > h2.wp-block-heading + .zz-entradilla { margin-top: calc(var(--zz-tras-titulo) * -0.5); margin-bottom: var(--zz-tras-titulo); } .zz-seccion > :last-child { margin-bottom: 0; } /* Contenidos que no son secciones completas pero están entre ellas (p. ej. fotos pendientes). */ .wp-block-post-content > .alignwide:not(.alignfull) { margin-block: var(--zz-e-7) !important; } /* --------------------------------------------------------------------- 4. Tipografía Gloock solo en tamaños grandes (≥ 28 px); Figtree en todo lo demás. --------------------------------------------------------------------- */ h1.wp-block-heading, h2.wp-block-heading { text-wrap: balance; } p { text-wrap: pretty; } .zz-antetitulo { font-size: var(--wp--preset--font-size--x-small); font-weight: 600; line-height: 1.2; letter-spacing: 0.14em; text-transform: uppercase; color: var(--wp--preset--color--terracota-profundo); margin-bottom: var(--zz-e-4) !important; } .zz-entradilla { font-size: var(--wp--preset--font-size--medium); line-height: 1.5; color: var(--zz-texto-suave); max-width: 34em; } .zz-nota { font-size: var(--wp--preset--font-size--small); color: var(--zz-texto-suave); } .zz-destacado { font-family: var(--wp--preset--font-family--figtree); font-size: clamp(1.25rem, 2.2vw, 1.625rem); font-weight: 500; line-height: 1.45; letter-spacing: -0.01em; color: var(--wp--preset--color--tinta); max-width: 32em; } .zz-centrado { text-align: center; margin-inline: auto; } .zz-centrado .zz-entradilla { margin-inline: auto !important; } .zz-centrado .wp-block-buttons, .zz-centrado.wp-block-buttons { justify-content: center; } /* Filetes bajo los títulos: descartados (2026-09-24). La clase se conserva sin efecto. */ .zz-filete::after { content: none; } /* --------------------------------------------------------------------- 5. Botones Primario (terracota) · Secundario (contorno neutro) · Texto (enlace con flecha). Alto mínimo 48 px (44 en la cabecera): cumple el objetivo táctil. --------------------------------------------------------------------- */ /* Radio de 12 px, el mismo que los campos (2026-10-02). «:root» gana a los estilos globales de WordPress, vengan del theme.json o de lo guardado en el editor del sitio. */ :root :is(.wp-element-button, .wp-block-button__link) { border-radius: var(--zz-r-sm); } .wp-block-buttons { gap: var(--zz-e-3); } .wp-block-button__link { min-height: 48px; display: inline-flex; align-items: center; justify-content: center; gap: var(--zz-e-2); transition: background-color var(--zz-rapido) ease, color var(--zz-rapido) ease, border-color var(--zz-rapido) ease, transform var(--zz-rapido) ease; } .wp-block-button__link:hover { transform: translateY(-1px); } .wp-block-button__link:active { transform: translateY(0) scale(0.99); } /* Secundario: contorno en tinta, no en terracota (el acento se reserva para la acción principal). */ .wp-block-button.is-style-outline > .wp-block-button__link { background: transparent; color: var(--wp--preset--color--tinta); border: 1px solid var(--zz-borde-campo); padding: calc(0.8125rem - 1px) calc(1.5rem - 1px); } .wp-block-button.is-style-outline > .wp-block-button__link:hover { border-color: var(--wp--preset--color--tinta); background: rgb(28 26 24 / 0.04); color: var(--wp--preset--color--tinta); } /* Texto. */ .wp-block-button.is-style-zz-enlace > .wp-block-button__link { background: none; color: var(--wp--preset--color--terracota-profundo); padding: 0; min-height: 0; text-decoration: underline; } /* Sobre fondo oscuro o foto: el secundario pasa a blanco. */ :is(.zz-hero, .zz-hero-imagen, .zz-oscuro) .is-style-outline > .wp-block-button__link { color: #fff; border-color: rgb(255 255 255 / 0.6); } :is(.zz-hero, .zz-hero-imagen, .zz-oscuro) .is-style-outline > .wp-block-button__link:hover { background: rgb(255 255 255 / 0.1); border-color: #fff; color: #fff; } /* Enlaces con flecha. */ .zz-enlace-flecha a, .zz-contacto-vivienda__propietarios a { font-weight: 600; text-decoration: none; } .zz-enlace-flecha a:hover, .zz-contacto-vivienda__propietarios a:hover { text-decoration: underline; } .zz-enlace-flecha a span[aria-hidden], .zz-contacto-vivienda__propietarios a span[aria-hidden] { display: inline-block; transition: transform var(--zz-medio) var(--zz-curva); } .zz-enlace-flecha a:hover span[aria-hidden], .zz-contacto-vivienda__propietarios a:hover span[aria-hidden] { transform: translateX(4px); } .zz-botones { gap: var(--zz-e-3); margin-top: var(--zz-e-6); } .zz-botones > .wp-block-buttons { margin: 0; } /* --------------------------------------------------------------------- 6. Superficies Papel (página) · Blanco (tarjeta) · Arena (sección suave) · Tinta (inversa). Tarjetas: borde de 1 px, sin sombra en reposo; se elevan al pasar el ratón. --------------------------------------------------------------------- */ .zz-tarjeta { background: var(--wp--preset--color--blanco); border: 1px solid var(--zz-borde); border-radius: var(--zz-r-md); overflow: hidden; transition: transform var(--zz-medio) var(--zz-curva), border-color var(--zz-medio) ease, box-shadow var(--zz-medio) ease; } .zz-tarjeta:hover { transform: translateY(-4px); border-color: var(--zz-borde-fuerte); box-shadow: var(--zz-sombra-2); } .zz-caja-formulario { background: var(--wp--preset--color--blanco); border: 1px solid var(--zz-borde); border-radius: var(--zz-r-lg); padding: clamp(1.5rem, 4vw, 2.5rem) !important; } .zz-caja-formulario > h2 { font-size: clamp(1.75rem, 3vw, 2.25rem); margin: 0 0 var(--zz-e-5); } /* Caja suave (el nombre es histórico: era terracota velado; desde el 2026-09-24 es arena). */ .zz-caja-velada { background: var(--wp--preset--color--arena); border-radius: var(--zz-r-lg); padding: clamp(1.75rem, 5vw, 3.5rem) !important; } .zz-caja-velada > h2 { font-size: clamp(1.75rem, 3vw, 2.5rem); margin: 0 0 var(--zz-e-4); } .zz-caja-velada > p:last-child { margin-bottom: 0; } .zz-vacio { background: var(--wp--preset--color--arena); border-radius: var(--zz-r-lg); padding: clamp(1.75rem, 5vw, 3.5rem); } .zz-vacio h2 { margin-top: 0; } .zz-foto-pendiente { aspect-ratio: 16 / 7; display: grid; place-items: center; text-align: center; padding: var(--zz-e-5); background: var(--wp--preset--color--arena); border: 1px dashed var(--zz-borde-fuerte); border-radius: var(--zz-r-lg); color: var(--zz-texto-suave); font-size: var(--wp--preset--font-size--small); } .zz-foto-retrato { aspect-ratio: 4 / 5 !important; max-width: 420px; } @media (max-width: 781px) { .zz-foto-pendiente { aspect-ratio: 4 / 3; } } /* Foto que sustituye a un hueco: bloque Imagen con la clase «zz-foto» (y «zz-foto--ancha» para la grande de Equipo). */ .wp-block-image.zz-foto { margin: 0; } .wp-block-image.zz-foto img { display: block; width: 100%; height: auto; border-radius: var(--zz-r-lg); } .wp-block-image.zz-foto--ancha img { aspect-ratio: 16 / 7; object-fit: cover; } @media (max-width: 781px) { .wp-block-image.zz-foto--ancha img { aspect-ratio: 4 / 3; } } /* --------------------------------------------------------------------- 7. Cabecera --------------------------------------------------------------------- */ .wp-site-blocks > header.wp-block-template-part { position: sticky; top: 0; z-index: 50; } .admin-bar .wp-site-blocks > header.wp-block-template-part { top: var(--wp-admin--admin-bar--height, 32px); } .zz-cabecera { position: relative; padding-block: var(--zz-e-3); transition: box-shadow var(--zz-medio) ease, padding var(--zz-medio) ease; } /* Fondo sólido en papel, sin transparencia ni desenfoque (2026-10-05): semitransparente, sobre el bloque oscuro se volvía gris apagado. El fondo va en una capa aparte: si lo lleva la cabecera, el menú del móvil queda encerrado dentro. */ .zz-cabecera::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--wp--preset--color--papel); } /* Arriba del todo, plana; al bajar, una sombra suave la separa del contenido. */ .zz-cabecera.is-scrolled { padding-block: var(--zz-e-2); box-shadow: 0 1px 0 rgb(0 0 0 / 0.06), 0 6px 16px -10px rgb(0 0 0 / 0.18); } .zz-cabecera__fila { gap: var(--zz-e-5); min-height: 48px; } .zz-cabecera__derecha { gap: var(--zz-e-6); } .zz-logo { display: inline-flex; color: var(--wp--preset--color--terracota); line-height: 0; text-decoration: none; } .zz-logo svg { height: 34px; width: auto; } .zz-menu .wp-block-navigation-item__content { color: var(--wp--preset--color--tinta); text-decoration: none; padding-block: var(--zz-e-2); } .zz-menu .wp-block-navigation-item__content:hover { color: var(--wp--preset--color--terracota-profundo); } .zz-menu .current-menu-item > .wp-block-navigation-item__content, .zz-menu [aria-current="page"] { box-shadow: inset 0 -2px 0 var(--wp--preset--color--terracota); } .zz-cabecera__cta .wp-block-button__link { min-height: 40px; padding: 0.5rem 1.125rem; font-size: var(--wp--preset--font-size--small); } /* Menú del móvil abierto. */ .zz-menu .wp-block-navigation__responsive-container.is-menu-open { padding: var(--zz-e-5) clamp(1.25rem, 5vw, 2.5rem); } .zz-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content { align-items: flex-start; padding-top: var(--zz-e-8); } .zz-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container { align-items: flex-start; gap: var(--zz-e-5); } .zz-menu .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content { font-family: var(--wp--preset--font-family--gloock); font-size: 2rem; } /* «Pedir valoración» dentro del menú: solo con el menú del móvil abierto; en escritorio ya está el botón de la cabecera. */ .zz-menu .zz-menu__cta { display: none; } .zz-menu .wp-block-navigation__responsive-container.is-menu-open .zz-menu__cta { display: block; margin-top: var(--zz-e-4); } .zz-menu .wp-block-navigation__responsive-container.is-menu-open .zz-menu__cta .wp-block-navigation-item__content { box-sizing: border-box; display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 0.75rem 1.75rem; border-radius: var(--zz-r-sm); background: var(--wp--preset--color--terracota-profundo); color: #fff; box-shadow: none; font-family: var(--wp--preset--font-family--figtree); font-size: 1.0625rem; font-weight: 600; } .zz-menu .wp-block-navigation__responsive-container.is-menu-open .zz-menu__cta .wp-block-navigation-item__content:hover { background: var(--wp--preset--color--terracota-oscuro); color: #fff; } @media (max-width: 781px) { .zz-cabecera .zz-cabecera__cta { display: none; } .zz-logo svg { height: 28px; } } /* Por debajo de 782 px la web es «móvil» en todo (barra fija, botón dentro del menú). El bloque de navegación solo se pliega por debajo de 600 px, así que entre 600 y 781 px se pliega también aquí: si no, en una tableta en vertical no quedaba ningún «Pedir valoración» a la vista. */ @media (min-width: 600px) and (max-width: 781px) { .zz-menu .wp-block-navigation__responsive-container-open:not(.always-shown) { display: flex; } .zz-menu .wp-block-navigation__responsive-container:not(.hidden-by-default):not(.is-menu-open) { display: none; } } /* --------------------------------------------------------------------- 8. Portadas --------------------------------------------------------------------- */ /* Portada sencilla (páginas interiores). */ .zz-portada { padding-block: var(--zz-e-9) var(--zz-e-8); } .zz-portada h1 { max-width: 12em; } .zz-portada .zz-entradilla { margin-top: var(--zz-e-5); } .zz-portada .wp-block-buttons { margin-top: var(--zz-e-6); } .zz-portada-columnas { align-items: center; gap: clamp(2rem, 5vw, 5rem); } .zz-portada-columnas h1 { font-size: clamp(2.5rem, 5vw, 4rem); } /* Portada de Inicio con vídeo. */ .zz-hero { position: relative; isolation: isolate; overflow: hidden; min-height: min(88vh, 860px); display: flex; flex-direction: column; justify-content: center; padding-block: var(--zz-e-9) !important; background: var(--wp--preset--color--tinta); color: #fff; } .zz-hero > .zz-video-fondo { position: absolute; inset: 0; z-index: -1; max-width: none !important; margin: 0 !important; } /* Al ser flexible, el bloque de texto se ajustaría a su contenido y quedaría centrado: ocupa todo el contenedor. */ .zz-hero > .zz-hero__contenido { width: 100%; } .zz-hero h1 { font-size: clamp(3rem, 7.5vw, 6.5rem); line-height: 0.98; letter-spacing: -0.03em; max-width: 11.5em; } .zz-hero h1, .zz-hero p, .zz-hero .zz-antetitulo { color: #fff; } .zz-hero .zz-antetitulo { opacity: 1; } .zz-hero .zz-entradilla { color: #fff; margin-top: var(--zz-e-5); max-width: 30em; } /* La dirección es un dato de apoyo, no un tercer párrafo: más pequeña, algo más tenue y con su icono. */ .zz-hero .zz-nota { color: rgb(255 255 255 / 0.8); font-size: 0.875rem; line-height: 1.5; margin-top: var(--zz-e-5); padding-left: 20px; text-indent: -20px; } .zz-hero .zz-nota::before { content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 6px; vertical-align: -2px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2a7 7 0 0 0-7 7c0 5.2 7 13 7 13s7-7.8 7-13a7 7 0 0 0-7-7zm0 9.5A2.5 2.5 0 1 1 12 6.5a2.5 2.5 0 0 1 0 5z'/%3E%3C/svg%3E") center / contain no-repeat; } .zz-hero .zz-entradilla, .zz-hero .zz-nota { text-shadow: 0 1px 14px rgb(0 0 0 / 0.45); } @media (max-width: 781px) { .zz-hero { min-height: 80vh; padding-block: var(--zz-e-8) !important; } } .zz-video-fondo { background: var(--zz-poster-movil) center / cover no-repeat var(--wp--preset--color--tinta); } @media (min-width: 782px) { .zz-video-fondo { background-image: var(--zz-poster); } } /* En el móvil no hay vídeo: la foto es un recorte vertical ya encuadrado en el puente (pasarela y arco). */ .zz-video-fondo__video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity 0.8s ease; } .zz-video-fondo.is-playing .zz-video-fondo__video, .zz-video-fondo__video[src] { opacity: 1; } /* Degradado de izquierda a derecha: el texto blanco se lee siempre, pase lo que pase en el vídeo. Calculado para el peor caso (píxel blanco bajo la letra): ≥ 0,62 de opacidad donde hay texto pequeño = 4,5:1 (hallazgo Z-04). */ .zz-video-fondo::after { content: ""; position: absolute; inset: 0; pointer-events: none; background: linear-gradient(to right, rgb(28 26 24 / 0.8) 0%, rgb(28 26 24 / 0.7) 55%, rgb(28 26 24 / 0.6) 75%, rgb(28 26 24 / 0.3) 100%), linear-gradient(to top, rgb(28 26 24 / 0.35) 0%, rgb(28 26 24 / 0) 40%); } @media (max-width: 781px) { .zz-video-fondo::after { background: linear-gradient(to bottom, rgb(28 26 24 / 0.62), rgb(28 26 24 / 0.72) 50%, rgb(28 26 24 / 0.82)); } } .zz-video-fondo__boton { position: absolute; right: clamp(1rem, 3vw, 2rem); bottom: clamp(1rem, 3vw, 2rem); z-index: 2; width: 44px; height: 44px; border-radius: var(--zz-r-full); border: 1px solid rgb(255 255 255 / 0.4); background: rgb(28 26 24 / 0.35); color: #fff; display: grid; place-items: center; cursor: pointer; -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); transition: background var(--zz-rapido) ease; } .zz-video-fondo__boton:hover { background: rgb(28 26 24 / 0.6); } /* El atributo hidden tiene que ganar a display: grid (hallazgo Z-07). */ .zz-video-fondo__boton[hidden] { display: none; } .zz-video-fondo__boton svg { width: 16px; height: 16px; fill: currentColor; } .zz-video-fondo__boton .zz-icono-play, .zz-video-fondo__boton.is-paused .zz-icono-pausa { display: none; } .zz-video-fondo__boton.is-paused .zz-icono-play { display: block; } /* En el móvil, discreto: más pequeño, abajo a la derecha y sin competir con el botón de la portada. */ @media (max-width: 781px) { .zz-video-fondo__boton { width: 36px; height: 36px; right: var(--zz-e-4); bottom: var(--zz-e-4); border-color: rgb(255 255 255 / 0.25); background: rgb(28 26 24 / 0.2); } .zz-video-fondo__boton svg { width: 12px; height: 12px; } } /* Portada con foto (Vender tu piso). */ .zz-hero-imagen { position: relative; isolation: isolate; color: #fff; background: url("../media/hero-movil.jpg") center / cover no-repeat var(--wp--preset--color--tinta); } @media (min-width: 782px) { .zz-hero-imagen { background-image: url("../media/hero-1920.webp"); } } .zz-hero-imagen::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; background: linear-gradient(to right, rgb(28 26 24 / 0.84) 0%, rgb(28 26 24 / 0.72) 50%, rgb(28 26 24 / 0.45) 100%), linear-gradient(to top, rgb(28 26 24 / 0.35), rgb(28 26 24 / 0)); } @media (max-width: 781px) { .zz-hero-imagen::before { background: linear-gradient(to bottom, rgb(28 26 24 / 0.78), rgb(28 26 24 / 0.66) 60%, rgb(28 26 24 / 0.78)); } } .zz-hero-imagen h1, .zz-hero-imagen .zz-antetitulo { color: #fff; } .zz-hero-imagen .zz-entradilla { color: #fff; } .zz-hero-imagen .zz-caja-formulario { color: var(--wp--preset--color--tinta); border-color: transparent; box-shadow: var(--zz-sombra-3); } /* --------------------------------------------------------------------- 9. Contenido --------------------------------------------------------------------- */ /* Tres columnas de servicios. */ .zz-tres { gap: clamp(2rem, 4vw, 4rem); } .zz-tres h3, .zz-puntos h3 { margin: 0 0 var(--zz-e-2); } .zz-tres p, .zz-puntos p { color: var(--zz-texto-suave); margin: 0; } .zz-tres + .zz-enlace-flecha { margin-top: var(--zz-e-7); } /* Rejilla de argumentos. */ .zz-puntos { display: grid; grid-template-columns: 1fr; gap: var(--zz-e-6) var(--zz-e-8); } @media (min-width: 700px) { .zz-puntos { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: var(--zz-e-7); } } .zz-puntos > * { margin: 0 !important; } /* Pasos numerados. */ ol.zz-pasos { list-style: none; padding: 0; margin: 0; counter-reset: paso; display: grid; } ol.zz-pasos > li { counter-increment: paso; position: relative; padding: var(--zz-e-5) 0 var(--zz-e-5) 4rem; border-top: 1px solid var(--zz-borde); } ol.zz-pasos > li:last-child { border-bottom: 1px solid var(--zz-borde); } ol.zz-pasos > li::before { content: counter(paso); position: absolute; left: 0; top: var(--zz-e-5); font-family: var(--wp--preset--font-family--gloock); font-size: 2.5rem; line-height: 0.9; color: var(--wp--preset--color--terracota); } ol.zz-pasos strong { display: block; font-weight: 600; margin-bottom: var(--zz-e-1); } ol.zz-pasos.zz-pasos--cortos { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); column-gap: var(--zz-e-7); } ol.zz-pasos.zz-pasos--cortos > li:last-child { border-bottom: 0; } ol.zz-pasos + .wp-block-buttons { margin-top: var(--zz-e-7); } @media (max-width: 781px) { ol.zz-pasos.zz-pasos--cortos > li:last-child { border-bottom: 1px solid var(--zz-borde); } } /* Bloque oscuro. */ .zz-oscuro h2, .zz-oscuro h3, .zz-oscuro strong { color: #fff; } .zz-oscuro a:not(.wp-block-button__link) { color: #f3b3a2; } .zz-oscuro ol.zz-pasos > li { border-color: rgb(255 255 255 / 0.14); } .zz-oscuro .zz-destacado { color: #fff; } /* Preguntas frecuentes. */ .wp-block-details { border-bottom: 1px solid var(--zz-borde); padding: 0; margin: 0 !important; } h2 + .wp-block-details, .wp-block-details:first-of-type { border-top: 1px solid var(--zz-borde); } .wp-block-details summary { list-style: none; cursor: pointer; padding: var(--zz-e-5) var(--zz-e-7) var(--zz-e-5) 0; position: relative; font-weight: 600; font-size: 1.125rem; line-height: 1.4; transition: color var(--zz-rapido) ease; } .wp-block-details summary:hover { color: var(--wp--preset--color--terracota-profundo); } .wp-block-details summary::-webkit-details-marker { display: none; } .wp-block-details summary::after { content: ""; position: absolute; right: var(--zz-e-1); top: 50%; width: 10px; height: 10px; margin-top: -7px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg); transition: transform var(--zz-medio) var(--zz-curva); } .wp-block-details[open] summary::after { transform: rotate(-135deg); margin-top: -2px; } .wp-block-details > :not(summary) { margin: 0; padding-bottom: var(--zz-e-5); color: var(--zz-texto-suave); max-width: var(--zz-medida); } /* Equipo. */ .zz-centrado-vertical { align-items: center; gap: clamp(2rem, 5vw, 5rem); } .zz-equipo { gap: clamp(2rem, 5vw, 5rem); } .zz-equipo h2 { margin: var(--zz-e-5) 0 var(--zz-e-1); font-size: clamp(1.75rem, 3vw, 2.25rem); } /* Contacto. */ .zz-datos-contacto { display: grid; grid-template-columns: 1fr; gap: var(--zz-e-6) var(--zz-e-7); } @media (min-width: 760px) { .zz-datos-contacto { grid-template-columns: repeat(2, minmax(0, 1fr)); } .zz-datos-contacto > :nth-child(5) { grid-column: 1 / -1; } } /* Tres columnas: teléfono, WhatsApp y correo arriba; oficina y horario (a dos columnas) abajo. Sin huérfanos. */ @media (min-width: 1200px) { .zz-datos-contacto { grid-template-columns: repeat(3, minmax(0, 1fr)); } .zz-datos-contacto > :nth-child(5) { grid-column: span 2; } } .zz-datos-contacto > * { min-width: 0; margin: 0 !important; } .zz-datos-contacto h2 { font-family: var(--wp--preset--font-family--figtree); font-size: var(--wp--preset--font-size--x-small); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--zz-texto-suave); margin: 0 0 var(--zz-e-2) !important; } .zz-datos-contacto .zz-dato, .zz-datos-contacto p { margin: 0; font-size: 1.125rem; overflow-wrap: break-word; } .zz-datos-contacto .zz-dato a { text-decoration: none; } /* --------------------------------------------------------------------- 10. Viviendas --------------------------------------------------------------------- */ .zz-viviendas + .zz-viviendas { margin-top: var(--zz-seccion-compacta); } .zz-viviendas__titulo { margin: 0 0 var(--zz-tras-titulo); } .zz-viviendas + .wp-block-buttons { margin-top: var(--zz-e-7); } .zz-rejilla { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: var(--zz-e-5); } .zz-tarjeta__enlace { display: block; height: 100%; color: inherit; text-decoration: none; } .zz-tarjeta__enlace:hover { color: inherit; } .zz-tarjeta__foto { position: relative; aspect-ratio: 4 / 3; background: var(--wp--preset--color--arena); overflow: hidden; } .zz-tarjeta__foto img { width: 100%; height: 100%; object-fit: cover; display: block; transition: transform 0.6s var(--zz-curva); } .zz-tarjeta__enlace:hover img { transform: scale(1.03); } .zz-tarjeta__cuerpo { padding: var(--zz-e-4) var(--zz-e-5) var(--zz-e-5); } .zz-tarjeta__lugar { margin: 0; font-size: var(--wp--preset--font-size--x-small); font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--zz-texto-suave); } .zz-tarjeta__titulo { margin: var(--zz-e-2) 0 var(--zz-e-1); font-size: 1.125rem; font-weight: 600; line-height: 1.35; } .zz-tarjeta__datos { margin: 0; font-size: var(--wp--preset--font-size--small); color: var(--zz-texto-suave); } .zz-tarjeta__precio { margin: var(--zz-e-4) 0 0; font-family: var(--wp--preset--font-family--gloock); font-size: 1.625rem; line-height: 1; letter-spacing: -0.01em; } .zz-etiqueta { display: inline-flex; align-items: center; min-height: 28px; font-size: var(--wp--preset--font-size--x-small); font-weight: 600; line-height: 1; padding: 0 var(--zz-e-3); border-radius: var(--zz-r-full); } .zz-tarjeta__foto .zz-etiqueta { position: absolute; top: var(--zz-e-3); left: var(--zz-e-3); } .zz-etiqueta--vendida { background: var(--wp--preset--color--verde); color: #fff; } .zz-etiqueta--reservada { background: #fff; color: var(--wp--preset--color--tinta); box-shadow: inset 0 0 0 1px var(--zz-borde); } /* Ficha. */ .zz-vivienda { gap: clamp(2rem, 4vw, 4rem); } .zz-vivienda__foto img { border-radius: var(--zz-r-lg); } .zz-vivienda__titulo { font-size: clamp(2rem, 3.5vw, 2.75rem) !important; margin-top: 0; } .zz-volver { font-size: var(--wp--preset--font-size--small); margin-bottom: var(--zz-e-5) !important; } .zz-volver a { text-decoration: none; color: var(--zz-texto-suave); } .zz-volver a:hover { color: var(--wp--preset--color--terracota-profundo); } .zz-ficha__estado { margin: 0 0 var(--zz-e-4); } .zz-ficha__lugar { margin: var(--zz-e-2) 0 0; color: var(--zz-texto-suave); } .zz-ficha__precio { margin: var(--zz-e-2) 0 0; font-family: var(--wp--preset--font-family--gloock); font-size: clamp(2rem, 3.5vw, 2.75rem); line-height: 1.05; } .zz-ficha__subtitulo { font-family: var(--wp--preset--font-family--figtree); font-size: var(--wp--preset--font-size--x-small); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--zz-texto-suave); margin: var(--zz-e-6) 0 var(--zz-e-2); } .zz-ficha__tabla { margin: 0; } .zz-ficha__tabla > div { display: flex; justify-content: space-between; gap: var(--zz-e-4); padding: var(--zz-e-3) 0; border-bottom: 1px solid var(--zz-borde); } .zz-ficha__tabla dt { color: var(--zz-texto-suave); } .zz-ficha__tabla dd { margin: 0; font-weight: 600; text-align: right; } .zz-ficha__idealista { margin-top: var(--zz-e-5); } .zz-cert { display: inline-block; min-width: 2em; text-align: center; padding: 0.2em 0.55em; border-radius: var(--zz-r-xs); font-weight: 700; } .zz-cert--a { background: #1b7f3b; color: #fff; } .zz-cert--b { background: #3f8f2a; color: #fff; } .zz-cert--c { background: #9cc23b; color: #1c1a18; } .zz-cert--d { background: #f2d027; color: #1c1a18; } .zz-cert--e { background: #f0a02b; color: #1c1a18; } .zz-cert--f { background: #b8431b; color: #fff; } .zz-cert--g { background: #a61e24; color: #fff; } .zz-cert--tramite { background: var(--wp--preset--color--arena); color: var(--wp--preset--color--tinta); font-weight: 500; } .zz-vivienda__contenido { margin-block: var(--zz-e-7) !important; } .zz-vivienda__contenido .wp-block-gallery img { border-radius: var(--zz-r-sm); } .zz-contacto-vivienda h2 { margin: 0 0 var(--zz-e-3); font-size: clamp(1.75rem, 3vw, 2.25rem); } .zz-contacto-vivienda .wp-block-buttons { margin-top: var(--zz-e-5); } /* Botones de la ficha: icono + «WhatsApp» / icono + número (2026-10-18); los verbos los pone la frase de arriba. */ .zz-contacto-vivienda .wp-block-button__link { display: flex; align-items: center; justify-content: center; gap: var(--zz-e-2); } .zz-icono-contacto { flex: none; width: 1.25em; height: 1.25em; } .zz-contacto-vivienda__propietarios { margin: var(--zz-e-6) 0 0; padding-top: var(--zz-e-5); border-top: 1px solid rgb(28 26 24 / 0.12); font-size: var(--wp--preset--font-size--small); } /* Reseñas: carrusel de tarjetas. 3 a la vista en escritorio, 2 en tableta y 1 con la siguiente asomando en el móvil. */ .zz-resenas { display: grid; gap: var(--zz-e-6); } .zz-resenas__cabecera { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--zz-e-5); } .zz-resenas__cabecera h2 { margin: 0; } .zz-resenas__controles { display: flex; gap: var(--zz-e-2); } .zz-resenas__controles[hidden] { display: none; } .zz-resenas__boton { width: 48px; height: 48px; border-radius: 50%; border: 1px solid var(--zz-borde-campo); background: var(--wp--preset--color--blanco); color: var(--wp--preset--color--tinta); font-size: 20px; cursor: pointer; display: grid; place-items: center; transition: background 0.16s ease, transform 0.16s ease; } .zz-resenas__boton:hover:not(:disabled) { background: var(--wp--preset--color--arena); transform: translateY(-1px); } .zz-resenas__boton:disabled { opacity: 0.35; cursor: default; } .zz-resenas__pista { display: grid; grid-auto-flow: column; grid-auto-columns: calc((100% - 2 * var(--zz-e-5)) / 3); gap: var(--zz-e-5); align-items: stretch; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; padding-block: 2px; } .zz-resenas__pista::-webkit-scrollbar { display: none; } .zz-resena { scroll-snap-align: start; display: flex; flex-direction: column; gap: var(--zz-e-4); background: var(--wp--preset--color--blanco); border: 1px solid var(--zz-borde); border-radius: var(--zz-r-md); padding: var(--zz-e-6); box-sizing: border-box; } .zz-resena__nota { display: flex; gap: 2px; margin: 0; } .zz-resena__nota svg { width: 18px; height: 18px; fill: var(--wp--preset--color--terracota); } .zz-resena__texto { margin: 0; padding: 0; border: 0; } .zz-resena__texto p { margin: 0; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 7; line-clamp: 7; -webkit-box-orient: vertical; overflow: hidden; } .zz-resena.is-abierta .zz-resena__texto p { display: block; -webkit-line-clamp: unset; line-clamp: none; overflow: visible; } .zz-resena__mas { align-self: flex-start; min-height: 32px; padding: 0; border: 0; background: none; font: inherit; font-weight: 600; color: var(--wp--preset--color--terracota-profundo); cursor: pointer; text-decoration: underline; text-underline-offset: 4px; } .zz-resena__mas[hidden] { display: none; } .zz-resena__autor { margin: auto 0 0; padding-top: var(--zz-e-4); border-top: 1px solid var(--zz-borde); display: grid; gap: 2px; font-size: var(--wp--preset--font-size--small); } .zz-resena__autor span { color: var(--zz-texto-suave); } .zz-resenas__nota-legal { margin: 0; font-size: var(--wp--preset--font-size--small); color: var(--zz-texto-suave); } .zz-resenas__nota-legal a { color: var(--wp--preset--color--terracota-profundo); font-weight: 600; } @media (max-width: 1023px) { .zz-resenas__pista { grid-auto-columns: calc((100% - var(--zz-e-5)) / 2); } } @media (max-width: 781px) { .zz-resenas__pista { grid-auto-columns: 86%; gap: var(--zz-e-4); } .zz-resena { padding: var(--zz-e-5); } } /* --------------------------------------------------------------------- 11. Formularios Etiqueta siempre visible encima · campo de 48 px · error bajo el campo. --------------------------------------------------------------------- */ .zz-form { display: grid; gap: var(--zz-e-5); } .zz-form__campos { display: grid; gap: var(--zz-e-5) var(--zz-e-4); } @media (min-width: 700px) { .zz-form--valoracion .zz-form__campos, .zz-form--contacto .zz-form__campos { grid-template-columns: 1fr 1fr; } .zz-form--valoracion .zz-campo--ubicacion, .zz-form--valoracion .zz-campo--comentario, .zz-form--contacto .zz-campo--mensaje { grid-column: 1 / -1; } } .zz-campo label { display: block; font-size: var(--wp--preset--font-size--small); font-weight: 600; line-height: 1.3; margin-bottom: var(--zz-e-2); } .zz-opcional { font-weight: 400; color: var(--zz-texto-suave); } .zz-campo input:not([type="checkbox"]), .zz-campo select, .zz-campo textarea { width: 100%; box-sizing: border-box; min-height: 48px; padding: var(--zz-e-3) var(--zz-e-4); font: inherit; font-size: 1rem; line-height: 1.4; color: var(--wp--preset--color--tinta); background: #fff; border: 1px solid var(--zz-borde-campo); border-radius: var(--zz-r-sm); transition: border-color var(--zz-rapido) ease, box-shadow var(--zz-rapido) ease; } .zz-campo input:not([type="checkbox"]):hover, .zz-campo select:hover, .zz-campo textarea:hover { border-color: var(--wp--preset--color--tinta); } .zz-campo input:focus, .zz-campo select:focus, .zz-campo textarea:focus { outline: none; border-color: var(--wp--preset--color--tinta); box-shadow: 0 0 0 1px var(--wp--preset--color--tinta), 0 0 0 4px rgb(185 60 31 / 0.18); } .zz-campo select { appearance: none; padding-right: var(--zz-e-7); background-image: linear-gradient(45deg, transparent 50%, #6b635b 50%), linear-gradient(135deg, #6b635b 50%, transparent 50%); background-position: calc(100% - 22px) 52%, calc(100% - 16px) 52%; background-size: 6px 6px; background-repeat: no-repeat; } .zz-campo textarea { min-height: 120px; resize: vertical; } .zz-campo [aria-invalid="true"] { border-color: var(--wp--preset--color--rojo) !important; box-shadow: 0 0 0 1px var(--wp--preset--color--rojo); } .zz-campo__ayuda, .zz-campo__error { margin: var(--zz-e-2) 0 0; font-size: var(--wp--preset--font-size--x-small); line-height: 1.4; } .zz-campo__ayuda { color: var(--zz-texto-suave); } .zz-campo__error { color: var(--wp--preset--color--rojo); font-weight: 600; } .zz-campo__error:empty { display: none; } .zz-campo--privacidad { display: grid; grid-template-columns: auto 1fr; gap: var(--zz-e-1) var(--zz-e-3); align-items: start; } .zz-campo--privacidad input { width: 20px; height: 20px; margin: 0.1rem 0 0; accent-color: var(--wp--preset--color--terracota-profundo); cursor: pointer; } .zz-campo--privacidad label { font-weight: 400; font-size: var(--wp--preset--font-size--small); line-height: 1.45; margin: 0; cursor: pointer; } .zz-campo--privacidad .zz-campo__error { grid-column: 2; } .zz-form__enviar .wp-block-button__link { width: 100%; min-height: 52px; cursor: pointer; font-family: inherit; border: 0; } @media (min-width: 700px) { :is(.zz-form--valoracion, .zz-form--contacto) .zz-form__enviar .wp-block-button__link { width: auto; min-width: 220px; } } .zz-form__enviar .wp-block-button__link:disabled { opacity: 0.7; cursor: progress; transform: none; } .zz-form__nota { margin: 0; font-size: var(--wp--preset--font-size--x-small); color: var(--zz-texto-suave); text-align: center; } .zz-form__legal { margin: 0; font-size: var(--wp--preset--font-size--x-small); line-height: 1.5; color: var(--zz-texto-suave); } .zz-form__aviso { margin: 0; padding: var(--zz-e-3) var(--zz-e-4); border-radius: var(--zz-r-sm); font-size: var(--wp--preset--font-size--small); } .zz-form__aviso--error { background: #f8e9e9; color: var(--wp--preset--color--rojo); } .zz-form--ok { background: #e7f0eb; color: var(--wp--preset--color--verde); border-radius: var(--zz-r-sm); padding: var(--zz-e-5); } .zz-form__ok { margin: 0; font-weight: 600; } .zz-trampa { position: absolute !important; left: -9999px; width: 1px; height: 1px; overflow: hidden; } /* --------------------------------------------------------------------- 12. Pie --------------------------------------------------------------------- */ .zz-pie { background: var(--wp--preset--color--arena); padding-block: var(--zz-e-9) var(--zz-e-6); font-size: var(--wp--preset--font-size--small); } .zz-pie__columnas { gap: var(--zz-e-6) var(--zz-e-7); } /* Tablet (782-1023 px): con la marca al 40 %, la columna de contacto no llegaba a los 175 px del correo y lo partía. */ @media (min-width: 782px) and (max-width: 1023px) { .zz-pie__columnas > .wp-block-column:first-child { flex-basis: 30% !important; } } .zz-pie .zz-logo svg { height: 40px; } .zz-pie__lema { color: var(--zz-texto-suave); max-width: 28em; margin-top: var(--zz-e-4); } .zz-pie__titulo { font-family: var(--wp--preset--font-family--figtree); font-size: var(--wp--preset--font-size--x-small); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--zz-texto-suave); margin: 0 0 var(--zz-e-4); } .zz-pie p { margin: 0 0 var(--zz-e-2); } .zz-pie .zz-dato { overflow-wrap: break-word; } .zz-pie a:not(.zz-logo) { color: var(--wp--preset--color--tinta); text-decoration: none; } .zz-pie a:not(.zz-logo):hover { color: var(--wp--preset--color--terracota-profundo); text-decoration: underline; } .zz-pie__legal { margin-top: var(--zz-e-8) !important; padding-top: var(--zz-e-5); border-top: 1px solid var(--zz-borde-fuerte); color: var(--zz-texto-suave); } .zz-pie__legal p { margin: 0; } /* --------------------------------------------------------------------- 13. Barra fija del móvil --------------------------------------------------------------------- */ .zz-barra-movil { display: none; } @media (max-width: 781px) { .zz-barra-movil { display: flex; gap: var(--zz-e-2); position: fixed; left: 0; right: 0; bottom: 0; z-index: 60; padding: var(--zz-e-3) var(--zz-e-4) calc(var(--zz-e-3) + env(safe-area-inset-bottom)); /* Papel sólido, como la cabecera (2026-10-05): semitransparente se agrisaba sobre el bloque oscuro. */ background: var(--wp--preset--color--papel); box-shadow: 0 -6px 16px -10px rgb(0 0 0 / 0.18); border-top: 1px solid var(--zz-borde); } .zz-barra-movil a { flex: 1; min-height: 48px; display: inline-flex; align-items: center; justify-content: center; text-decoration: none; font-weight: 600; border-radius: var(--zz-r-sm); color: var(--wp--preset--color--tinta); box-shadow: inset 0 0 0 1px var(--zz-borde-campo); } .zz-barra-movil a.zz-barra-movil__principal { background: var(--wp--preset--color--terracota-profundo); color: #fff; box-shadow: none; } /* Sale al deslizar y solo cuando no hay otro botón que haga lo mismo a la vista (barra.js). Como se esconde al llegar al pie, el final de la página no necesita hueco extra. */ .zz-barra-movil { transition: transform 0.35s var(--zz-curva), visibility 0s; } .zz-barra-movil[data-oculta] { transform: translateY(110%); visibility: hidden; transition: transform 0.35s var(--zz-curva), visibility 0s 0.35s; } /* Portada de Inicio en el móvil: una sola acción. Llamar queda en la barra al deslizar. */ .zz-hero .zz-boton--llamar { display: none; } } /* --------------------------------------------------------------------- 14. Movimiento --------------------------------------------------------------------- */ .zz-reveal { opacity: 0; transform: translateY(16px); transition: opacity 0.7s ease, transform 0.7s var(--zz-curva); transition-delay: var(--zz-retardo, 0ms); } .zz-reveal.is-visible { opacity: 1; transform: none; } /* Pasos con arco (Inicio, 2026-10-05): el arco del puente une los pasos y se dibuja una vez al llegar. Lo monta zubizuri.js alrededor de la lista de siempre; sin JS se ve la lista normal. En el móvil el arco pasa a línea vertical. El texto no se atenúa: solo se encienden arco, puntos y números. */ .zz-pasos-arco + .wp-block-buttons { margin-top: var(--zz-e-7); } .zz-arco { display: none; position: relative; height: clamp(64px, 8vw, 110px); margin-bottom: var(--zz-e-3); } .zz-arco svg { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; } .zz-arco__base { fill: none; stroke: rgb(255 255 255 / 0.18); stroke-width: 1.5; } .zz-arco__trazo { fill: none; stroke: var(--wp--preset--color--terracota); stroke-width: 2; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 0; } .zz-arco__punto { position: absolute; box-sizing: border-box; width: 13px; height: 13px; margin: -6.5px 0 0 -6.5px; border-radius: 50%; background: var(--wp--preset--color--terracota); border: 2px solid var(--wp--preset--color--terracota); box-shadow: 0 0 0 6px rgb(216 74 43 / 0.18); } ol.zz-pasos.zz-pasos--arco { grid-template-columns: minmax(0, 1fr); position: relative; } ol.zz-pasos.zz-pasos--arco > li, ol.zz-pasos.zz-pasos--arco > li:last-child { border: 0; } @media (min-width: 782px) { .zz-arco { display: block; } ol.zz-pasos.zz-pasos--arco { grid-template-columns: repeat(var(--zz-n, 3), minmax(0, 1fr)); } ol.zz-pasos.zz-pasos--arco > li { padding-top: 0; } ol.zz-pasos.zz-pasos--arco > li::before { top: 0; } } @media (max-width: 781px) { /* Línea vertical que une los números; el número lleva el fondo del bloque para tapar la línea. */ ol.zz-pasos.zz-pasos--arco::before, ol.zz-pasos.zz-pasos--arco::after { content: ""; position: absolute; left: var(--zz-linea-x, 12px); top: var(--zz-linea-ini, 0); height: var(--zz-linea-alto, 0); width: 2px; margin-left: -1px; background: rgb(255 255 255 / 0.18); } ol.zz-pasos.zz-pasos--arco::after { background: var(--wp--preset--color--terracota); transform-origin: top; } ol.zz-pasos.zz-pasos--arco > li::before { z-index: 1; background: var(--wp--preset--color--tinta); padding-block: var(--zz-e-1); margin-top: calc(-1 * var(--zz-e-1)); } } /* Estado inicial, solo mientras espera a dibujarse. */ .zz-pasos-arco:not(.is-dibujado) .zz-arco__trazo { stroke-dashoffset: 1; } .zz-pasos-arco:not(.is-dibujado) .zz-arco__punto { background: var(--wp--preset--color--tinta); border-color: rgb(255 255 255 / 0.3); box-shadow: none; } .zz-pasos-arco:not(.is-dibujado) ol.zz-pasos > li::before { color: var(--zz-apagado-oscuro); } .zz-pasos-arco:not(.is-dibujado) ol.zz-pasos::after { transform: scaleY(0); } .zz-pasos-arco.is-dibujado .zz-arco__trazo { transition: stroke-dashoffset var(--zz-arco-dura, 1.4s) linear; } .zz-pasos-arco.is-dibujado ol.zz-pasos::after { transition: transform var(--zz-arco-dura, 1.4s) linear; } .zz-pasos-arco.is-dibujado .zz-arco__punto, .zz-pasos-arco.is-dibujado ol.zz-pasos > li::before { transition: background-color 0.35s ease, border-color 0.35s ease, box-shadow 0.35s ease, color 0.35s ease; transition-delay: var(--zz-llega, 0ms); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } .zz-reveal { opacity: 1; transform: none; } .wp-block-button__link:hover, .zz-tarjeta:hover { transform: none; } } /* --------------------------------------------------------------------- 15. Editor --------------------------------------------------------------------- */ .zz-aviso-editor { border: 1px dashed var(--zz-texto-suave); border-radius: var(--zz-r-sm); padding: var(--zz-e-4); color: var(--zz-texto-suave); font-size: 0.875rem; background: var(--wp--preset--color--arena); } .editor-styles-wrapper .zz-barra-movil { display: flex; position: static; } /* --------------------------------------------------------------------- 16. Un solo borde izquierdo Todas las secciones usan el mismo contenedor (1180 px). Lo que se lee de corrido se limita a un ancho cómodo, pero sin centrarse: arranca en el mismo borde que los títulos. --------------------------------------------------------------------- */ /* Todo lo estrecho que cuelga directamente de una sección arranca en el borde del contenedor. */ :is(.zz-seccion, .zz-portada).is-layout-constrained:not(.zz-centrado) > :is(ol.zz-pasos:not(.zz-pasos--cortos), .wp-block-details, .zz-caja-velada, .zz-caja-formulario, .zz-destacado, p, h1) { margin-left: var(--zz-borde-izq) !important; margin-right: auto !important; } :is(.zz-seccion, .zz-portada).is-layout-constrained:not(.zz-centrado) > :is(ol.zz-pasos:not(.zz-pasos--cortos), .wp-block-details, .zz-caja-velada, .zz-caja-formulario, p:not(.zz-entradilla):not(.zz-antetitulo)) { max-width: 820px; } .zz-destacado { max-width: 820px; } /* --------------------------------------------------------------------- 17. Ajustes de móvil (Equipo y portadas interiores) --------------------------------------------------------------------- */ @media (max-width: 781px) { /* Portadas interiores: el titular aparece antes. */ .zz-portada { padding-block: var(--zz-e-8) var(--zz-e-7); } /* Retratos cuadrados en el móvil: ahorran ~170 px por persona sin perder presencia. */ .zz-foto-retrato { aspect-ratio: 1 / 1 !important; max-width: none; } /* Foto, nombre, cargo y texto se leen como una unidad. */ .zz-equipo { gap: var(--zz-e-8); } .zz-equipo h2 { margin-top: var(--zz-e-4); } .zz-equipo .zz-antetitulo { margin-bottom: var(--zz-e-3) !important; } } /* Tableta: Sergio y Marta en paralelo desde 600 px (WordPress apila las columnas hasta 782 px y los retratos salían de 690 px). */ @media (min-width: 600px) { .zz-equipo.wp-block-columns { flex-wrap: nowrap !important; } .zz-equipo > .wp-block-column { flex-basis: 0 !important; flex-grow: 1; } } @media (min-width: 600px) and (max-width: 781px) { .zz-equipo { gap: var(--zz-e-6); } } @media (max-width: 599px) { .zz-foto-retrato { max-width: 420px; } } /* --------------------------------------------------------------------- 18. Interiores: rediseño del 2026-09-30 (maqueta aprobada por Guille) Ficha de vivienda, listado, Equipo y Contacto. Más contraste: fotos a sangre, bloques en tinta, fichas con filetes de 1 px y una sola acción terracota por pantalla. --------------------------------------------------------------------- */ .zz-sin-scroll { overflow: hidden; } .zz-etiqueta--en_venta { background: var(--wp--preset--color--arena); color: var(--wp--preset--color--tinta); } /* Galería de la ficha. */ .zz-galeria { display: grid; gap: var(--zz-e-3); margin-top: 0; } .zz-galeria__marco { position: relative; border-radius: var(--zz-r-lg); overflow: hidden; background: var(--wp--preset--color--arena); } .zz-galeria__pista { display: flex; margin: 0; padding: 0; list-style: none; aspect-ratio: 16 / 9; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; } .zz-galeria__pista::-webkit-scrollbar { display: none; } .zz-galeria__pista:focus-visible { outline: 2px solid var(--wp--preset--color--terracota-profundo); outline-offset: -4px; } .zz-galeria__foto { flex: 0 0 100%; margin: 0; scroll-snap-align: start; } .zz-galeria__abrir { display: block; width: 100%; height: 100%; padding: 0; border: 0; background: none; cursor: zoom-in; } .zz-galeria__abrir img { display: block; width: 100%; height: 100%; object-fit: cover; } .zz-galeria__flecha { position: absolute; top: 50%; transform: translateY(-50%); z-index: 2; width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgb(255 255 255 / 0.92); color: var(--wp--preset--color--tinta); display: grid; place-items: center; cursor: pointer; box-shadow: var(--zz-sombra-2); transition: background var(--zz-rapido) ease, opacity var(--zz-rapido) ease; } .zz-galeria__flecha:hover:not(:disabled) { background: #fff; } .zz-galeria__flecha:disabled { opacity: 0; pointer-events: none; } .zz-galeria__flecha[hidden] { display: none; } .zz-galeria__flecha svg { width: 22px; height: 22px; } .zz-galeria__flecha--ant { left: var(--zz-e-4); } .zz-galeria__flecha--sig { right: var(--zz-e-4); } .zz-galeria__contador { position: absolute; left: var(--zz-e-4); bottom: var(--zz-e-4); z-index: 2; margin: 0; padding: 6px 12px; border-radius: var(--zz-r-full); background: rgb(28 26 24 / 0.72); color: #fff; font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; pointer-events: none; } .zz-galeria__ampliar { position: absolute; right: var(--zz-e-4); bottom: var(--zz-e-4); z-index: 2; display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 0 14px; border: 0; border-radius: var(--zz-r-sm); background: rgb(255 255 255 / 0.92); color: var(--wp--preset--color--tinta); font: 600 14px/1 var(--wp--preset--font-family--figtree); cursor: pointer; } .zz-galeria__ampliar[hidden] { display: none; } .zz-galeria__ampliar svg { width: 16px; height: 16px; } .zz-galeria__miniaturas { display: flex; gap: var(--zz-e-2); overflow-x: auto; padding-bottom: 4px; scrollbar-width: thin; } .zz-galeria__mini { flex: 0 0 auto; width: 112px; aspect-ratio: 3 / 2; padding: 0; border: 2px solid transparent; border-radius: var(--zz-r-sm); overflow: hidden; background: none; cursor: pointer; opacity: 0.65; transition: opacity var(--zz-rapido) ease, border-color var(--zz-rapido) ease; } .zz-galeria__mini img { display: block; width: 100%; height: 100%; object-fit: cover; } .zz-galeria__mini:hover, .zz-galeria__mini[aria-current] { opacity: 1; } .zz-galeria__mini[aria-current] { border-color: var(--wp--preset--color--tinta); } @media (max-width: 781px) { .zz-galeria__marco { border-radius: var(--zz-r-md); } .zz-galeria__pista { aspect-ratio: 4 / 3; } .zz-galeria__flecha { width: 40px; height: 40px; } .zz-galeria__flecha--ant { left: var(--zz-e-2); } .zz-galeria__flecha--sig { right: var(--zz-e-2); } .zz-galeria__miniaturas { display: none; } } /* Visor a pantalla completa. */ .zz-visor { position: fixed; inset: 0; width: 100vw; height: 100dvh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: #111; color: #fff; } .zz-visor[open] { display: grid; grid-template-rows: auto 1fr; } .zz-visor::backdrop { background: rgb(0 0 0 / 0.9); } .zz-visor__barra { display: flex; align-items: center; justify-content: space-between; padding: calc(var(--zz-e-3) + env(safe-area-inset-top, 0px)) var(--zz-e-4) var(--zz-e-3); } .zz-visor__contador { margin: 0; font-weight: 600; font-variant-numeric: tabular-nums; } .zz-visor__cerrar, .zz-visor__flecha { width: 48px; height: 48px; border: 0; border-radius: 50%; background: rgb(255 255 255 / 0.14); color: #fff; display: grid; place-items: center; cursor: pointer; } .zz-visor__cerrar:hover, .zz-visor__flecha:hover { background: rgb(255 255 255 / 0.26); } .zz-visor__cerrar svg, .zz-visor__flecha svg { width: 22px; height: 22px; } .zz-visor__foto { margin: 0; min-height: 0; display: grid; place-items: center; padding: 0 80px calc(var(--zz-e-5) + env(safe-area-inset-bottom, 0px)); } .zz-visor__foto img { max-width: 100%; max-height: 100%; object-fit: contain; } .zz-visor__flecha { position: absolute; top: 50%; transform: translateY(-50%); } .zz-visor__flecha--ant { left: var(--zz-e-4); } .zz-visor__flecha--sig { right: var(--zz-e-4); } @media (max-width: 781px) { .zz-visor__foto { padding: 0 0 88px; } .zz-visor__flecha { top: auto; bottom: calc(var(--zz-e-5) + env(safe-area-inset-bottom, 0px)); transform: none; } .zz-visor__flecha--ant { left: calc(50% - 60px); } .zz-visor__flecha--sig { right: calc(50% - 60px); } } /* Cabecera de la ficha: estado, zona, título y precio; debajo, las cifras. */ .zz-vcab { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: var(--zz-e-5) var(--zz-e-7); margin-top: var(--zz-e-7) !important; } .zz-vcab__principal { flex: 1 1 30rem; min-width: 0; } .zz-vcab__estado { margin: 0 0 var(--zz-e-4); } .zz-vcab__lugar { margin: 0; font-size: var(--wp--preset--font-size--x-small); font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--zz-texto-suave); } .zz-vcab__titulo { margin: var(--zz-e-3) 0 0; font-size: clamp(2.25rem, 4.2vw, 3.5rem); line-height: 1.05; max-width: 18em; } .zz-vcab__precio { text-align: right; } .zz-vcab__importe { margin: 0; font-family: var(--wp--preset--font-family--gloock); font-size: clamp(2.25rem, 4vw, 3.25rem); line-height: 1; font-variant-numeric: tabular-nums; } .zz-vcab__m2 { margin: var(--zz-e-2) 0 0; font-size: var(--wp--preset--font-size--small); color: var(--zz-texto-suave); } @media (max-width: 781px) { .zz-vcab__precio { text-align: left; } } .zz-cifras { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; margin: var(--zz-e-6) 0 0; border-block: 1px solid var(--zz-borde); } .zz-cifras > div { display: flex; flex-direction: column-reverse; gap: 2px; padding: var(--zz-e-4) var(--zz-e-5); } .zz-cifras > div:first-child { padding-left: 0; } .zz-cifras > div + div { border-left: 1px solid var(--zz-borde); } .zz-cifras dt { font-size: var(--wp--preset--font-size--small); color: var(--zz-texto-suave); } .zz-cifras dd { margin: 0; font-size: 1.375rem; font-weight: 600; font-variant-numeric: tabular-nums; } @media (max-width: 600px) { .zz-cifras { grid-auto-flow: row; grid-template-columns: 1fr 1fr; } .zz-cifras > div { padding: var(--zz-e-3) 0; } .zz-cifras > div + div { border-left: 0; } .zz-cifras > div:nth-child(even) { padding-left: var(--zz-e-4); border-left: 1px solid var(--zz-borde); } .zz-cifras > div:nth-child(n+3) { border-top: 1px solid var(--zz-borde); } } /* Cuerpo de la ficha: descripción y características; al lado, el contacto fijo al bajar. */ .zz-vivienda-cuerpo { margin-top: var(--zz-e-7) !important; gap: clamp(2rem, 5vw, 5rem) !important; } .zz-vivienda-cuerpo .zz-vivienda__contenido { margin: 0 !important; } .zz-vivienda-cuerpo .zz-vivienda__contenido p { font-size: 1.125rem; line-height: 1.65; max-width: 62ch; } .zz-vivienda-cuerpo .zz-ficha__subtitulo { margin-top: var(--zz-e-7); } .zz-vivienda-aside { position: sticky; top: calc(var(--zz-cabecera-alto) + var(--zz-e-5)); } .zz-vivienda-aside .zz-contacto-vivienda { background: var(--wp--preset--color--blanco); border: 1px solid var(--zz-borde); border-radius: var(--zz-r-lg); padding: clamp(1.5rem, 3vw, 2rem); } .zz-vivienda-aside .zz-contacto-vivienda h2 { font-size: clamp(1.5rem, 2.4vw, 1.875rem); } .zz-vivienda-aside .wp-block-buttons { flex-direction: column; align-items: stretch; gap: var(--zz-e-4); } .zz-vivienda-aside .wp-block-button, .zz-vivienda-aside .wp-block-button__link { width: 100%; } @media (max-width: 781px) { .zz-vivienda-aside { position: static; } } /* Si no caben en una fila (móvil), la escala baja debajo; la etiqueta nunca parte palabras («energétic/o» a 320 px). */ .zz-ficha__energia { flex-wrap: wrap; } .zz-ficha__energia dt { overflow-wrap: normal; } .zz-ficha__energia dd { display: flex; align-items: center; gap: var(--zz-e-3); } .zz-ficha__energia .zz-cert { display: none; } .zz-escala { display: inline-flex; align-items: center; gap: 3px; } .zz-escala__letra { width: 24px; height: 24px; border-radius: 4px; display: grid; place-items: center; font: 700 13px/1 var(--wp--preset--font-family--figtree); opacity: 0.28; } .zz-escala__letra.is-activa { opacity: 1; transform: scale(1.18); box-shadow: 0 0 0 2px var(--wp--preset--color--blanco), 0 0 0 3px var(--wp--preset--color--tinta); } /* Listado: cabecera en tinta con pestañas; con una sola vivienda a la venta, tarjeta ancha. */ .zz-listado-cab { padding-block: clamp(3.5rem, 7vw, 6rem) var(--zz-e-8); } .zz-listado-cab.is-layout-constrained > :is(p, h1, nav) { margin-left: var(--zz-borde-izq) !important; margin-right: auto !important; } .zz-listado-cab h1 { color: #fff; font-size: clamp(3.5rem, 8vw, 6.5rem); line-height: 0.98; margin-top: var(--zz-e-3); } .zz-listado-cab .zz-antetitulo { color: rgb(255 255 255 / 0.82); } .zz-listado-cab .zz-entradilla { color: rgb(255 255 255 / 0.78); margin-top: var(--zz-e-4); } .zz-pestanas { display: inline-flex; gap: 4px; margin-top: var(--zz-e-7); padding: 4px; border-radius: var(--zz-r-sm); background: rgb(255 255 255 / 0.08); box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.14); } .zz-oscuro a.zz-pestanas__boton { display: inline-flex; align-items: center; gap: 10px; min-height: 48px; padding: 0 20px 0 24px; border-radius: calc(var(--zz-r-sm) - 4px); color: rgb(255 255 255 / 0.88); font-size: 1.0625rem; font-weight: 600; text-decoration: none; transition: background var(--zz-rapido) ease; } .zz-oscuro a.zz-pestanas__boton:hover { background: rgb(255 255 255 / 0.08); color: #fff; } .zz-oscuro a.zz-pestanas__boton[aria-current] { background: #fff; color: var(--wp--preset--color--tinta); } .zz-pestanas__boton span { min-width: 26px; height: 26px; padding: 0 8px; display: inline-grid; place-items: center; border-radius: var(--zz-r-full); background: rgb(255 255 255 / 0.16); color: #fff; font-size: 14px; font-variant-numeric: tabular-nums; } .zz-pestanas__boton[aria-current] span { background: var(--wp--preset--color--tinta); color: #fff; } @media (max-width: 480px) { .zz-pestanas { display: flex; } .zz-oscuro a.zz-pestanas__boton { flex: 1; justify-content: center; padding: 0 12px; } } /* Los títulos de cada lista se ocultan (quedan para lectores de pantalla) desde el primer pintado, no cuando arranca el script de las pestañas: si esperaban al script, la tarjeta destacada subía de golpe (CLS 0,025 en Lighthouse). */ :is(.zz-con-pestanas, :root:has([data-zz-pestanas])) .zz-listado-paneles .zz-viviendas__titulo { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .zz-listado-paneles > .zz-viviendas:focus { outline: none; } .zz-rejilla--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } @media (max-width: 700px) { .zz-rejilla--2 { grid-template-columns: 1fr; } } /* Rejilla según cuántas viviendas haya (2026-10-01), para que nunca quede un hueco a la derecha: 3 o más, tres por fila; 2, dos a media fila; 1, tarjeta ancha con la foto a la izquierda. En el móvil no cambia: una debajo de otra. */ @media (min-width: 701px) { .zz-rejilla:has(> .zz-tarjeta:nth-child(2):last-child) { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (min-width: 600px) { .zz-rejilla:has(> .zz-tarjeta:only-child) { grid-template-columns: minmax(0, 1fr); } .zz-rejilla > .zz-tarjeta:only-child { border-radius: var(--zz-r-lg); } .zz-rejilla > .zz-tarjeta:only-child .zz-tarjeta__enlace { display: grid; grid-template-columns: 7fr 5fr; } .zz-rejilla > .zz-tarjeta:only-child .zz-tarjeta__enlace > * { min-width: 0; } .zz-rejilla > .zz-tarjeta:only-child .zz-tarjeta__foto { aspect-ratio: 3 / 2; } .zz-rejilla > .zz-tarjeta:only-child .zz-tarjeta__foto .zz-etiqueta { top: var(--zz-e-4); left: var(--zz-e-4); } .zz-rejilla > .zz-tarjeta:only-child .zz-tarjeta__cuerpo { display: flex; flex-direction: column; justify-content: center; padding: clamp(1.5rem, 3vw, 2.5rem); } .zz-rejilla > .zz-tarjeta:only-child .zz-tarjeta__titulo { margin-top: var(--zz-e-3); font-family: var(--wp--preset--font-family--gloock); font-weight: 400; font-size: clamp(1.5rem, 2.4vw, 2rem); line-height: 1.15; } .zz-rejilla > .zz-tarjeta:only-child .zz-tarjeta__precio { font-size: clamp(2rem, 3vw, 2.5rem); } /* Llamada visible: toda la tarjeta es el enlace; el texto es decorativo para lectores de pantalla. */ .zz-rejilla > .zz-tarjeta:only-child .zz-tarjeta__cuerpo::after { content: "Ver la vivienda →"; content: "Ver la vivienda →" / ""; margin-top: var(--zz-e-5); font-weight: 600; color: var(--wp--preset--color--terracota-profundo); } } .zz-destacada { display: grid; grid-template-columns: 7fr 5fr; background: var(--wp--preset--color--blanco); border: 1px solid var(--zz-borde); border-radius: var(--zz-r-lg); overflow: hidden; } .zz-destacada > * { min-width: 0; } .zz-destacada__foto { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--wp--preset--color--arena); overflow: hidden; } .zz-destacada__foto img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--zz-curva); } .zz-destacada:hover .zz-destacada__foto img { transform: scale(1.03); } .zz-destacada__foto .zz-etiqueta { position: absolute; top: var(--zz-e-4); left: var(--zz-e-4); } .zz-destacada__num { position: absolute; right: var(--zz-e-4); bottom: var(--zz-e-4); padding: 6px 12px; border-radius: var(--zz-r-full); background: rgb(28 26 24 / 0.72); color: #fff; font-size: 13px; font-weight: 600; } .zz-destacada__datos { display: flex; flex-direction: column; gap: var(--zz-e-5); padding: clamp(1.5rem, 3vw, 2.5rem); } .zz-destacada__datos .zz-tarjeta__lugar { margin: 0; } .zz-destacada__titulo { margin: 0; font-family: var(--wp--preset--font-family--gloock); font-weight: 400; font-size: clamp(1.75rem, 2.6vw, 2.25rem); line-height: 1.1; } .zz-destacada__titulo a { color: inherit; text-decoration: none; } .zz-destacada__titulo a:hover { color: var(--wp--preset--color--terracota-profundo); } .zz-destacada__precio { margin: 0; font-family: var(--wp--preset--font-family--gloock); font-size: clamp(2.25rem, 3.5vw, 3rem); line-height: 1; font-variant-numeric: tabular-nums; } .zz-destacada__precio small { display: block; margin-top: var(--zz-e-2); font: 500 0.9375rem/1.3 var(--wp--preset--font-family--figtree); color: var(--zz-texto-suave); } .zz-destacada .zz-cifras { margin: 0; grid-auto-flow: row; grid-template-columns: 1fr 1fr; } .zz-destacada .zz-cifras > div { padding: var(--zz-e-3) 0; } .zz-destacada .zz-cifras > div + div { border-left: 0; } .zz-destacada .zz-cifras > div:nth-child(even) { padding-left: var(--zz-e-4); border-left: 1px solid var(--zz-borde); } .zz-destacada .zz-cifras > div:nth-child(n+3) { border-top: 1px solid var(--zz-borde); } .zz-destacada__energia { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: var(--zz-e-3); font-size: var(--wp--preset--font-size--small); color: var(--zz-texto-suave); } .zz-destacada .wp-block-buttons { margin-top: auto; gap: var(--zz-e-3); } @media (max-width: 900px) { .zz-destacada { grid-template-columns: 1fr; } } /* Bloque para propietarios (fondo tinta). */ .zz-captar { display: grid; grid-template-columns: 1fr 1fr; gap: var(--zz-e-7); align-items: center; } .zz-captar h2 { color: #fff; margin: var(--zz-e-3) 0 0; font-size: clamp(2.25rem, 4.4vw, 3.5rem); } .zz-captar .zz-antetitulo { color: rgb(255 255 255 / 0.82); } .zz-captar__form { display: flex; gap: var(--zz-e-2); padding: 6px; border-radius: var(--zz-r-sm); background: #fff; } .zz-captar__form:focus-within { box-shadow: 0 0 0 3px rgb(216 74 43 / 0.5); } .zz-captar__form input { flex: 1; min-width: 0; min-height: 48px; padding: 0 var(--zz-e-4); border: 0; background: transparent; color: var(--wp--preset--color--tinta); font: 16px var(--wp--preset--font-family--figtree); } .zz-captar__form input:focus { outline: none; } .zz-captar__form button { border: 0; cursor: pointer; white-space: nowrap; } :root .zz-captar__form button { border-radius: var(--zz-r-xs); } /* Concéntrico con la caja (12 − 6 px de relleno). */ .zz-captar__nota { margin: var(--zz-e-3) 0 0; color: rgb(255 255 255 / 0.72); font-size: var(--wp--preset--font-size--small); } @media (max-width: 781px) { .zz-captar { grid-template-columns: 1fr; gap: var(--zz-e-5); } /* En dos filas: caja de 16 px y botón concéntrico (16 − 8 px de relleno). */ .zz-captar__form { flex-direction: column; border-radius: var(--zz-r-md); padding: var(--zz-e-2); } :root .zz-captar__form button { border-radius: calc(var(--zz-r-md) - var(--zz-e-2)); } } /* Contacto: estado de la oficina, canales y horario. */ .zz-estado { display: inline-flex; align-items: flex-start; gap: 10px; max-width: 100%; margin: 0; padding: 8px 16px 8px 12px; border-radius: 20px; line-height: 1.4; background: var(--wp--preset--color--arena); font-size: 15px; font-weight: 600; } .zz-estado i { flex: 0 0 10px; width: 10px; height: 10px; margin-top: 0.4em; border-radius: 50%; background: var(--zz-texto-suave); } .zz-estado.is-abierto i { background: #2e9b5f; box-shadow: 0 0 0 4px rgb(46 155 95 / 0.18); } .zz-canales { display: grid; border-top: 1px solid var(--zz-borde); } a.zz-canal { display: grid; grid-template-columns: 44px 1fr auto; align-items: center; gap: var(--zz-e-4); padding-block: 18px; border-bottom: 1px solid var(--zz-borde); color: var(--wp--preset--color--tinta); text-decoration: none; transition: padding var(--zz-medio) var(--zz-curva); } a.zz-canal:hover { padding-left: var(--zz-e-2); color: var(--wp--preset--color--tinta); } .zz-canal svg { width: 22px; height: 22px; justify-self: center; } .zz-canal__etiqueta { display: block; font-size: 13px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; color: var(--zz-texto-suave); } .zz-canal__valor { display: block; font-family: var(--wp--preset--font-family--gloock); font-size: clamp(1.375rem, 2.2vw, 1.75rem); line-height: 1.2; } .zz-canal--email .zz-canal__valor { font-size: clamp(1.25rem, 2vw, 1.625rem); } .zz-canal__flecha { color: var(--wp--preset--color--terracota-profundo); font-size: 22px; transition: transform var(--zz-medio) var(--zz-curva); } a.zz-canal:hover .zz-canal__flecha { transform: translateX(4px); } @media (max-width: 400px) { a.zz-canal { grid-template-columns: 36px 1fr; gap: var(--zz-e-3); } .zz-canal__flecha { display: none; } .zz-canal--email .zz-canal__valor { font-size: 1.0625rem; } } .zz-horario { width: 100%; border-collapse: collapse; font-size: 15px; font-variant-numeric: tabular-nums; } .zz-horario th, .zz-horario td { padding: 10px 0; border: 0; border-bottom: 1px solid var(--zz-borde); text-align: left; vertical-align: top; font-weight: 400; } .zz-horario td { text-align: right; color: var(--zz-texto-suave); } .zz-horario tr.is-hoy th, .zz-horario tr.is-hoy td { font-weight: 600; color: var(--wp--preset--color--tinta); } .zz-horario tr.is-hoy th::after { content: "Hoy"; margin-left: 8px; font-size: 12px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--wp--preset--color--terracota-profundo); } /* Portadas con foto a sangre (bloque Portada con la clase «zz-portada-foto»). */ .wp-block-cover.zz-portada-foto { min-height: clamp(460px, 62vh, 640px) !important; align-items: flex-end; padding-block: var(--zz-e-8); color: #fff; } .wp-block-cover.zz-portada-foto > .wp-block-cover__background { opacity: 1 !important; background: linear-gradient(90deg, rgb(28 26 24 / 0.72) 0%, rgb(28 26 24 / 0.35) 45%, rgb(28 26 24 / 0) 75%), linear-gradient(180deg, rgb(28 26 24 / 0) 35%, rgb(28 26 24 / 0.7) 100%) !important; } /* El bloque Portada pone «width: auto» al contenido cuando va abajo a la izquierda: aquí ocupa todo el ancho y el grupo de dentro usa el mismo contenedor y el mismo borde izquierdo que el resto de secciones. */ .wp-block-cover:is(.zz-portada-foto, .zz-banda) { padding-inline: 0 !important; } .wp-block-cover:is(.zz-portada-foto, .zz-banda) .wp-block-cover__inner-container { width: 100% !important; max-width: none !important; margin: 0 !important; } /* El grupo de dentro lleva «has-global-padding», pero WordPress se lo anula por estar anidado en otro con relleno (main): sin esto el texto queda pegado al borde de la pantalla. Se le devuelve el margen lateral de la web. */ .wp-block-cover:is(.zz-portada-foto, .zz-banda) .wp-block-cover__inner-container > .has-global-padding { padding-left: var(--wp--style--root--padding-left) !important; padding-right: var(--wp--style--root--padding-right) !important; } .zz-portada-foto .zz-portada { padding-block: 0; } .zz-portada-foto h1 { color: #fff; font-size: clamp(3rem, 7vw, 6rem); line-height: 1; } .zz-portada-foto .zz-antetitulo { color: rgb(255 255 255 / 0.85); } .zz-portada-foto .zz-entradilla { color: rgb(255 255 255 / 0.9); max-width: 36em; margin-top: var(--zz-e-4); } @media (max-width: 781px) { .wp-block-cover.zz-portada-foto > .wp-block-cover__background { background: linear-gradient(180deg, rgb(28 26 24 / 0.25) 0%, rgb(28 26 24 / 0.82) 70%) !important; } } /* Equipo: Sergio en grande, Marta en ficha menor, compromisos y mosaico de la oficina. */ .zz-persona { gap: clamp(2rem, 6vw, 6rem) !important; align-items: flex-start !important; } .zz-persona h2 { font-size: clamp(2.5rem, 5vw, 4rem); margin: var(--zz-e-3) 0 var(--zz-e-5); } .zz-cita { position: relative; margin: 0 0 var(--zz-e-6); padding-left: 36px; max-width: 30ch; font-family: var(--wp--preset--font-family--gloock); font-size: clamp(1.375rem, 2.2vw, 1.75rem); line-height: 1.3; } .zz-cita::before { content: "«"; position: absolute; left: 0; top: -4px; color: var(--wp--preset--color--terracota); font-size: 1.5em; line-height: 1; } .zz-ficha-tabla { margin: 0; } .zz-ficha-tabla table { width: 100%; border-collapse: collapse; border-top: 1px solid var(--zz-borde); } .zz-ficha-tabla td { padding: 14px 0; border: 0; border-bottom: 1px solid var(--zz-borde); vertical-align: top; } .zz-ficha-tabla td:first-child { width: 36%; padding-right: var(--zz-e-4); color: var(--zz-texto-suave); font-size: var(--wp--preset--font-size--small); } .zz-ficha-tabla td:last-child { font-weight: 500; } .zz-ficha-tabla a { color: inherit; font-weight: 600; text-decoration: none; } .zz-ficha-tabla a:hover { color: var(--wp--preset--color--terracota-profundo); } .zz-marta { max-width: 820px; margin-left: auto !important; margin-right: var(--zz-borde-izq) !important; margin-top: clamp(3rem, 6vw, 5rem) !important; padding: var(--zz-e-5); gap: var(--zz-e-6) !important; align-items: center !important; background: var(--wp--preset--color--blanco); border: 1px solid var(--zz-borde); border-radius: var(--zz-r-lg); } .zz-marta h3 { font-family: var(--wp--preset--font-family--gloock); font-weight: 400; font-size: 2rem; margin: var(--zz-e-2) 0 var(--zz-e-3); } .zz-marta .zz-foto-pendiente { aspect-ratio: 1 !important; border-radius: var(--zz-r-md); } .zz-compromisos { margin-top: var(--zz-e-7) !important; gap: 0 !important; border-top: 1px solid rgb(255 255 255 / 0.14); } .zz-compromisos > .wp-block-column { padding: var(--zz-e-6) var(--zz-e-6) var(--zz-e-2) 0; } .zz-compromisos > .wp-block-column + .wp-block-column { padding-left: var(--zz-e-6); border-left: 1px solid rgb(255 255 255 / 0.14); } .zz-compromiso__cifra { margin: 0 0 var(--zz-e-3); font-family: var(--wp--preset--font-family--gloock); font-size: clamp(2.75rem, 5vw, 4.25rem); line-height: 1; color: #fff; } .zz-compromiso__unidad { font-size: 0.42em; margin-left: 4px; } .zz-compromisos h3 { margin: 0 0 var(--zz-e-2); font-family: var(--wp--preset--font-family--figtree); font-size: 1.0625rem; font-weight: 600; } .zz-compromisos p:not(.zz-compromiso__cifra) { color: rgb(255 255 255 / 0.72); max-width: 30ch; } @media (max-width: 781px) { .zz-compromisos > .wp-block-column, .zz-compromisos > .wp-block-column + .wp-block-column { padding: var(--zz-e-5) 0; border-left: 0; border-bottom: 1px solid rgb(255 255 255 / 0.14); } .zz-marta .zz-foto-pendiente { max-width: 200px; } } .zz-mosaico { position: relative; display: grid !important; grid-template-columns: 7fr 5fr; grid-template-rows: 1fr 1fr; gap: var(--zz-e-4); aspect-ratio: 16 / 9; } .zz-mosaico > * { margin: 0 !important; min-height: 0; } .zz-mosaico > .wp-block-image { height: 100%; border-radius: var(--zz-r-lg); overflow: hidden; } .zz-mosaico > .wp-block-image img { display: block; width: 100%; height: 100%; object-fit: cover; transition: transform 0.6s var(--zz-curva); } .zz-mosaico > .wp-block-image:hover img { transform: scale(1.03); } .zz-mosaico > .wp-block-image:first-child { grid-row: span 2; } .zz-mosaico__tarjeta { display: flex; flex-direction: column; justify-content: center; padding: var(--zz-e-6) !important; background: var(--wp--preset--color--blanco); border: 1px solid var(--zz-borde); border-radius: var(--zz-r-lg); } .zz-mosaico__tarjeta p { margin: 0 0 var(--zz-e-3); } .zz-mosaico__tarjeta h3 { font-family: var(--wp--preset--font-family--gloock); font-weight: 400; font-size: 1.875rem; margin: 0 0 var(--zz-e-3); } @media (max-width: 781px) { .zz-mosaico { grid-template-columns: 1fr; grid-template-rows: none; aspect-ratio: auto; } .zz-mosaico > .wp-block-image { aspect-ratio: 4 / 3; } .zz-mosaico > .wp-block-image:first-child { grid-row: auto; } .zz-mosaico > .wp-block-image:nth-child(3) { display: none; } } /* Contacto: portada a dos columnas, banda con la dirección y formulario en tarjeta. */ .zz-contacto-portada { align-items: center !important; gap: clamp(2rem, 6vw, 5rem) !important; } .zz-contacto-portada h1 { font-size: clamp(3rem, 6.4vw, 5.5rem); margin: var(--zz-e-4) 0 var(--zz-e-6); } .wp-block-image.zz-foto--vertical img { aspect-ratio: 4 / 5; object-fit: cover; } @media (max-width: 781px) { .wp-block-image.zz-foto--vertical img { aspect-ratio: 4 / 3; } .zz-contacto-portada > .wp-block-column:last-child { order: -1; } } .wp-block-cover.zz-banda { min-height: clamp(420px, 56vh, 560px) !important; padding-block: var(--zz-e-8); } /* La tarjeta arranca en el borde común (como en la maqueta), no centrada. */ .zz-banda__tarjeta { margin-left: var(--zz-borde-izq) !important; margin-right: auto !important; width: min(460px, 100%); padding: clamp(1.5rem, 3vw, 2.5rem) !important; background: var(--wp--preset--color--blanco); border-radius: var(--zz-r-lg); box-shadow: var(--zz-sombra-3); color: var(--wp--preset--color--tinta); } .zz-banda__tarjeta h2 { font-size: clamp(1.875rem, 3vw, 2.5rem); margin: var(--zz-e-2) 0 var(--zz-e-2); } .zz-banda__tarjeta .zz-horario { margin-block: var(--zz-e-5); } .zz-aviso-valorar { padding: var(--zz-e-5) !important; background: var(--wp--preset--color--blanco); border: 1px solid var(--zz-borde); border-radius: var(--zz-r-md); } .zz-aviso-valorar p { margin: 0 0 var(--zz-e-2); } /* --------------------------------------------------------------------- 19. Espaciado: botones y secciones (revisión del 2026-09-30) --------------------------------------------------------------------- */ /* Los grupos de botones que pinta el plugin (listado, ficha) no siempre traen el CSS del bloque «Botones»: base propia. */ .wp-block-buttons { display: flex; flex-wrap: wrap; align-items: center; gap: var(--zz-e-3); } /* Móvil: dos botones juntos van uno debajo de otro, a todo el ancho y con 16 px entre ellos. */ @media (max-width: 600px) { :is(.zz-botones, .wp-block-buttons):has(> :is(.wp-block-button, .zz-boton, .wp-block-buttons) ~ :is(.wp-block-button, .zz-boton, .wp-block-buttons)) { flex-direction: column; align-items: stretch !important; gap: var(--zz-e-4) !important; } :is(.zz-botones, .wp-block-buttons):has(> :is(.wp-block-button, .zz-boton, .wp-block-buttons) ~ :is(.wp-block-button, .zz-boton, .wp-block-buttons)) :is(.wp-block-buttons, .wp-block-button, .wp-block-button__link) { width: 100%; margin: 0; } :is(.zz-botones, .wp-block-buttons):has(> :is(.wp-block-button, .zz-boton, .wp-block-buttons) ~ :is(.wp-block-button, .zz-boton, .wp-block-buttons)) .wp-block-button__link { box-sizing: border-box; justify-content: center; text-align: center; } } /* Secciones del mismo fondo seguidas: la segunda no repite el aire de arriba. Antes solo se hacía entre secciones sin modificador y en Vender quedaban 160-256 px de blanco. Papel → blanco sí se distingue: ahí cada sección conserva su aire (el título de «Pide tu valoración gratis» quedaba pegado al borde, 2026-10-05). */ .zz-seccion:not(.zz-oscuro, .zz-seccion--arena, .zz-seccion--acento, .zz-seccion--velada, .zz-seccion--blanca, .zz-seccion--arriba) + .zz-seccion:not(.zz-oscuro, .zz-seccion--arena, .zz-seccion--acento, .zz-seccion--velada, .zz-seccion--blanca) { padding-top: 0; } .zz-seccion--blanca + .zz-seccion--blanca { padding-top: 0; } .zz-seccion--arena + .zz-seccion--arena { padding-top: 0; } /* Contacto: tras la primera sección viene la franja con foto; necesita el aire completo abajo. */ .zz-seccion--arriba:has(.zz-contacto-portada) { padding-bottom: var(--zz-seccion); } /* Una sección que se queda sin nada (p. ej. «Otras viviendas» cuando solo hay una a la venta) no deja un hueco en blanco. */ .zz-seccion:not(:has(*)) { display: none; } /* Ficha → «Otras viviendas»: el mismo aire que entre dos secciones del mismo color (64 px en móvil, 128 en escritorio), contando los 32 px de abajo de la ficha y los 24 px de separación entre bloques. */ .zz-seccion--arriba + .zz-seccion--compacta { padding-top: calc(var(--zz-seccion) - var(--zz-e-6) - 24px); } /* Un tramo horario («16:30–20:00») no se parte en dos líneas por el guion. */ .zz-sin-corte { white-space: nowrap; } /* Si la página acaba en arena, igual que el pie, un filete marca dónde empieza el pie: sin él, los dos fondos se funden en un bloque de unos 150 px sin separación (Contacto, Gracias). */ body:has(main .zz-seccion--arena:last-child) .zz-pie { border-top: 1px solid var(--zz-borde); } /* Fotos de portada en AVIF (2026-10-01): menos de la mitad de peso (escritorio 158 KB, móvil 56 KB). Las precarga el tema; el navegador que no entiende AVIF o image-set se queda con la JPG/WebP de arriba. */ @supports (background-image: image-set(url("x.avif") type("image/avif"))) { .zz-video-fondo[style*="--zz-poster-movil-avif"] { background-image: image-set(var(--zz-poster-movil-avif) type("image/avif"), var(--zz-poster-movil) type("image/jpeg")); } .zz-hero-imagen { background-image: image-set(url("../media/hero-movil.avif") type("image/avif"), url("../media/hero-movil.jpg") type("image/jpeg")); } @media (min-width: 782px) { .zz-video-fondo[style*="--zz-poster-avif"] { background-image: image-set(var(--zz-poster-avif) type("image/avif"), var(--zz-poster) type("image/webp")); } .zz-hero-imagen { background-image: image-set(url("../media/hero-1920.avif") type("image/avif"), url("../media/hero-1920.webp") type("image/webp")); } } } /* Pasos con la oficina (Vender, 2026-10-05): la lista larga del bloque oscuro lleva al lado una foto fija («Los 6 pasos, desde la misma oficina») y una línea que une los números y se rellena al bajar. Lo monta zubizuri.js alrededor de la lista de siempre; sin JS (y en el editor) se ve la lista normal. La línea va ligada al scroll solo con CSS donde el navegador lo permite; donde no, se ve entera y quieta. La foto solo aparece en escritorio (≥ 1024 px): en el móvil no cabe al lado y debajo no aporta. FOTO: la oficina real (pared terracota, puerta corredera y mesa redonda; IMG_20260925_101801 recortada a 3:4), en assets/media/oficina.avif: 800 × 1066, AVIF de una sola pieza (66 KB). Solo se descarga en escritorio. */ .zz-pasos-oficina { display: grid; gap: var(--zz-e-8); align-items: start; } .zz-pasos-oficina > ol.zz-pasos { max-width: 820px; } .zz-pasos-oficina + .wp-block-buttons { margin-top: var(--zz-e-7); } ol.zz-pasos.zz-pasos--linea { position: relative; view-timeline-name: --zz-pasos-linea; --zz-sep: linear-gradient(rgb(255 255 255 / 0.14), rgb(255 255 255 / 0.14)); } /* Los separadores empiezan después de los números, para que la línea vertical no los cruce. */ ol.zz-pasos.zz-pasos--linea > li { border: 0; background: var(--zz-sep) 4rem 0 / calc(100% - 4rem) 1px no-repeat; } ol.zz-pasos.zz-pasos--linea > li:last-child { border: 0; background: var(--zz-sep) 4rem 0 / calc(100% - 4rem) 1px no-repeat, var(--zz-sep) 4rem 100% / calc(100% - 4rem) 1px no-repeat; } ol.zz-pasos.zz-pasos--linea::before, ol.zz-pasos.zz-pasos--linea::after { content: ""; position: absolute; left: var(--zz-linea-x, 12px); top: var(--zz-linea-ini, 0); height: var(--zz-linea-alto, 0); width: 2px; margin-left: -1px; background: rgb(255 255 255 / 0.18); } ol.zz-pasos.zz-pasos--linea::after { background: var(--wp--preset--color--terracota); transform-origin: top; } /* El número, centrado en una columna fija para que la línea pase por el medio de todos, lleva el fondo del bloque para taparla. */ ol.zz-pasos.zz-pasos--linea > li::before { width: 0.8em; text-align: center; z-index: 1; background: var(--wp--preset--color--tinta); padding-block: var(--zz-e-1); margin-top: calc(-1 * var(--zz-e-1)); } @supports (animation-timeline: view()) { @media (prefers-reduced-motion: no-preference) { /* Punto de lectura: al 55 % de la pantalla. La línea llega a cada número cuando este pasa por ahí, y entonces se enciende. */ ol.zz-pasos.zz-pasos--linea::after { animation: zz-linea linear both; animation-timeline: --zz-pasos-linea; animation-range: cover calc(45vh + var(--zz-linea-ini, 0px)) cover calc(45vh + var(--zz-linea-ini, 0px) + var(--zz-linea-alto, 0px)); } ol.zz-pasos.zz-pasos--linea > li::before { animation: zz-numero linear both; animation-timeline: --zz-pasos-linea; animation-range: cover calc(45vh + var(--zz-y, 0px) - 1px) cover calc(45vh + var(--zz-y, 0px)); } } } @keyframes zz-linea { from { transform: scaleY(0); } to { transform: scaleY(1); } } @keyframes zz-numero { from { color: var(--zz-apagado-oscuro); } to { color: var(--wp--preset--color--terracota); } } .zz-pasos-oficina__foto { display: none; } @media (min-width: 1024px) { .zz-pasos-oficina { grid-template-columns: minmax(0, 1fr) minmax(280px, 360px); gap: var(--zz-e-9); } .zz-pasos-oficina__foto { display: flex; align-items: flex-end; position: sticky; top: calc(var(--zz-cabecera-alto) + var(--zz-e-6)); aspect-ratio: 3 / 4; margin: 0; padding: var(--zz-e-5); border-radius: var(--zz-r-lg); overflow: hidden; background: linear-gradient(to top, rgb(28 26 24 / 0.82), rgb(28 26 24 / 0) 55%), url("../media/oficina.avif") center / cover no-repeat, var(--wp--preset--color--terracota-oscuro); } .zz-pasos-oficina__foto figcaption { font-size: 0.9375rem; line-height: 1.5; color: rgb(255 255 255 / 0.88); } .zz-pasos-oficina__foto strong { display: block; color: #fff; font-weight: 600; } } /* --------------------------------------------------------------------- Revisión de diseño (2026-10-05). Ver proyectos/ficha-y-web/trabajo/revision-diseno-2026-10-05.md. Lo de contenido (clases nuevas en los bloques) se puso en Raiola el mismo día. --------------------------------------------------------------------- */ /* Inicio · Qué hacemos: un dato encima de cada servicio, con filete. */ .zz-tres .zz-servicio__dato { margin: 0 0 var(--zz-e-3); font-family: var(--wp--preset--font-family--gloock); font-size: clamp(1.625rem, 2.4vw, 2rem); line-height: 1.05; color: var(--wp--preset--color--terracota-profundo); } .zz-tres:has(.zz-servicio__dato) > .wp-block-column { padding-top: var(--zz-e-5); border-top: 1px solid var(--zz-borde); } /* Vender · Por qué vender: «11 años» como cifra. */ .zz-puntos .zz-punto__cifra { margin: 0 0 var(--zz-e-2); font-family: var(--wp--preset--font-family--gloock); font-size: clamp(2.5rem, 4vw, 3.25rem); line-height: 1; color: var(--wp--preset--color--terracota-profundo); } /* Vender · El precio marca el plazo: las cifras de Equipo en versión clara, a la derecha del texto. */ .zz-plazo { gap: clamp(2rem, 5vw, 5rem) !important; } .zz-plazo .zz-destacado { max-width: none; } .zz-compromisos--claro { margin-top: 0 !important; border-top-color: var(--zz-borde); } .zz-compromisos--claro > .wp-block-column { padding: var(--zz-e-6) var(--zz-e-5) var(--zz-e-2) 0; } .zz-compromisos--claro > .wp-block-column + .wp-block-column { padding-left: var(--zz-e-5); border-left-color: var(--zz-borde); } .zz-compromisos--claro .zz-compromiso__cifra { color: var(--wp--preset--color--tinta); font-size: clamp(2.5rem, 4.5vw, 3.75rem); } .zz-compromisos--claro h3 { color: var(--wp--preset--color--tinta); font-size: 1rem; } .zz-compromisos--claro p:not(.zz-compromiso__cifra) { color: var(--zz-texto-suave); font-size: 0.9375rem; } @media (max-width: 781px) { .zz-compromisos--claro > .wp-block-column, .zz-compromisos--claro > .wp-block-column + .wp-block-column { padding: var(--zz-e-5) 0; border-bottom-color: var(--zz-borde); } } /* Vender · ¿No vives en Bilbao?: a todo el ancho, título a la izquierda y texto a la derecha. */ :is(.zz-seccion, .zz-portada).is-layout-constrained > .zz-caja-velada.zz-caja-ancha { max-width: var(--zz-contenedor) !important; } /* La regla general la limita a 820 px. */ @media (min-width: 782px) { .zz-caja-ancha { display: grid; grid-template-columns: 5fr 7fr; gap: clamp(1.5rem, 5vw, 5rem); align-items: start; } .zz-caja-ancha > * { max-width: none !important; margin: 0 !important; } } /* Vender · Formulario final: garantías a la izquierda, formulario a la derecha y menos hueco encima. */ .zz-seccion:has(+ .zz-form-final) { padding-bottom: var(--zz-e-8); } .zz-seccion.zz-form-final { padding-top: var(--zz-e-8); } .zz-form-final > .wp-block-columns { gap: clamp(2rem, 5vw, 5rem); } .zz-form-final .zz-caja-formulario { max-width: none; } .zz-garantias { list-style: none; margin: var(--zz-e-6) 0 0; padding: 0; display: grid; gap: var(--zz-e-4); } .zz-garantias li { position: relative; padding-left: 40px; color: var(--zz-texto-suave); font-size: 0.9375rem; } .zz-garantias li strong { display: block; color: var(--wp--preset--color--tinta); font-size: 1rem; } .zz-garantias li::before { content: ""; position: absolute; left: 0; top: 0; width: 28px; height: 28px; background: var(--wp--preset--color--terracota-profundo); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.8'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center / contain no-repeat; } /* Formulario de valoración: los opcionales, plegados en «Añadir más datos» (funciona sin JS). */ .zz-form__mas { border: 1px solid var(--zz-borde); border-radius: var(--zz-r-sm); } .zz-form__mas > summary { display: flex; justify-content: space-between; align-items: center; gap: var(--zz-e-3); min-height: 48px; padding: var(--zz-e-3) var(--zz-e-4); cursor: pointer; list-style: none; font-weight: 600; color: var(--wp--preset--color--terracota-profundo); } .zz-form__mas > summary::-webkit-details-marker { display: none; } .zz-form__mas > summary::after { content: "+"; font-size: 1.25rem; line-height: 1; } .zz-form__mas[open] > summary::after { content: "–"; } .zz-form__mas > summary:focus-visible { outline: 2px solid var(--wp--preset--color--terracota-profundo); outline-offset: 2px; border-radius: var(--zz-r-sm); } .zz-form__mas > .zz-form__campos { padding: var(--zz-e-2) var(--zz-e-4) var(--zz-e-4); } /* Tarjetas vendidas: el dato de la venta en el hueco del precio (tarjeta) o abajo (tarjeta ancha). */ .zz-tarjeta__vendida { margin: var(--zz-e-4) 0 0; font-family: var(--wp--preset--font-family--gloock); font-size: 1.625rem; line-height: 1; color: var(--wp--preset--color--terracota); } .zz-tarjeta__vendida small { display: block; margin-top: 4px; font: 500 0.875rem/1.3 var(--wp--preset--font-family--figtree); color: var(--zz-texto-suave); } .zz-venta-dato { margin-top: auto; padding-top: var(--zz-e-5); border-top: 1px solid var(--zz-borde); } .zz-venta-dato__cifra { margin: 0; font-family: var(--wp--preset--font-family--gloock); font-size: clamp(2.25rem, 4vw, 3rem); line-height: 1; color: var(--wp--preset--color--terracota); } .zz-venta-dato__texto { margin: var(--zz-e-2) 0 0; color: var(--zz-texto-suave); font-size: 0.9375rem; } .zz-destacada .zz-venta-dato + .wp-block-buttons, .zz-destacada .wp-block-buttons:has(+ .zz-venta-dato) { margin-top: 0; } /* Vender usa la tarjeta normal a todo el ancho (una sola vendida): el dato, abajo y en grande, con filete. */ @media (min-width: 600px) { .zz-rejilla > .zz-tarjeta--vendida:only-child .zz-tarjeta__cuerpo { justify-content: flex-start; } .zz-rejilla > .zz-tarjeta--vendida:only-child .zz-tarjeta__cuerpo::after { order: 1; margin-bottom: var(--zz-e-6); } .zz-rejilla > .zz-tarjeta:only-child .zz-tarjeta__vendida { order: 2; margin-top: auto; padding-top: var(--zz-e-5); border-top: 1px solid var(--zz-borde); font-size: clamp(2.25rem, 4vw, 3rem); } .zz-rejilla > .zz-tarjeta:only-child .zz-tarjeta__vendida small { margin-top: var(--zz-e-2); font-size: 0.9375rem; } } /* Ficha de una vendida: capta propietarios con el campo del listado. */ .zz-contacto-vivienda--vendida .zz-venta-dato__cifra { font-size: clamp(2rem, 3vw, 2.5rem); } .zz-contacto-vivienda--vendida h2 { margin: var(--zz-e-6) 0 var(--zz-e-2); padding-top: var(--zz-e-5); border-top: 1px solid var(--zz-borde); } .zz-contacto-vivienda--vendida > p:not([class]) { color: var(--zz-texto-suave); } .zz-contacto-vivienda--vendida .zz-captar__form { flex-direction: column; margin-top: var(--zz-e-4); padding: var(--zz-e-2); border: 1px solid var(--zz-borde-campo); border-radius: var(--zz-r-md); } :root .zz-contacto-vivienda--vendida .zz-captar__form button { border-radius: calc(var(--zz-r-md) - var(--zz-e-2)); } .zz-contacto-vivienda--vendida .zz-captar__nota { color: var(--zz-texto-suave); } /* Equipo: mientras no haya retrato, no se enseña la caja vacía; el texto ocupa el ancho. Vuelven solos al subirlos. */ .wp-block-columns > .wp-block-column:has(> .zz-foto-pendiente) { display: none; } .wp-block-columns:has(> .wp-block-column > .zz-foto-pendiente) > .wp-block-column { flex-basis: 100% !important; }