/* Capa de movimiento — tema rasterizar-ligero. Aditivo: no toca nada del tema. Duraciones y curvas según el estándar de animación de Emil Kowalski: la interfaz por debajo de 300 ms, curvas fuertes, y el hover solo con ratón. */ :root { --rz-out: cubic-bezier(0.23, 1, 0.32, 1); /* ease-out fuerte, para entradas */ --rz-hover: 180ms; /* el hover se ve decenas de veces al día */ --rz-press: 140ms; } /* Revelado al hacer scroll. La clase html.rz-motion la pone un script en ; si rz-motion.js no llega en 4 s, ese mismo script la quita y nada queda oculto. */ html.rz-motion :is(.rz-hero, .rz-hero-image, .rz-capabilities > *, .rz-section-heading, .rz-home-services .rz-card, .rz-work-grid .rz-work-card, .rz-about, .rz-faq, .rz-cta):not(.rz-in) { opacity: 0; } html.rz-motion :is(.rz-hero, .rz-hero-image, .rz-capabilities > *, .rz-section-heading, .rz-home-services .rz-card, .rz-work-grid .rz-work-card, .rz-about, .rz-faq, .rz-cta).rz-in { animation: rz-reveal 400ms var(--rz-out) backwards; animation-delay: calc(var(--rz-i, 0) * 60ms); } @keyframes rz-reveal { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } } /* Cabecera pegajosa: se compacta al bajar, se oculta al seguir bajando, reaparece al subir */ html.rz-motion header.wp-block-template-part { position: sticky; top: var(--wp-admin--admin-bar--height, 0px); z-index: 50; background: #fff; transition: transform 260ms var(--rz-out), box-shadow 260ms var(--rz-out); } html.rz-motion header.wp-block-template-part.rz-compact { box-shadow: 0 8px 24px rgba(0,0,0,.08); } html.rz-motion header.wp-block-template-part.rz-hide { transform: translateY(-100%); box-shadow: none; } /* Respuesta al pulsar: se aplica en cualquier dispositivo, también al tocar */ .rz-card, .rz-work-card { transition: transform var(--rz-press) var(--rz-out), box-shadow var(--rz-press) var(--rz-out); } .wp-block-button__link, .rz-product-ask, .rz-text-link a { transition: transform var(--rz-press) var(--rz-out), background-color var(--rz-hover) ease, color var(--rz-hover) ease, border-color var(--rz-hover) ease; } .wp-block-button__link:active, .rz-product-ask:active, .rz-card:active, .rz-work-card:active { transform: scale(.97); } .rz-card .rz-number { transition: color var(--rz-hover) ease, transform var(--rz-press) var(--rz-out); } .rz-card h3 { position: relative; display: inline-block; } .rz-card h3::after { content: ""; position: absolute; left: 0; bottom: -4px; width: 100%; height: 2px; background: currentColor; transform: scaleX(0); transform-origin: left; transition: transform 220ms var(--rz-out); } /* Tarjetas de trabajo de la portada: clicables hacia /trabajos/ */ .rz-work-card.rz-clickable { cursor: pointer; } .rz-work-card .rz-work-link { color: inherit; text-decoration: none; } .rz-work-card .rz-work-link::after { content: " →"; opacity: 0; transition: opacity var(--rz-hover) ease; } .rz-work-card .rz-picture { position: relative; overflow: hidden; } .rz-work-card .rz-picture::after { content: ""; position: absolute; inset: 0; background: linear-gradient(115deg, transparent 40%, rgba(255,255,255,.35) 50%, transparent 60%); transform: translateX(-120%); transition: transform 420ms var(--rz-out); pointer-events: none; } .rz-work-card img { transition: transform 280ms var(--rz-out); } /* Los efectos de hover solo donde hay ratón de verdad. En pantallas táctiles el navegador dispara un hover falso al tocar y el estado se queda pegado hasta que tocas otra cosa. */ @media (hover: hover) and (pointer: fine) { .rz-card:hover, .rz-card:focus-within { transform: translateY(-6px); } .rz-card:hover .rz-number { color: var(--rz-marino); transform: scale(1.08); } .rz-card:hover h3::after { transform: scaleX(1); } .rz-work-card:hover { transform: translateY(-8px); box-shadow: 0 20px 40px rgba(0,0,0,.18); } .rz-work-card:hover .rz-work-link::after { opacity: 1; } .rz-work-card:hover .rz-picture::after { transform: translateX(120%); } .rz-work-card:hover img { transform: scale(1.06); } } /* CTA: una sola llamada de atención al botón de WhatsApp al llegar */ html.rz-motion .rz-cta .wp-block-button__link.rz-pulse-once { animation: rz-pulse 900ms var(--rz-out) 1; } @keyframes rz-pulse { 0% { box-shadow: 0 0 0 0 rgba(255,172,8,.45); } 70% { box-shadow: 0 0 0 16px rgba(255,172,8,0); } 100% { box-shadow: 0 0 0 0 rgba(255,172,8,0); } } /* Ficha de servicio a la que se llegó desde un enlace con ancla */ .rz-destacado { animation: rz-destacar 1.6s var(--rz-out); } @keyframes rz-destacar { 0%, 20% { box-shadow: 0 0 0 2px var(--rz-ambar); } 100% { box-shadow: 0 0 0 2px transparent; } } /* Menos movimiento, no cero: se conservan los cambios de color y opacidad, se quitan los desplazamientos. */ @media (prefers-reduced-motion: reduce) { html.rz-motion :is(.rz-hero, .rz-hero-image, .rz-capabilities > *, .rz-section-heading, .rz-home-services .rz-card, .rz-work-grid .rz-work-card, .rz-about, .rz-faq, .rz-cta) { opacity: 1 !important; animation: none !important; } html.rz-motion header.wp-block-template-part { position: static; transform: none !important; transition: none !important; } .rz-card, .rz-work-card, .rz-work-card img, .rz-work-card .rz-picture::after, .wp-block-button__link, .rz-product-ask { transition: none !important; transform: none !important; } .rz-card h3::after { transition: none !important; } .rz-card:hover .rz-number { transform: none !important; } html.rz-motion .rz-cta .wp-block-button__link.rz-pulse-once, .rz-destacado { animation: none !important; } } /* ============================================================ AJUSTES DE ASPECTO — 07-sep-2026 Van aquí y no en el tema para que sobrevivan a una actualización de Staffcreativa. El plugin carga después del tema (prioridad 20), así que con la misma especificidad gana. ============================================================ */ /* 1 · Primera pantalla en móvil. Las cifras empezaban en el píxel 832 con la pantalla en 812. Solo se baja el mínimo de cada clamp: en escritorio manda el máximo, así que allí no se mueve nada. */ .rz-hero { padding-top: clamp(32px, 11vw, 132px); padding-bottom: clamp(24px, 6vw, 72px); } .rz-hero h1 { margin-top: 16px; } .rz-capabilities { padding-top: clamp(16px, 4vw, 48px); } /* 2 · Zonas pulsables de 44px. El enlace crece por dentro; el subrayado sigue pegado al texto gracias a inline-flex + align-items:center. */ .rz-text-link a, .rz-footer a { display: inline-flex; align-items: center; min-height: 44px; } /* La tarjeta de servicio se pulsa entera, no solo el título. Si algún día se le añade un segundo enlace dentro, ese enlace necesita position:relative para quedar por encima de esta capa. */ .rz-home-services .rz-card { position: relative; } .rz-home-services .rz-card h3 a::after { content: ""; position: absolute; inset: 0; } /* 3 · Cuerpo legible en móvil: 15px se queda corto, 16 es lo cómodo. Y compresión del hero para que la banda de cifras asome al cargar: medido, las cifras pasan del píxel 832 al 788 en una pantalla de 812. */ @media (max-width: 781px) { .rz-lead { font-size: 16px; } .rz-card p, .rz-work-description { font-size: 15px; } /* La foto pasa de 4/3 a 16/9: es el bloque que más alto ocupa (253px a 190px) */ .rz-hero-image .rz-picture { aspect-ratio: 16 / 9; } .rz-hero { padding-top: 26px; } .rz-hero h1 { margin-top: 10px; } .rz-hero .rz-lead { margin-top: 18px; } .rz-hero .wp-block-buttons { margin-top: 18px; } } /* ============================================================ FORMULARIO SEGÚN EL DISEÑO DE JORGE (localhost:4323 → Contacto) Campos con línea inferior en vez de caja, etiquetas pequeñas en mayúsculas y botón naranja. ============================================================ */ /* Etiquetas: pequeñas, en mayúsculas y en gris */ .rz-quote-form label { font-family: Pangram, Helvetica, Arial, sans-serif; font-size: 11px; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--rz-muted, #5a6786); } /* Los campos vuelven a tamaño y caja normales */ .rz-quote-form input, .rz-quote-form select, .rz-quote-form textarea { font-family: Nexa, Arial, sans-serif; font-size: 16px; font-weight: 400; letter-spacing: normal; text-transform: none; color: var(--rz-ink, #000); background: transparent; border: 0; border-bottom: 1px solid var(--rz-line); border-radius: 0; padding: 10px 0; margin-top: 6px; transition: border-color var(--rz-hover) ease; } .rz-quote-form textarea { border: 1px solid var(--rz-line); border-radius: 10px; padding: 12px 14px; } .rz-quote-form :is(input, select, textarea):focus-visible { border-color: var(--rz-marino, #2d3c59); outline: 2px solid var(--rz-marino, #2d3c59); outline-offset: 3px; } /* La casilla de privacidad se lee como frase, no como etiqueta de campo */ .rz-quote-form .rz-form-privacidad { font-family: Nexa, Arial, sans-serif; font-size: 14.5px; font-weight: 400; letter-spacing: normal; text-transform: none; color: var(--rz-muted, #5a6786); line-height: 1.5; } .rz-quote-form .rz-form-privacidad input { border: 1px solid var(--rz-borde-fuerte); border-radius: 4px; padding: 0; margin-top: 3px; width: 18px; height: 18px; accent-color: var(--rz-marino, #2d3c59); } /* Botón naranja, como en el diseño */ .rz-quote-form button[type="submit"] { background: var(--rz-ambar); color: #000; padding: 17px 30px; margin-top: 4px; } @media (hover: hover) and (pointer: fine) { .rz-quote-form button[type="submit"]:hover { background: var(--rz-ambar-hover); } } /* ========================================================================== WHATSAPP FLOTANTE EN BOLITA La píldora medía 203 px y se sentaba encima del botón "Enviar consulta" del formulario. En bolita ocupa sólo la esquina y deja de competir. El texto no se borra: se oculta a la vista y sigue disponible para lectores de pantalla, además del aria-label que ya trae el enlace. ========================================================================== */ .rz-contact-float { width: 58px; height: 58px; padding: 0; gap: 0; justify-content: center; box-shadow: 0 6px 22px rgba(0, 0, 0, .18); transition: transform var(--rz-hover, 180ms) var(--rz-out), box-shadow var(--rz-hover, 180ms) var(--rz-out), background-color var(--rz-hover, 180ms) var(--rz-out); } .rz-contact-float span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } .rz-contact-float svg { width: 30px; height: 30px; } @media (hover: hover) and (pointer: fine) { .rz-contact-float:hover { background: #12784a; transform: scale(1.06); box-shadow: 0 10px 28px rgba(0, 0, 0, .24); } } .rz-contact-float:active { transform: scale(.94); transition-duration: var(--rz-press, 140ms); } .rz-contact-float:focus-visible { outline: 3px solid #146c43; outline-offset: 3px; } /* En móvil la bolita se acerca a la esquina; 54 px sigue por encima del mínimo de 44 px de área táctil. */ @media (max-width: 781px) { .rz-contact-float { width: 54px; height: 54px; right: 16px; bottom: 16px; } .rz-contact-float svg { width: 28px; height: 28px; } } @media (prefers-reduced-motion: reduce) { .rz-contact-float:hover, .rz-contact-float:active { transform: none; } } /* ========================================================================== PALETA DE LA MARCA Los cuatro valores elegidos: #000000, #FFAC08, #2D3C59, #FFFFFF. Cada color hace un trabajo distinto, y el reparto lo decide el contraste: · #FFAC08 sobre blanco da 1.9:1 — ilegible. Nunca va como texto sobre claro ni lleva texto blanco encima. Va de FONDO con texto negro (11.2:1) y de acento sobre el negro (11.2:1). Es el color de "haz clic aquí". · #2D3C59 sobre blanco da 11:1. Ese es el que hereda el papel de acento de texto: etiquetas, números, enlaces, subrayados y foco. · #000000 el texto y las superficies fuertes; #FFFFFF el fondo. Los grises intermedios que el sitio necesita (bordes, texto secundario) se derivan del azul marino, no de un gris neutro: así todo el gris del sitio tira hacia la paleta en lugar de parecer heredado. ========================================================================== */ :root { /* Se redefinen las variables del tema; --rz-orange conserva su nombre porque el tema la usa en 15 sitios, pero su valor ya es el marino. */ --rz-ink: #000000; --rz-orange: #2d3c59; --rz-muted: #5a6786; --rz-line: #e3e6ed; --rz-paper: #f5f6f9; /* Nombres propios, para que el CSS diga qué color es y no dónde se usa */ --rz-ambar: #ffac08; --rz-ambar-hover: #e09400; --rz-marino: #2d3c59; --rz-marino-suave: #7c88a3; --rz-borde-fuerte: #c9cede; /* Presets del editor: los bloques nativos que Jorge pinte desde el panel usan estas mismas variables y salen con la paleta correcta. */ --wp--preset--color--ink: #000000; --wp--preset--color--orange: #ffac08; --wp--preset--color--paper: #f5f6f9; } /* Colores que el tema dejó escritos a mano y no pasan por variable */ .rz-card .rz-number, .rz-service-photo .rz-number, .rz-footer .rz-footer-label, .rz-footer-bottom p { color: var(--rz-muted); } .wp-block-button.is-style-outline > .wp-block-button__link, .rz-work-filters button { border-color: var(--rz-line); } .rz-inner-hero .rz-muted, .rz-contact-copy .rz-muted { color: var(--rz-marino-suave); } .rz-quote-form input, .rz-quote-form select, .rz-quote-form textarea { border-color: var(--rz-line); } /* -------------------------------------------------------------------------- El ámbar sólo en la acción principal: cotizar y enviar. Siempre con texto negro; el blanco sobre este amarillo no se lee. -------------------------------------------------------------------------- */ /* Los botones sólidos del tema traían un negro apagado (#171715) que no sale de ninguna hoja legible — lo pinta el CSS crítico de LiteSpeed. Se fija aquí para que todo el negro del sitio sea el mismo. */ .wp-block-button:not(.is-style-outline) > .wp-block-button__link { background: var(--rz-ink); background-color: var(--rz-ink); color: #fff; } /* El ámbar marca UNA acción por pantalla: la principal de esa página. El botón del encabezado se queda negro a propósito: está en todas las pantallas y, en ámbar, le robaba la atención al botón del hero que lleva al mismo sitio. */ .rz-hero-summary .wp-block-button:not(.is-style-outline) > .wp-block-button__link, .rz-hero .wp-block-button:not(.is-style-outline) > .wp-block-button__link, .rz-stacked-hero .wp-block-button:not(.is-style-outline) > .wp-block-button__link, .rz-cta .wp-block-button:not(.is-style-outline) > .wp-block-button__link { background: var(--rz-ambar); background-color: var(--rz-ambar); color: #000; border-color: var(--rz-ambar); } @media (hover: hover) and (pointer: fine) { .rz-hero-summary .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover, .rz-hero .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover, .rz-stacked-hero .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover, .rz-cta .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover { background: var(--rz-ambar-hover); background-color: var(--rz-ambar-hover); color: #000; } .wp-block-button:not(.is-style-outline) > .wp-block-button__link:hover { background-color: var(--rz-marino); } } /* Dentro del bloque negro de cierre se invierte todo: ahí el marino no se ve (1.9:1 contra el negro) y el que manda es el ámbar. */ .rz-cta .rz-eyebrow, .rz-cta .rz-number { color: var(--rz-ambar); } .rz-cta p { color: #c9cede; } /* ========================================================================== FICHAS DE SERVICIO ENLAZADAS A SU PÁGINA El título hereda el color del texto y solo cambia al marino al pasar el mouse; el subrayado del enlace lo pone el "Ver servicio completo". ========================================================================== */ .rz-service-photo h2 a, .rz-service-detail h2 a { color: inherit; text-decoration: none; } @media (hover: hover) and (pointer: fine) { .rz-service-photo h2 a:hover, .rz-service-detail h2 a:hover { color: var(--rz-marino); } } /* ========================================================================== PÁGINAS DE SERVICIO (hero apilado) El layout "constrained" de WordPress centra los bloques con max-width; el título y el lead deben quedar pegados a la izquierda. ========================================================================== */ .rz-stacked-hero > .rz-lead, .rz-stacked-hero > h1 { margin-left: 0 !important; margin-right: auto !important; } /* ========================================================================== PISO DE LEGIBILIDAD El tema baja hasta 9.5px en etiquetas, marcas de material y rótulos del pie. Por debajo de 11px el texto funcional falla en pantallas densas y en móvil, así que se sube al piso sin tocar la jerarquía: siguen siendo los elementos más pequeños de la página, solo que legibles. ========================================================================== */ .rz-eyebrow, .rz-project-card .rz-eyebrow, .rz-contact-item .rz-eyebrow, .rz-service-photo .rz-number, .rz-card .rz-number, .rz-product-card .rz-category { font-size: 11px; } .rz-tags a, .rz-tags span, .rz-service-photo > .rz-text-link a { font-size: 11px; } .rz-footer .rz-footer-label { font-size: 11px; } .rz-footer-bottom p { font-size: 12.5px; } /* ========================================================================== MEDIDA DE LECTURA Los párrafos de texto corrido llegaban a 125 caracteres por línea: el ojo pierde el renglón al volver. Se limitan a ~68ch. Quedan fuera las filas de etiquetas y los enlaces, que no son texto corrido y deben ocupar todo el ancho disponible. ========================================================================== */ .rz-section > p:not(.rz-tags):not(.rz-text-link):not(.rz-eyebrow):not(.rz-number), .rz-process-section > p, .rz-stacked-hero > p:not(.rz-eyebrow) { max-width: 68ch; } /* ========================================================================== INTERLINEADO DE TITULARES LARGOS A 44px con 1.10, los títulos de dos y tres líneas del blog casi se tocan. ========================================================================== */ .rz-project-card h2, .rz-project-card h2 a { line-height: 1.15; } /* ========================================================================== SUPERFICIES DEL NAVEGADOR Selección, cursor, foco y subrayados vienen con los valores por defecto del navegador, que no pertenecen a ninguna paleta. Se visten con la de la marca: es lo que separa una página construida de una ensamblada. ========================================================================== */ ::selection { background: var(--rz-ambar); color: #000; } :root { caret-color: var(--rz-marino); accent-color: var(--rz-marino); } :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--rz-marino); outline-offset: 3px; border-radius: 3px; } a:not(.wp-block-button__link):not(.rz-contact-float) { text-underline-offset: 0.18em; text-decoration-thickness: from-font; } /* Las cifras se comparan en vertical: mismo ancho por dígito */ .rz-number, .rz-price, .rz-single-price, .rz-step h3, .rz-service-specs h3 { font-variant-numeric: tabular-nums; } /* La cifra de la ficha de especificaciones dejó de ser

(rompía la jerarquía h1 → h3 sin h2); conserva su peso visual como párrafo. */ .rz-step > .rz-spec-valor { font: 400 23px/1.18 Nexa, Arial, sans-serif; letter-spacing: -.025em; color: var(--rz-ink); margin: 0; font-variant-numeric: tabular-nums; } /* El tema gana por especificidad en la categoría de la tarjeta de trabajo y en el título del listado del blog; se alcanzan con su mismo peso. */ .rz-work-card .rz-eyebrow, .rz-work-grid .rz-eyebrow { font-size: 11px; } .wp-block-post-title, .wp-block-post-title a { line-height: 1.15; } /* Los rótulos de capacidad conservan su peso sin ser encabezados. */ .rz-capability > .rz-capability-titulo { font: 400 23px/1.2 Nexa, Arial, sans-serif; letter-spacing: -.02em; color: var(--rz-ink); margin: 0 0 6px; } /* Medida de lectura en las páginas de texto largo (legales, catálogo): quedaban en 142 y 186 caracteres por línea. */ .rz-section p:not(.rz-tags):not(.rz-text-link):not(.rz-eyebrow):not(.rz-number), .rz-catalog-note, .rz-price-note { max-width: 70ch; } .rz-quote-form p, .rz-cta p, .rz-footer p, .rz-work-card p, .rz-project-card p { max-width: none; } /* Las páginas de texto seguido (legales) vuelcan el contenido directo en .entry-content, sin sección propia: sus párrafos llegaban a 125ch. */ .entry-content > p, .entry-content > ul, .entry-content > ol { max-width: 70ch; } /* ========================================================================== JERARQUÍA DE ACCIONES EN LA FICHA DE SERVICIO La ficha terminaba con dos enlaces del mismo peso, uno bajo el otro: "Ver servicio completo" y "Cotizar este servicio". Competían y ninguno guiaba. Ahora comparten fila: leer primero (con el acento de la marca), cotizar después en tono secundario. ========================================================================== */ .rz-service-photo > .rz-ver-servicio { margin-top: auto !important; padding-top: 14px; } .rz-service-photo > .rz-ver-servicio a { border-bottom: 1px solid var(--rz-ambar); padding-bottom: 2px; } .rz-service-photo > .rz-ver-servicio + .rz-text-link { margin-top: 2px !important; } .rz-service-photo > .rz-ver-servicio + .rz-text-link a { color: var(--rz-muted); border-bottom-color: transparent; } @media (hover: hover) and (pointer: fine) { .rz-service-photo > .rz-ver-servicio + .rz-text-link a:hover { color: var(--rz-marino); } } /* La segunda vía del cierre (formulario) va bajo el botón, en tono suave. */ .rz-cta .rz-cta-alterna { margin-top: 18px !important; } .rz-cta .rz-cta-alterna a { color: #c9cede; border-bottom: 1px solid rgba(201, 206, 222, .4); padding-bottom: 2px; } @media (hover: hover) and (pointer: fine) { .rz-cta .rz-cta-alterna a:hover { color: var(--rz-ambar); border-bottom-color: var(--rz-ambar); } } /* ========================================================================== AFINADO DE MOVIMIENTO (criterios de Emil Kowalski) El sistema responde más rápido de lo que el usuario decide: la entrada del hover se toma su tiempo, la salida vuelve de inmediato. ========================================================================== */ @media (hover: hover) and (pointer: fine) { .rz-card:hover, .rz-card:focus-within, .rz-work-card:hover { transition-duration: var(--rz-hover); } } /* Las fichas de servicio y las tarjetas de trabajo son pulsables enteras: deben acusar la pulsación como cualquier otro control. */ .rz-card:active, .rz-work-card:active, .rz-service-photo:active { transform: scale(.995); transition-duration: 100ms; } @media (prefers-reduced-motion: reduce) { .rz-card:active, .rz-work-card:active, .rz-service-photo:active { transform: none; } } /* ========================================================================== LA FICHA DE SERVICIO ES UN SOLO OBJETIVO La foto ocupaba media tarjeta y no llevaba a ninguna parte: el visitante la pulsa y no pasa nada. El enlace del título pasa a cubrir la ficha; las etiquetas y los dos enlaces del pie se elevan para conservar su destino. Solo entonces tiene sentido que la ficha acuse la pulsación. ========================================================================== */ .rz-service-photo { position: relative; } .rz-service-photo h2 a::after { content: ""; position: absolute; inset: 0; } .rz-service-photo .rz-tags a, .rz-service-photo .rz-text-link a, .rz-service-photo .rz-tags span { position: relative; z-index: 1; } .rz-service-photo .rz-picture { overflow: hidden; } .rz-service-photo .rz-picture img { transition: transform 280ms var(--rz-out); } @media (hover: hover) and (pointer: fine) { .rz-service-photo:hover .rz-picture img { transform: scale(1.03); } } @media (prefers-reduced-motion: reduce) { .rz-service-photo .rz-picture img { transition: none; } .rz-service-photo:hover .rz-picture img { transform: none; } } /* ========================================================================== SERVICIOS: EL PICO DEL RECORRIDO La página era blanca de principio a fin y los servicios, una tabla de seis filas planas. Esta es la sección que decide la venta, así que pasa a negro —el mismo negro del cierre— y recupera el ámbar de la paleta en la numeración, donde por fin tiene el fondo que necesita para leerse (11.2:1 sobre negro; sobre blanco no llegaba a 2:1). Ninguna tinta nueva. ========================================================================== */ .rz-home-services { color: #fff; } .rz-home-services .rz-section-heading h2, .rz-home-services .rz-card h3, .rz-home-services .rz-card h3 a { color: #fff; } .rz-home-services .rz-card p { color: #c9cede; } .rz-home-services .rz-section-heading .rz-text-link a { color: var(--rz-ambar); border-bottom: 1px solid var(--rz-ambar); padding-bottom: 2px; } /* La numeración pasa a ser la estructura visible de la sección. */ .rz-home-services .rz-card .rz-number { color: var(--rz-ambar); font-size: clamp(34px, 5vw, 52px); line-height: 1; font-variant-numeric: tabular-nums; } .rz-home-services .rz-card h3 { font-size: clamp(24px, 3.4vw, 36px); line-height: 1.1; letter-spacing: -.03em; } /* Las divisiones se dibujan con luz, no con tinta. */ .rz-home-services .rz-service-grid > .rz-card { border-bottom-color: rgba(255, 255, 255, .14); } .rz-home-services .rz-service-grid > .rz-card:last-child { border-bottom-color: transparent; } /* La fila entera reacciona: se adelanta y su número toma el mando. */ @media (hover: hover) and (pointer: fine) { .rz-home-services .rz-card:hover, .rz-home-services .rz-card:focus-within { transform: translateX(6px); } .rz-home-services .rz-card:hover .rz-number { color: #fff; transform: none; } } @media (prefers-reduced-motion: reduce) { .rz-home-services .rz-card:hover { transform: none; } } /* ========================================================================== LAS CIFRAS QUE PRUEBAN EL OFICIO Estaban en 23px, del tamaño de un pie de foto: son el único dato duro de la portada y nadie las leía. Suben a la escala que les corresponde. ========================================================================== */ .rz-capabilities .rz-capability .rz-capability-titulo, .rz-capabilities .rz-capability .rz-spec-valor { font-size: clamp(32px, 4.2vw, 46px); line-height: 1; letter-spacing: -.03em; margin-bottom: 10px; font-variant-numeric: tabular-nums; } .rz-capabilities .rz-capability p:not(.rz-capability-titulo):not(.rz-spec-valor) { color: var(--rz-muted); font-size: 14px; line-height: 1.5; } .rz-capabilities { padding-top: clamp(36px, 5vw, 60px); padding-bottom: clamp(36px, 5vw, 60px); border-bottom: 1px solid var(--rz-line); } /* ========================================================================== SANGRE COMPLETA PARA LOS BLOQUES NEGROS El contenedor de la plantilla mete aire a los lados y limita a 1240px, de modo que el negro quedaba como una tarjeta con orillas blancas. Mover la caja con margenes negativos no sirve: el layout de WordPress impone su propio margin auto y gana. En vez de mover nada se pinta el color por detras con un pseudo-elemento de 100vw: el fondo llega al borde de la pantalla y el texto conserva la alineacion que ya tenia con el resto de la pagina. overflow-x: clip evita la barra horizontal en los sistemas que dibujan scrollbar con ancho propio, y a diferencia de hidden no crea contexto de scroll, asi que la cabecera pegajosa sigue viva. ========================================================================== */ html { overflow-x: clip; } .rz-home-services, .rz-cta, .rz-process-section { position: relative; isolation: isolate; /* El color va tambien en la caja, no solo en el pseudo-elemento: si este no llega a pintarse (modo de alto contraste, impresion, un fallo de render), el texto blanco seguiria siendo legible en vez de quedar blanco sobre blanco. El ::before solo lo extiende hasta el borde. */ background: var(--rz-ink); border-radius: 0; } .rz-home-services::before, .rz-cta::before, .rz-process-section::before { content: ""; position: absolute; inset: 0; left: 50%; width: 100vw; transform: translateX(-50%); background: var(--rz-ink); z-index: -1; } /* ========================================================================== EL PROCESO TAMBIEN ES UN MOMENTO NEGRO Cada pagina de servicio explica como se trabaja: es su seccion decisiva, igual que Servicios lo es en la portada. Con el mismo tratamiento, el negro significa lo mismo en todo el sitio: aqui esta lo que importa. Y sobre negro los numeros vuelven a poder ser ambar. ========================================================================== */ .rz-process-section { color: #fff; padding-top: clamp(48px, 7vw, 84px); padding-bottom: clamp(48px, 7vw, 84px); margin-top: clamp(36px, 5vw, 64px); margin-bottom: clamp(36px, 5vw, 64px); } .rz-process-section h2, .rz-process-section .rz-step h3 { color: #fff; } .rz-process-section .rz-step p:not(.rz-number) { color: #c9cede; } .rz-process-section .rz-step { border-top-color: rgba(255,255,255,.16); } .rz-process-section .rz-step .rz-number { color: var(--rz-ambar); font-size: 13px; letter-spacing: .1em; font-variant-numeric: tabular-nums; } /* En alto contraste forzado el sistema decide los colores: se retira el pseudo-elemento para no tapar nada. */ @media (forced-colors: active) { .rz-home-services::before, .rz-cta::before, .rz-process-section::before { display: none; } } /* ========================================================================== SISTEMA VISUAL: MINIMAL + DIGITAL Tres decisiones, ninguna inventada: 1. Nexa Black (900) ya estaba cargada y sin usar: los titulares iban en 400, el peso de un parrafo. Pasan al peso que la marca ya tenia. 2. Los datos tecnicos (dpi, metros, numeracion, etiquetas) van en monoespaciado del sistema. No se descarga nada y es lo que separa una pagina impresa de una interfaz: aqui son medidas reales, no disfraz. 3. Fuera sombras difusas; estructura de 1px. La precision es el estilo. ========================================================================== */ :root { --rz-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace; } /* --- 1. La voz: titulares en el peso que la marca ya tenia --------------- */ .rz-hero h1, .rz-stacked-hero h1, .rz-inner-hero h1, .rz-title-column h1, .rz-contact-copy h1, .entry-content > h1 { font-weight: 900; font-size: clamp(40px, 7.6vw, 96px); letter-spacing: -.045em; line-height: .95; } .rz-section-heading h2, .rz-home-services .rz-section-heading h2, .rz-cta h2, .rz-process-section h2, .rz-about h2 { font-weight: 900; letter-spacing: -.04em; line-height: 1; } .rz-home-services .rz-card h3, .rz-service-photo h2 { font-weight: 900; letter-spacing: -.035em; } /* --- 2. El dato se lee como dato ---------------------------------------- */ .rz-eyebrow, .rz-number, .rz-spec-valor, .rz-capability-titulo, .rz-price, .rz-single-price, .rz-footer-label, .rz-tags a, .rz-tags span, .rz-work-filters button, .rz-filter-nav a { font-family: var(--rz-mono); font-variant-numeric: tabular-nums; } .rz-eyebrow, .rz-footer-label { letter-spacing: .1em; font-weight: 500; } .rz-number, .rz-spec-valor, .rz-capability-titulo { font-weight: 500; letter-spacing: -.02em; } .rz-tags a, .rz-tags span { letter-spacing: .02em; text-transform: none; } /* --- 3. Estructura de 1px, sin sombras difusas -------------------------- */ .rz-card, .rz-work-card, .rz-service-detail, .rz-project-card { box-shadow: none; } @media (hover: hover) and (pointer: fine) { .rz-work-card:hover { box-shadow: none; } } /* Las guias de composicion del hero se retiraron: no codificaban nada real del contenido, asi que eran decoracion. En un sistema minimal el peso lo lleva la tipografia, no un adorno de fondo. */ /* --- El acento que responde: una barra que crece al pasar --------------- */ .rz-home-services .rz-card { position: relative; } .rz-home-services .rz-card::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 1px; width: 100%; background: var(--rz-ambar); transform: scaleX(0); transform-origin: left; transition: transform 260ms var(--rz-out); } @media (hover: hover) and (pointer: fine) { .rz-home-services .rz-card:hover::after, .rz-home-services .rz-card:focus-within::after { transform: scaleX(1); } } @media (prefers-reduced-motion: reduce) { .rz-home-services .rz-card::after { transition: none; } } /* ========================================================================== CABECERA Y PIE: MAS PRESENCIA ARRIBA, MENOS PESO ABAJO El logo iba a 104px en una cabecera de 69px de alto: le sobraba sitio. El pie, en cambio, media 775px en un movil de 812: casi una pantalla entera para lo que es una despedida. Se reparte al reves. ========================================================================== */ .rz-header .rz-logo, .rz-header .rz-logo img { /* Crece solo cuando hay sitio: a 782px (el ultimo ancho antes del menu movil) el nav ocupa 489px y el boton 82, asi que el logo se queda en 120 y la barra no se rompe; en pantallas amplias llega a 152. */ width: clamp(120px, 13vw, 152px); } /* --- El pie ocupa lo que le toca ---------------------------------------- */ .rz-footer { padding-top: clamp(28px, 4vw, 52px); padding-bottom: clamp(22px, 3vw, 40px); } .rz-footer-grid { gap: clamp(22px, 3vw, 36px); } .rz-footer p { line-height: 1.55; } .rz-footer a { padding: 4px 0; } .rz-footer-brand p { max-width: 34ch; } .rz-footer .rz-footer-label { margin-bottom: 8px; } /* --- El cierre legal termina en una fila -------------------------------- */ /* Eran tres bloques apilados (155px en movil). Ahora es una linea que se parte sola si no cabe, con un punto medio separando cada dato. */ .rz-footer-bottom { display: flex; flex-direction: row; flex-wrap: wrap; align-items: baseline; justify-content: flex-start; gap: 4px 14px; padding-top: 16px; margin-top: clamp(20px, 3vw, 32px) !important; } .rz-footer-bottom p { margin: 0 !important; } .rz-footer-bottom > p + p::before { content: "\00b7"; margin-right: 14px; opacity: .45; } .rz-footer-bottom a { padding: 0; } /* --- En movil, los enlaces van en dos columnas -------------------------- */ @media (max-width: 781px) { .rz-footer-grid { grid-template-columns: 1fr 1fr; gap: 26px 18px; } .rz-footer-brand, .rz-footer-contact { grid-column: 1 / -1; } .rz-footer-brand p { max-width: none; } .rz-footer .rz-logo { width: 92px; } .rz-footer-bottom { gap: 2px 12px; font-size: 11.5px; } .rz-footer-bottom > p + p::before { margin-right: 12px; } } /* El cierre legal fluye como texto, no como bloques apilados. Mi propia regla de area tactil (min-height:44px en los enlaces del pie) daba 44px de alto a CADA enlace: cuatro enlaces en dos lineas eran 88px. WCAG exime los enlaces en linea dentro de un parrafo, que es justo lo que son estos: van separados por puntos, dentro de una frase. */ .rz-footer-bottom { display: block; padding-top: 14px; } .rz-footer-bottom p { display: inline; } .rz-footer-bottom > p + p::before { content: " \00b7 "; margin: 0; opacity: .45; } .rz-footer-bottom a { display: inline; min-height: 0; padding: 0; } /* Compresion final del pie: en escritorio los enlaces no necesitan area tactil, asi que se juntan. En movil se conserva el respiro del dedo. */ @media (hover: hover) and (pointer: fine) { .rz-footer a { padding: 2px 0; } .rz-footer-grid { gap: 20px 28px; } } .rz-footer .rz-logo { margin-bottom: 10px; } .rz-footer-brand p { font-size: 13.5px; } @media (max-width: 781px) { .rz-footer { padding-top: 26px; padding-bottom: 20px; } .rz-footer-grid { gap: 22px 16px; } .rz-footer p { font-size: 13px; } .rz-footer a { padding: 3px 0; } .rz-footer-contact > p:last-child { margin-top: 6px; } } /* El cierre no se sale por el borde en pantallas estrechas: "Libro de Reclamaciones" no rompia y se cortaba contra el margen. */ .rz-footer-bottom { overflow-wrap: anywhere; word-break: normal; } .rz-footer-bottom p, .rz-footer-bottom a { overflow-wrap: anywhere; } /* En movil la bolita flotante de WhatsApp (54px + 16px de margen) se sentaba encima de la ultima linea del cierre legal. Se reserva su hueco para que la bolita flotante no tape el cierre. */ @media (max-width: 781px) { .rz-footer { padding-bottom: 86px; } } /* ========================================================================== EL PIE OCUPA LO JUSTO Cada enlace medía 44px de alto para el dedo, cuando su texto ocupa 19. Ese minimo es el nivel AAA de WCAG (2.5.5); el nivel AA vigente (2.5.8) pide 24px. Con 34 en movil y altura natural en escritorio se cumple de sobra y el pie deja de ser una pantalla entera. ========================================================================== */ .rz-footer .rz-footer-links a, .rz-footer .rz-footer-contact a { min-height: 34px; } @media (hover: hover) and (pointer: fine) { .rz-footer .rz-footer-links a, .rz-footer .rz-footer-contact a { min-height: 0; padding: 1px 0; } .rz-footer { padding-top: 40px; padding-bottom: 28px; } .rz-footer-grid { gap: 16px 28px; } } @media (max-width: 781px) { /* El logo ya dice quien es la casa: la descripcion larga se guarda para el escritorio, donde no cuesta pantalla. */ .rz-footer-brand p { display: none; } .rz-footer-brand { display: flex; align-items: center; } .rz-footer-contact { columns: 2; column-gap: 16px; } .rz-footer-contact .rz-footer-label { column-span: all; } .rz-footer-contact > p:last-child { break-inside: avoid; } .rz-footer { padding-top: 22px; padding-bottom: 80px; } .rz-footer-grid { gap: 18px 16px; } } /* ========================================================================== PIE COMO TARJETA DE VISITA El pie repetia el menu que ya esta arriba y enterraba los datos de contacto en la cuarta columna. Se le da la vuelta: primero quien eres y como te encuentran, y el mapa del sitio queda como una linea discreta. Todo se reordena por CSS; el contenido del bloque no se toca. ========================================================================== */ .rz-footer-grid { display: flex; flex-direction: column; gap: clamp(20px, 3vw, 30px); } .rz-footer-brand { order: 1; } .rz-footer-contact { order: 2; } .rz-footer-links { order: 3; } /* --- Los datos, al frente ----------------------------------------------- */ .rz-footer-contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, auto)); gap: 4px 40px; align-items: baseline; columns: auto; } .rz-footer-contact .rz-footer-label { grid-column: 1 / -1; margin-bottom: 2px; } /* El telefono es el dato que mas se usa: se lee de lejos. */ .rz-footer-contact > p:nth-of-type(2) a { font-family: var(--rz-mono); font-size: clamp(20px, 2.4vw, 26px); letter-spacing: -.02em; color: var(--rz-ink); font-variant-numeric: tabular-nums; } /* --- El mapa del sitio, en una linea ------------------------------------ */ .rz-footer-links { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; columns: auto; } .rz-footer-links .rz-footer-label { flex: 0 0 88px; margin: 0; } .rz-footer-links p { margin: 0 !important; } .rz-footer-links p:not(.rz-footer-label) + p:not(.rz-footer-label)::before { content: "\00b7"; margin-right: 12px; opacity: .4; } .rz-footer-links a { min-height: 0; padding: 2px 0; } /* --- Separacion entre los dos grupos de enlaces -------------------------- */ .rz-footer-links + .rz-footer-links { margin-top: -6px; } @media (max-width: 781px) { .rz-footer-links .rz-footer-label { flex-basis: 100%; margin-bottom: 4px; } .rz-footer-links a { min-height: 30px; display: inline-flex; align-items: center; } .rz-footer-contact { gap: 2px 24px; } } /* En pantalla ancha la tarjeta no se apila: quien eres y como te encuentran van uno al lado del otro, y el mapa del sitio cruza abajo. Apilarlo todo costaba 143px de alto sin aprovecha el ancho disponible. */ @media (min-width: 782px) { .rz-footer-grid { display: grid; grid-template-columns: minmax(200px, 280px) 1fr; gap: 14px 48px; align-items: start; } .rz-footer-brand { grid-column: 1; grid-row: 1; } .rz-footer-contact { grid-column: 2; grid-row: 1; } .rz-footer-links { grid-column: 1 / -1; } .rz-footer-links + .rz-footer-links { margin-top: -10px; } .rz-footer-contact { grid-template-columns: repeat(auto-fit, minmax(180px, auto)); gap: 2px 36px; } } /* Los separadores del mapa del sitio se retiran: al envolver la linea, el punto se quedaba colgando al principio de la siguiente. El espacio separa igual de bien y no deja restos. */ .rz-footer-links p:not(.rz-footer-label) + p:not(.rz-footer-label)::before { content: none; } .rz-footer-links { gap: 4px 20px; } @media (max-width: 781px) { .rz-footer-links { gap: 2px 18px; } } /* ========================================================================== LAS REDES, EN ICONOS Cinco nombres escritos ocupaban dos lineas en movil. En iconos caben en una fila y el pie encoge sin perder nada: el nombre sigue ahi para el lector de pantalla y para el globo del navegador. ========================================================================== */ .rz-footer-redes { gap: 0 6px; align-items: center; } .rz-footer-redes .rz-footer-label { flex: 0 0 88px; } .rz-footer-redes a { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; min-height: 0; padding: 0; border-radius: 50%; color: var(--rz-muted); transition: color var(--rz-press) var(--rz-out), background-color var(--rz-press) var(--rz-out); } .rz-footer-redes svg { display: block; } @media (hover: hover) and (pointer: fine) { .rz-footer-redes a:hover { color: var(--rz-ink); background: var(--rz-paper); } } .rz-footer-redes a:active { transform: scale(.94); } .rz-footer-redes a:focus-visible { outline-offset: 2px; } @media (prefers-reduced-motion: reduce) { .rz-footer-redes a { transition: none; } .rz-footer-redes a:active { transform: none; } } /* Con las redes en una fila, el pie puede cerrar mas. */ @media (max-width: 781px) { .rz-footer-redes .rz-footer-label { flex-basis: 100%; margin-bottom: 2px; } .rz-footer-redes { margin-left: -6px; } } @media (min-width: 782px) { .rz-footer-redes { margin-left: -6px; } .rz-footer-redes .rz-footer-label { margin-left: 6px; } } /* ========================================================================== EL PIE EN EL CELULAR: 587 px ERAN EL 72 % DE LA PANTALLA Con los iconos ya puestos, lo que sobraba era estructura: dos rotulos que la propia fila explica, cajas tactiles de 34 px para textos de 13, y 80 px de colchon a lo ancho para una bolita que solo estorba la esquina derecha. En escritorio no cambia nada. ========================================================================== */ @media (max-width: 781px) { /* Una fila de iconos ya dice "redes"; siete enlaces seguidos ya dicen "mapa del sitio". El rotulo sigue ahi para el lector de pantalla. */ .rz-footer-links > .rz-footer-label { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; border: 0; overflow: hidden; clip-path: inset(50%); white-space: nowrap; } /* 26 px de area tactil: dos por encima de los 24 que pide la WCAG 2.5.8 (AA) y ocho menos por fila que antes. Los iconos conservan sus 34. */ .rz-footer .rz-footer-links a, .rz-footer .rz-footer-contact a { min-height: 26px; } .rz-footer-grid { gap: 14px 16px; } .rz-footer-bottom { margin-top: 14px; } /* La bolita mide 54 px a 16 del borde: se estrecha el cierre legal en lugar de levantar el pie entero: los parrafos son display:inline y ahi el padding del ultimo no corta la linea. */ .rz-footer { padding-bottom: 24px; } .rz-footer-bottom { padding-right: 58px; line-height: 1.5; } } /* ========================================================================== EL BOTON INVISIBLE DEL BLOQUE NEGRO En /nosotros/, "Ver nuestros trabajos" salia con letra negra dentro del bloque negro: solo se veia el contorno. El tema le fija color:var(--rz-ink) a todo boton outline con (0,3,0) y le ganaba al blanco del bloque. Sobre fondo oscuro la letra y el contorno van en blanco. Se cubren los tres bloques negros para que no reaparezca al agregar botones desde el editor. ========================================================================== */ .rz-cta .wp-block-button.is-style-outline > .wp-block-button__link, .rz-home-services .wp-block-button.is-style-outline > .wp-block-button__link, .rz-process-section .wp-block-button.is-style-outline > .wp-block-button__link { color: #fff; border-color: rgba(255, 255, 255, .4); background: transparent; } @media (hover: hover) and (pointer: fine) { .rz-cta .wp-block-button.is-style-outline > .wp-block-button__link:hover, .rz-home-services .wp-block-button.is-style-outline > .wp-block-button__link:hover, .rz-process-section .wp-block-button.is-style-outline > .wp-block-button__link:hover { border-color: #fff; background: rgba(255, 255, 255, .1); } } /* ========================================================================== LA FOTO DE LA PAGINA DE SERVICIO Las 6 paginas de servicio no tenian NINGUNA imagen: solo texto. Una pagina que vende impresion de gran formato sin ensenar una impresora le pide al comprador un acto de fe. La foto entra bajo el encabezado, recortada a 16/9 como la de la portada, para que el ritmo sea el mismo en todo el sitio. OJO: la clase es .rz-servicio-foto, NO .rz-service-photo — esa ultima ya es la tarjeta del indice de servicios y trae position:relative y una capa de clic que aqui no pinta nada. ========================================================================== */ .rz-servicio-foto { margin-top: clamp(22px, 3.5vw, 36px); } .rz-servicio-foto figure { margin: 0; } .rz-servicio-foto img { display: block; width: 100%; aspect-ratio: 16 / 9; object-fit: cover; border-radius: 10px; } /* ========================================================================== LA TARJETA DE TRABAJO SIN FOTO: LA CIFRA ES LA PRUEBA Las 6 fichas con cliente real estaban ilustradas con fotos de OTRAS marcas: AURORA bajo "Ripley", ELEVATE bajo "Interbank", INNOVATE SOLUTIONS bajo "Tottus". Ante una compradora corporativa eso no es prueba debil, es contraprueba. Se quitaron las imagenes destacadas (siguen en la biblioteca) y la ficha pasa a ser un dato: cliente en blanco sobre negro y la cifra en monoespaciado, el mismo tratamiento que 1440 dpi y 24 h. Vuelve la foto en cuanto Jorge fotografie un montaje propio. ========================================================================== */ .rz-work-card:not(:has(.rz-picture)) { background: var(--rz-ink); border-radius: 10px; padding: clamp(20px, 3vw, 28px); display: flex; flex-direction: column; gap: 8px; } .rz-work-card:not(:has(.rz-picture)) .rz-eyebrow { color: var(--rz-ambar); margin: 0; } .rz-work-card:not(:has(.rz-picture)) h3 { color: #fff; margin: 0; } .rz-work-card:not(:has(.rz-picture)) .rz-work-description { font-family: var(--rz-mono); font-size: 13.5px; line-height: 1.55; color: #c9cede; margin: 0; } /* el enlace se pega abajo: las 6 tarjetas cierran a la misma altura */ .rz-work-card:not(:has(.rz-picture)) .rz-text-link { margin: 10px 0 0; padding-top: 2px; } .rz-work-card:not(:has(.rz-picture)) .rz-text-link a { color: #fff; } /* ========================================================================== CUATRO FALLOS MEDIDOS EN EL NAVEGADOR (evaluacion B) ========================================================================== */ /* 1. "politica de privacidad" daba 1.61:1 sobre el gris del formulario. En ambar no se lee; el marino sobre #f5f6f9 pasa de sobra. */ .rz-quote-form .rz-form-privacidad a { color: var(--rz-marino); } /* 2. La casilla de consentimiento medía 13x18. La WCAG 2.5.8 pide 24x24 y esta no cae en la excepcion de enlace dentro de una frase. */ .rz-form-privacidad input[type="checkbox"] { width: 24px; height: 24px; flex: 0 0 24px; } /* 3. /nosotros/ desbordaba 29px en movil: la fila de botones del cierre no envolvia y el navegador respondia con zoom-out. */ @media (max-width: 781px) { .rz-cta .wp-block-buttons { flex-wrap: wrap; } .rz-cta .wp-block-button { max-width: 100%; } .rz-cta .wp-block-button__link { white-space: normal; } } /* 4. El anillo de foco es marino y sobre las secciones negras daba 1.9:1, por debajo del 3:1 que pide la 1.4.11. Sobre negro va en blanco. */ .rz-home-services :focus-visible, .rz-cta :focus-visible, .rz-process-section :focus-visible { outline-color: #fff; } /* 5. El enlace de saltar al contenido salia ambar sobre blanco (1.74:1). Al enfocarse tiene que verse: pastilla negra con letra blanca. */ a#wp-skip-link:focus { background: var(--rz-ink); color: #fff; padding: 10px 16px; border-radius: 6px; } /* ========================================================================== DOS REMATES DE LA MISMA RONDA ========================================================================== */ /* 1. /nosotros/ desbordaba 29px en movil y flex-wrap NO lo arreglaba: la fila no envolvia porque CRECIA hasta caber (362px dentro de 289 disponibles), asi que nunca llegaba a su punto de quiebre. En movil los botones se apilan a ancho completo, que ademas es mejor para el pulgar. */ @media (max-width: 781px) { .rz-cta .wp-block-buttons { flex-direction: column; align-items: stretch; max-width: 100%; } .rz-cta .wp-block-button { width: 100%; max-width: 100%; } .rz-cta .wp-block-button__link { width: 100%; justify-content: center; } } /* 2. El intro de /trabajos/ salia sangrado 157px respecto a su propio titulo: WordPress lo centra con margin:auto dentro del ancho de contenido mientras el h2 usa el ancho ancho. Se alinea a la izquierda con su titular. El margin-top negativo se queda: aprieta el subtitulo contra el titulo a proposito y no solapa glifos, solo interlineado. */ .rz-work-intro { margin-left: 0 !important; margin-right: 0 !important; max-width: 68ch; } /* ========================================================================== LO QUE UNA CADENA NECESITA VER EN LA PRIMERA PANTALLA Medido: el pliegue esta en 909px y las cuatro cifras viven en el 1164, asi que sobre el pliegue solo habia eyebrow, titular, una linea y dos botones. Una jefa de trade que da tres minutos verifica capacidad y facturacion; las dos respuestas existian en el sitio pero a 3.959 y 5.277 px. Esta linea las sube, en el monoespaciado que el sitio ya usa para 1440 dpi y 24 h — que es su unico recurso grafico genuinamente de produccion. ========================================================================== */ .rz-hero-capacidades { font-family: var(--rz-mono); font-size: 12.5px; line-height: 1.7; letter-spacing: .01em; color: var(--rz-muted); margin-top: 18px; max-width: 58ch; } @media (max-width: 781px) { .rz-hero-capacidades { font-size: 12px; margin-top: 14px; } } /* ========================================================================== EL COTIZADOR POR MEDIDA El precio sale de la tabla que Jorge edita en la propia pagina, no de codigo: cambiar una tarifa es editar una celda. Al navegador solo llega el precio de venta publicado; el costo interno y el margen se quedan en el Excel, que es donde tienen que estar. ========================================================================== */ .rz-cotizador { margin-top: clamp(24px, 4vw, 40px); } .rz-cot-form { background: var(--rz-paper); border: 1px solid var(--rz-line); border-radius: 12px; padding: clamp(18px, 3vw, 26px); margin-bottom: 22px; } .rz-cot-campos { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px 16px; } .rz-cot-campo { margin: 0; display: flex; flex-direction: column; gap: 6px; } .rz-cot-material { grid-column: 1 / -1; } .rz-cot-campo label { font-family: var(--rz-mono); font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--rz-muted); } .rz-cot-campo select, .rz-cot-campo input { font: inherit; padding: 11px 12px; min-height: 44px; border: 1px solid var(--rz-line); border-radius: 8px; background: #fff; color: var(--rz-ink); width: 100%; } /* El total es el dato que se viene a buscar: se lee de lejos. */ .rz-cot-salida { margin-top: 20px; } .rz-cot-total { font-family: var(--rz-mono); font-size: clamp(30px, 5vw, 44px); font-weight: 700; line-height: 1.1; letter-spacing: -.02em; color: var(--rz-ink); margin: 0; font-variant-numeric: tabular-nums; } .rz-cot-detalle { font-size: 13.5px; line-height: 1.55; color: var(--rz-muted); margin: 8px 0 0; max-width: 62ch; } .rz-cot-accion { margin: 18px 0 0; } .rz-cot-accion a { background: var(--rz-ambar); color: var(--rz-ink); } /* La tabla de tarifas: es la que Jorge edita y la que el cliente consulta. */ .rz-cotizador table { width: 100%; border-collapse: collapse; font-size: 14px; } .rz-cotizador th, .rz-cotizador td { text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--rz-line); } .rz-cotizador th { font-family: var(--rz-mono); font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--rz-muted); font-weight: 500; } .rz-cotizador td:last-child { font-family: var(--rz-mono); font-variant-numeric: tabular-nums; white-space: nowrap; } .rz-cotizador figure.wp-block-table { overflow-x: auto; margin: 0; } /* La unidad va pegada al precio pero no compite con el: el numero manda. */ .rz-unidad { font-family: var(--rz-mono); font-size: .62em; color: var(--rz-muted); letter-spacing: .02em; white-space: nowrap; } .rz-cot-ficha { margin-top: 22px; } .rz-cot-titulo { font-family: var(--rz-mono); font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--rz-muted); margin: 0 0 14px; } .rz-cot-ficha .rz-cot-total { font-size: clamp(26px, 4vw, 34px); } /* El atributo hidden pierde contra un display:flex de autor: sin esta regla el campo Fondo se veia en materiales planos aunque el DOM lo marcara oculto. */ .rz-cot-campo[hidden] { display: none; }