/* ============================================================ DYRECO · Dirección C — NAVE estilos.css ------------------------------------------------------------ 00 Base y reset 13 Trabajos recientes 01 Utilidades y retícula 14 Sectores 02 Tipografía 15 Equipo (rejilla) · 16 Reseñas (rejilla) 03 Botones y enlaces 17 Tiendas · 18 FAQ · 19 Cierre · 20 Pie 04 Tratamiento de imagen ------------------------------------------ 05 Cabecera + menú MECANISMOS COMPARTIDOS (los usan las 8 págs) 06 Hero + PERSIANA 21 Fichas arrastrables [data-fichas] 07 Barra de confianza 22 Galería horizontal [data-galh] 08 Las 4 divisiones 23 Panel vertical [data-panelv] 09 Proveedor integral 24 Pestañas clip-path [data-pest] 10 Cómo trabajamos 25 Transiciones de sección 11 Marcas (marquee) 26 Microinteracciones 12 Personalización 27 prefers-reduced-motion · 28 Impresión 29 NOMBRES RESERVADOS ← léelo antes de bautizar nada en una hoja de página ------------------------------------------------------------ Cada pieza deslizante del sitio usa un mecanismo DISTINTO: persiana (hero) · fichas (equipo) · galería horizontal (trabajos) marquee (marcas) · panel vertical (reseñas) · pestañas (técnicas). Si dos secciones se mueven igual, el trabajo está a medias. ============================================================ */ /* ============================================================ 00 · BASE Y RESET ============================================================ */ *, *::before, *::after { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; } body { margin: 0; overflow-x: clip; /* clip, nunca hidden: hidden rompe sticky */ background: var(--fondo); color: var(--texto); font-family: var(--lectura); font-size: var(--fs-body); line-height: var(--lh-body); font-weight: 400; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; } h1, h2, h3, h4, p, ul, ol, figure, blockquote, dl, dd { margin: 0; } ul, ol { padding: 0; list-style: none; } img, svg { max-width: 100%; } img { border-style: none; } button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; } a { color: inherit; text-decoration: none; } address { font-style: normal; } summary::-webkit-details-marker { display: none; } :focus-visible { outline: 2px solid var(--amarillo); outline-offset: 3px; border-radius: 1px; } ::selection { background: var(--amarillo); color: var(--sobre-amarillo); } .saltar { position: fixed; top: 8px; left: 8px; z-index: 200; transform: translateY(-160%); background: var(--amarillo); color: var(--sobre-amarillo); padding: 10px 18px; font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: var(--ls-nav); transition: transform var(--dur-ui) var(--ease); } .saltar:focus { transform: translateY(0); } .visualmente-oculto { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap; } /* ============================================================ 01 · RETÍCULA Y UTILIDADES ============================================================ */ .cont { width: 100%; max-width: var(--max); margin-inline: auto; padding-inline: var(--gutter); } /* Reveals — estado oculto SOLO si hay JS **y** solo mientras no esté sellado. `.reveals-sellados` la pone el script EN LÍNEA del a los 2.500 ms (el mismo que pone `.js`), así que el rescate no depende de que llegue a ejecutarse ningún fichero externo: si js/main.js no carga, el estado oculto caduca solo y se ve todo. */ html.js:not(.reveals-sellados) [data-reveal] { opacity: 0; transform: translate3d(0, 38px, 0); transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease); transition-delay: calc(var(--i, 0) * var(--stagger)); } html.js [data-reveal].is-in { opacity: 1; transform: none; } /* Al caducar el estado oculto, que aparezca con un fundido y no de golpe. */ html.js.reveals-sellados [data-reveal]:not(.is-in) { opacity: 1; transform: none; transition: opacity var(--dur-reveal) var(--ease), transform var(--dur-reveal) var(--ease); } /* --- Utilidades de composición que estaban RECOPIADAS en cada hoja --------- Medido en agosto-2026 sobre las 11 hojas: la misma receta se reescribía una y otra vez en vez de vivir una sola vez. · el fondo de banda a sangre → 11 sitios en 6 hojas (`.integral__fondo`, `.cierre__fondo`, `.pnl__fondo`, `.franja__fondo`, `.insta__fondo`, `.rep__fondo`, `.ccta__fondo`, `.ent__fondo`, `.aseso__fondo`, `.uepi__fondo`, `.ucta__fondo`); · la fila de botones → 10 sitios en 5 hojas; · la numeración amarilla → 10 sitios en 6 hojas, teniendo `.div__num`; · la banda gris de sección → 6 sitios en 4 hojas. El coste no es el peso: es que el día que el fondo de banda tenga que pasar de `overflow:hidden` a `overflow:clip` hay que tocarlo 11 veces en 6 ficheros. Aquí están las cuatro, con nombre del sistema. ⚠️ PARA QUIEN TOQUE UNA HOJA DE PÁGINA: al pasar por una de esas reglas, cámbiala por la clase de aquí en el HTML y borra el bloque de tu hoja. Lo que sea propio de la pieza (un `margin-bottom`, un `z-index`) se queda en tu hoja como ajuste sobre la utilidad; la receta común, no. */ .banda__fondo { position: absolute; inset: 0; z-index: -1; overflow: hidden; } .fila-botones { display: flex; flex-wrap: wrap; gap: 14px; } /* Numeración amarilla de kicker. Es la misma de `.div__num` (§08), que se queda como está por no romper la Home; en una pieza nueva se usa esta. */ .num { font-family: var(--display); font-weight: 600; font-size: var(--fs-kicker); letter-spacing: var(--ls-kicker); color: var(--amarillo); } .sec--gris { background: var(--sup); border-block: 1px solid var(--linea); padding-block: var(--sec-y); } /* Los saltos por ancla no se meten debajo de la cabecera fija */ :target, main > section[id], footer[id] { scroll-margin-top: calc(var(--alto-cab) + 24px); } /* …y TAMPOCO el elemento que acaba de recibir el foco. Con la cabecera fija y una ventana baja (1440×600, 1280×620) el navegador sube el campo enfocado hasta el borde del viewport, no hasta el borde de la cabecera: medido, a 1440×600 los inputs #f-nombre y #f-empresa de contacto aterrizaban en y=73 con la cabecera llegando a y=77, o sea 4 px del campo y su anillo de foco por debajo (13 px a 1280×620). Misma cuenta que la regla de arriba. Va sobre :focus-visible y no sobre :focus para no reposicionar la página cuando el foco lo da un clic del ratón, que ya sabe dónde ha pulsado. */ :is(a, button, input, select, textarea, summary, [tabindex]):focus-visible { scroll-margin-top: calc(var(--alto-cab) + 16px); scroll-margin-bottom: 16px; } /* ============================================================ 02 · TIPOGRAFÍA ============================================================ */ .kicker { display: inline-flex; align-items: center; gap: 12px; font-family: var(--display); font-weight: 600; font-size: var(--fs-kicker); line-height: 1; letter-spacing: var(--ls-kicker); text-transform: uppercase; color: var(--amarillo); margin-bottom: var(--pieza); } /* La diagonal — único activo gráfico de la marca junto al amarillo */ .kicker::before { content: ""; width: 22px; height: 2px; background: var(--amarillo); transform: skewX(-30deg); flex: none; } .h2 { font-family: var(--display); font-weight: 800; font-size: var(--fs-h2); line-height: var(--lh-titulo); letter-spacing: var(--ls-display); text-transform: uppercase; color: var(--texto); text-wrap: balance; max-width: 20ch; } /* Los trece H2 arrancan en el mismo borde izquierdo: no hay variante centrada. (La había, y la usaban `marcas` y `cierre`; dos excepciones en una página cuyo orden se basa precisamente en ese borde.) */ .cabecera-sec { margin-bottom: var(--bloque); } .cabecera-sec--split { display: grid; grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--gap) clamp(32px, 6vw, 120px); align-items: end; } .cabecera-sec__entrada { color: var(--apagado); /* Anclada al borde derecho de su columna (5 de 12, 517 px a 1440): así la cabecera se lee como lo que es —titular a la izquierda, entrada a la derecha— y el bloque cierra por los dos lados. El tope era `52ch` = 509 px y renderizaba 71 caracteres reales; con `--medida` son 63 (medido con Range, 8-sep-2026). La columna sigue llena por la derecha porque el bloque va `justify-self: end`. */ max-width: var(--medida); justify-self: end; padding-bottom: .35em; } @media (max-width: 900px) { .cabecera-sec--split { grid-template-columns: 1fr; align-items: start; } /* Apilada, la entrada vuelve al margen izquierdo: el `justify-self: end` de escritorio la dejaba descolgada 277 px a la derecha bajo el titular. */ .cabecera-sec__entrada { justify-self: start; padding-bottom: 0; } } /* --- 2.x · VIUDAS ------------------------------------------ `text-wrap: pretty` le pide al navegador que no deje la última línea de un párrafo en un muñón de una o dos palabras. Se medían ocho en las cuatro páginas de división —rótulos de dos palabras colgando bajo tres líneas llenas— y perseguirlas reescribiendo frases es trabajo que se deshace al primer cambio de copy: esto lo resuelve el motor y aguanta. Donde no está soportado, el texto se parte como siempre: no rompe nada. */ main p, .faq__r p, .destacado__p, .rail__p, .ccta__p, .cat__p, .punto__p, .asesor__entrada, .hero-div__entrada, .cabecera-sec__entrada { text-wrap: pretty; } /* ============================================================ 03 · BOTONES Y ENLACES ============================================================ */ .btn { position: relative; isolation: isolate; display: inline-flex; align-items: center; justify-content: center; min-height: 52px; padding: 14px clamp(24px, 2.4vw, 36px); font-family: var(--display); font-weight: 700; font-size: clamp(.875rem, 1vw, 1rem); letter-spacing: .09em; text-transform: uppercase; line-height: 1; white-space: nowrap; transition: color var(--dur-ui) var(--ease), transform var(--dur-ui) var(--ease); } /* corte diagonal, eco del wordmark */ .btn::before { content: ""; position: absolute; inset: 0; z-index: -1; clip-path: polygon(11px 0, 100% 0, calc(100% - 11px) 100%, 0 100%); /* ⚠️ La `transition` de este pseudoelemento NO se declara aquí: vive con el barrido, en §26 («Botones: el fondo se desplaza en diagonal»), porque es la que anima `background-position`. Estuvo declarada en los dos sitios y ganaba la de §26 entera, así que tocar la de aquí no hacía nada. */ } .btn--luz { color: var(--sobre-amarillo); } /* sobre amarillo → casi negro */ /* El color se repite en los tres estados porque cualquier host que declare un `.btn:hover{color:…}` (Bootstrap y Odoo lo hacen) gana a `.btn--luz` por especificidad: 0-1-1 contra 0-1-0. Con dos clases mandamos nosotros y el texto sobre amarillo nunca se aclara. 9-sep-2026. */ .btn--luz:hover, .btn--luz:focus, .btn--luz:active { color: var(--sobre-amarillo); } .btn--luz::before { background: var(--amarillo); } .btn--luz:hover::before { box-shadow: 0 0 0 1px var(--amarillo), 0 14px 44px rgb(var(--am-rgb) / .22); } /* El secundario no lleva filete: un borde de 1 px se parte contra el corte diagonal del clip-path. Se resuelve como superficie de vidrio, misma silueta y menos peso que el amarillo. */ .btn--linea { color: var(--texto); } .btn--linea::before { background: rgb(var(--texto-rgb) / .10); backdrop-filter: blur(3px); -webkit-backdrop-filter: blur(3px); } .btn--linea:hover { color: var(--amarillo); } .btn--linea:hover::before { background: rgb(var(--am-rgb) / .14); } .enlace-flecha { display: inline-flex; align-items: center; min-height: 44px; gap: 12px; font-family: var(--display); font-weight: 600; font-size: var(--fs-kicker); letter-spacing: var(--ls-kicker); text-transform: uppercase; color: var(--amarillo); padding-block: 12px; transition: gap var(--dur-ui) var(--ease); } .enlace-flecha span { width: 30px; height: 1px; background: var(--amarillo); transition: width var(--dur-ui) var(--ease); } .enlace-flecha:hover { gap: 18px; } .enlace-flecha:hover span { width: 46px; } /* --- Destino PREVISTO que todavía no tiene página en la maqueta --- /aviso-legal, /privacidad, /cookies, /blog, /tienda y /trabaja-con-nosotros son rutas FINALES de Odoo y allí existirán, pero esta maqueta son 8 páginas y detrás de ellas no hay nada: con el href puesto, un clic delante del cliente daba un 404. El trabajo lo hace el HTML — el ancla va SIN href, con aria-disabled="true", un title que lo explica y la ruta real guardada en data-ruta (ver el comentario del pie en cada página). Sin href el ancla ya no navega, sale del orden de tabulación y el lector de pantalla la anuncia como texto, no como enlace roto. Aquí solo queda vestirla: se APAGA, no se tacha — tiene que leerse "prevista", no "anulada". El punteado amarillo al 26 % es el mismo amarillo-luz de la dirección, en su intensidad más baja. Los selectores repiten .pie__col / .pie__legales porque el pie tiñe por selector de elemento (`.pie__col a:hover`) y ganaría por especificidad. ⚠️ EL COLOR NO SE PUEDE APAGAR MÁS. Estuvo en `--apagado` al 55 %, que sobre carbón da rgb(83,83,89) y 2,51:1 — la mitad del 4,5:1 que le toca a un texto de 12-14 px, y eran los seis enlaces del pie en las ocho páginas (49 nodos). La excepción de WCAG 1.4.3 para componentes deshabilitados NO los cubre: son `` SIN href, o sea texto corriente, no un widget. La señal de "todavía no está" la llevan el SUBRAYADO PUNTEADO AMARILLO y el cursor, que no dependen del contraste; el color se queda en `--apagado` opaco (7,61:1 desde que se aclaró el token el 6-sep-2026; eran 5,79), el mismo de los enlaces vivos del pie. */ .enlace-pendiente, .pie__col a.enlace-pendiente, .pie__legales a.enlace-pendiente { color: var(--apagado); cursor: default; text-decoration: underline dotted rgb(var(--am-rgb) / .55); text-underline-offset: 4px; text-decoration-thickness: 1px; } /* El pie desplaza y aclara sus enlaces en hover: aquí no pasa nada. */ .enlace-pendiente:hover, .pie__col a.enlace-pendiente:hover, .pie__legales a.enlace-pendiente:hover { color: var(--apagado); padding-left: 0; /* Se repite el subrayado porque en Odoo `a:hover` lo apaga (ver el puente dyreco-odoo.css): con dos clases gana esta regla. */ text-decoration: underline dotted rgb(var(--am-rgb) / .55); } /* ============================================================ 04 · TRATAMIENTO DE IMAGEN Foto oscurecida + viñeta + barrido de luz amarilla rasante ============================================================ */ .media { position: relative; overflow: hidden; isolation: isolate; border-radius: var(--radio); background: var(--sup-2); } /*

Nombre