/* Quicial — páginas interiores (Sectores, Servicio técnico, Sobre Quicial). Valores tomados de los artboards, donde iban en atributos style="" en línea. */ /* ---------- Cabecera de página ---------- */ /* La cabecera oscura vive en quicial-layout.css: la comparten todas las plantillas, incluidas las legales y los listados. */ /* ---------- Bloque partido a sangre ---------- El texto sangra hasta el borde de la página y la imagen ocupa la otra mitad completa, sin el margen lateral de la retícula. */ .split{display:grid;grid-template-columns:1fr 1fr;align-items:stretch} .split-texto{padding:var(--sec-y) 72px var(--sec-y) calc((var(--vw, 100vw) - min(var(--vw, 100vw), var(--sec-max)))/2 + var(--sec-x));display:flex;flex-direction:column;justify-content:center;min-width:0} .split--invertido .split-texto{order:2;padding:var(--sec-y) calc((var(--vw, 100vw) - min(var(--vw, 100vw), var(--sec-max)))/2 + var(--sec-x)) var(--sec-y) 72px} /* Celda derecha de contenido (no imagen): espeja el padding de .split-texto para que el texto no se pegue al bloque de color de la izquierda. */ .split-cuerpo{padding:var(--sec-y) calc((var(--vw, 100vw) - min(var(--vw, 100vw), var(--sec-max)))/2 + var(--sec-x)) var(--sec-y) 72px;display:flex;flex-direction:column;justify-content:flex-start;min-width:0} .split-visual{position:relative;background:#211D1A;min-width:0;min-height:520px} .split-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover} .split-icono{display:flex;align-items:center;gap:18px;margin-bottom:26px} .split-icono img{height:52px;width:auto;object-fit:contain} .split-texto .sub{margin-top:18px;max-width:540px} .split-texto .sub + .sub{margin-top:16px} .split-dato{margin-top:28px;max-width:540px} .split-dato p{font-weight:500;font-size:18px;color:#523F34;margin:0;line-height:1.45;text-wrap:pretty} .split-acciones{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px} .split-borde{border-top:1px solid var(--hair)} /* Sobre beix: el texto sube de contraste al fosc. */ .split--beige-60{background:var(--beige-60)} .split--beige-60 .eyebrow{color:#523F34} .split--beige-60 .h2{color:#211D1A} .split--beige-60 .sub{color:rgba(33,29,26,.72)} /* ---------- Índice de sectores ---------- */ /* El alto es FIJO, no minimo: en hover el icono pasa de 56 a 120 px y la descripcion se colapsa a 0. Con min-height la fila crecia y la seccion daba un salto; los 218.5 px del artboard son justo lo que absorbe las dos animaciones a la vez. */ /* La barra es el elemento pegajoso; la rejilla de dentro conserva el ancho maximo del diseno. El fondo va en la barra y no en la rejilla para que al quedarse pegada tape el contenido que pasa por debajo de lado a lado. */ .secsticky{position:relative} /* Sense filet a baix: el primer bloc de sector ja porta el seu border-top i en sortien dos de seguits. Quan la barra queda enganxada i sura per sobre del contingut, qui la separa es l'ombra. */ .secindex-bar{position:sticky;position:-webkit-sticky;top:74px;z-index:40;background:var(--beige-08);transition:box-shadow .25s ease} /* Les mateixes mides que .secwrap perque el nom del sector caigui a la mateixa vertical que el titular de la pagina: max-width amb el farciment a dins, que tot el tema va amb border-box. La primera i l'ultima targeta surten 40px cap enfora i se'ls torna a posar de farciment, aixi que el fons de la targeta arriba fins a la vora pero el text no es mou. */ .secindex{display:grid;grid-template-columns:repeat(4,1fr);gap:0;align-items:stretch;height:218.5px;max-width:var(--sec-max);margin:0 auto;padding:0 var(--sec-x);transition:height .28s cubic-bezier(.2,.7,.2,1)} .secindex .sec-idx{flex-direction:column;align-items:flex-start;text-align:left;gap:16px;padding:26px 28px;border-left:1px solid var(--hair)} /* Els filets nomes separen targetes: als extrems no hi ha res a separar. */ .secindex .sec-idx:first-child{margin-left:calc(-1 * var(--sec-x));padding-left:var(--sec-x);border-left:0} .secindex .sec-idx:last-child{margin-right:calc(-1 * var(--sec-x));padding-right:var(--sec-x)} /* Pegada: la tira se reduce a icono + nombre en una linea. El resumen y el crecimiento del icono en hover se apagan, que a 64px no caben. */ .secindex-bar.is-fija{box-shadow:0 10px 24px -18px rgba(33,29,26,.45)} .secindex-bar.is-fija .secindex{height:64px} .secindex-bar.is-fija .sec-idx{flex-direction:row;align-items:center;gap:12px;padding:0 20px} .secindex-bar.is-fija .sec-idx:first-child{margin-left:calc(-1 * var(--sec-x));padding-left:var(--sec-x)} .secindex-bar.is-fija .sec-idx:last-child{margin-right:calc(-1 * var(--sec-x));padding-right:var(--sec-x)} .secindex-bar.is-fija .sec-idx img, .secindex-bar.is-fija .sec-idx:hover img{width:30px!important;height:30px!important} .secindex-bar.is-fija .secindex-d{display:none} .secindex-bar.is-fija .secname{font-size:var(--fs-h4)} .secindex-bar.is-fija .sec-idx:hover .secname{margin-top:0} /* Marcas: la tira es de logotips i prou, centrats a la seva casella. L'alt el posa la variable que escriu la plantilla, una per marca: un logotip no pesa per l'alt de la seva caixa sino per la tinta que hi ha dins i per l'ample que ocupa, i a la mateixa alcada la fila queda descompensada. Res de la regla quadrada dels sectors, que esta mes avall al full i, amb la mateixa especificitat, guanyaria per ordre. */ .secindex--marcas{grid-template-columns:repeat(5,1fr);height:118px} .secindex--marcas .sec-idx{justify-content:center;align-items:center;padding:0 12px} /* El nom s'escriu sempre al marcatge —la barra fixa del mobil amaga el logotip i necessita alguna cosa que ensenyar—, pero a escriptori la tira es de logotips: nomes es veu el nom de la marca que no en tingui. */ .secindex--marcas .sec-idx:has(img) .secindex-txt{display:none} /* Sense sagnat als extrems: aqui el contingut va centrat a cada casella i, amb la casella dels extrems 40px mes ampla, el logotip quedaria desplacat. */ .secindex--marcas .sec-idx:first-child{margin-left:0;padding-left:12px} .secindex--marcas .sec-idx:last-child{margin-right:0;padding-right:12px} /* L'alt de cada logotip surt del seu atribut, un per marca. El factor es comu per no trencar la proporcio entre ells. */ .secindex--marcas .sec-idx img, .secindex--marcas .sec-idx:hover img{width:auto!important;height:var(--logo-alto,24px)!important;max-width:100%;flex:none} /* En passar-hi per sobre el fons es torna marro: el logotip ha de passar a blanc sense moure's ni canviar de mida. El filtre val per a qualsevol logotip, sigui del color que sigui d'origen. */ .secindex--marcas .sec-idx:hover img{filter:brightness(0) invert(1)} /* Enganxada nomes baixa l'alt de la barra: els logotips es queden igual, que es on de debo es miren. El mes alt, el de Quicial, fa 38px dins dels 80 de la barra. Cal repetir aqui la mida amb aquesta especificitat: la regla d'enganxat dels sectors, `.secindex-bar.is-fija .sec-idx img`, clava 30x30 amb !important i te una classe mes que la regla de dalt, aixi que sense aixo guanyaria ella i els logotips sortirien aixafats dins d'un quadrat de 30px. */ .secindex-bar--marcas.is-fija .secindex--marcas{height:80px} .secindex-bar--marcas.is-fija .sec-idx img, .secindex-bar--marcas.is-fija .sec-idx:hover img{width:auto!important;height:var(--logo-alto,24px)!important;max-width:100%} /* Al bloc de la marca, el mateix logotip mes gran. La caixa nomes reserva l'espai perque tots els blocs comencin a la mateixa alcada. */ .split-logo{margin-bottom:26px;min-height:78px;display:flex;align-items:center} .split-logo img{width:auto;max-width:100%;display:block} .secindex .sec-idx img{height:56px;width:56px;object-fit:contain;flex:none} .secindex-txt{display:flex;flex-direction:column;gap:6px;min-width:0} .secindex-d{font-size:14px;line-height:1.5;color:rgba(82,63,52,.72)} .secindex .sec-idx:hover .secindex-d{color:rgba(255,255,255,.72)} /* ---------- Cabeceras de sección ---------- */ .head-640{max-width:640px;margin-bottom:48px} .head-640--centro{max-width:640px;margin:0 auto 48px;text-align:center} .dos-col{display:grid;grid-template-columns:1fr 1fr;gap:72px;align-items:start} .dos-col--44{gap:44px} .dos-col .sub{margin:0;max-width:540px} .dos-col .sub + .sub{margin-top:16px} /* ---------- Alcance del servicio ---------- */ .benrow--4{grid-template-columns:repeat(4,1fr)} .benicon--gap{margin-bottom:10px} .benrow .bencard .benicon svg{width:30px;height:30px} .asistencia-head{display:flex;flex-direction:column;justify-content:flex-start;padding-right:24px} /* ---------- Ficha de datos de empresa ---------- */ .datos{display:grid;grid-template-columns:1fr 1fr;column-gap:48px} .dato{padding:16px 0 10px;border-top:1px solid var(--hair);display:flex;flex-direction:column;gap:6px;min-width:0} .dato-k{font-weight:700;font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(82,63,52,.58)} /* El margen del
lo pone el navegador (40px a la izquierda) y desalineaba cada valor respecto a su etiqueta. */ .dato-v{margin:0;font-size:15px;line-height:1.45;color:#523F34;text-wrap:pretty} .dato-lista{display:flex;flex-direction:column;gap:8px} .dato-fila{display:flex;align-items:center;gap:9px;font-size:15px;line-height:1.45;color:#523F34} .dato-fila svg{width:14px;height:14px;flex:none;stroke:rgba(82,63,52,.55)} /* En la ficha de datos el enlace no va en vermell: el dato manda, y el color se reserva a las acciones. Se subraya al pasar por encima. */ .datos a{color:inherit} .datos a:hover{color:#211D1A;text-decoration:underline;text-underline-offset:3px} /* ---------- Parte de incidencia ---------- */ .parte{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch} /* El bloque de texto del formulario va en beix 100% y sangra hasta el borde izquierdo de la pagina, para que lea como bloque de color y no como un rectangulo suelto dentro del margen. */ /* Arranca arriba, a la misma altura que el primer campo del formulario: el padding vertical es el que le da la separacion, no un centrado. */ .parte-intro{background:var(--beige);margin:calc(var(--sec-y) * -1) 0;padding:var(--sec-y) 72px var(--sec-y) calc((var(--vw, 100vw) - min(var(--vw, 100vw), var(--sec-max)))/2 + var(--sec-x));margin-left:calc(-1 * ((var(--vw, 100vw) - min(var(--vw, 100vw), var(--sec-max)))/2 + var(--sec-x)));display:flex;flex-direction:column;justify-content:flex-start} /* Antetitulo del mismo color que el titular: en un bloque de color el vermell competia con el propio fondo. */ .parte-intro .eyebrow{color:#211D1A} /* Titular y parrafo comparten medida para que lean como un solo bloque de texto y no como dos anchos distintos. */ .parte-intro .h2, .parte-intro .sub{max-width:var(--parte-medida,460px)} .parte-intro .h2{color:#211D1A} .parte-intro .sub{margin-top:18px;color:rgba(33,29,26,.72)} .parte-form{margin:calc(var(--sec-y) * -1) 0;padding:var(--sec-y) 0 var(--sec-y) 72px;display:grid;grid-template-columns:1fr 1fr;column-gap:32px;row-gap:14px;align-content:start} /* Compactado solo dentro del formulario: el .fld del design system sigue igual en el resto del sitio. */ .parte-form .fld{padding:12px 2px} /* El alto del textarea se fija aqui y no con el atributo rows: rows viaja en la plantilla de CF7, que vive en la base de datos y depende de que se regenere. El CSS se despliega al instante. 198px con box-sizing:border-box son ~7 lineas, un 25% menos que las 10 que CF7 pone por defecto. */ .parte-form textarea.fld{height:198px;min-height:0} .parte-form .filefld{margin-top:6px;padding:11px 14px} .parte-form .fld--ancho,.parte-form .filefld,.parte-form .parte-pie{grid-column:1 / -1} .parte-form .filefld input[type="file"]{position:absolute;inset:0;opacity:0;cursor:pointer} .parte-form .filefld svg{flex:none;width:17px;height:17px} .parte-pie{display:flex;align-items:center;gap:20px;flex-wrap:wrap;margin-top:16px} .parte-pie .btn{padding:14px 28px} .parte-nota{font-size:13.5px;line-height:1.5;color:rgba(82,63,52,.62)} .parte-nota a{color:#523F34;font-weight:600} .parte-aviso{grid-column:1 / -1;margin:0;font-size:14px;line-height:1.6} .parte-aviso--ok{color:#523F34;border-left:3px solid #E23230;background:var(--beige-08);padding:14px 18px} .parte-aviso--error{color:#E23230} /* ---------- Recambios: reutiliza el acordeón de la home ---------- */ .recambios{display:grid;grid-template-columns:1.02fr .98fr;gap:72px;align-items:stretch} /* ---------- Aparición al hacer scroll ---------- */ .quicial-anim .fade-up{opacity:0} .quicial-anim .fade-up.in{animation:fadeUp .85s cubic-bezier(.2,.7,.2,1) forwards} @media (prefers-reduced-motion: reduce) { .fade-up{opacity:1;animation:none} } /* ---------- Responsive (pendiente de artboards de móvil) ---------- */ @media (max-width: 1100px) { .split,.split--invertido{grid-template-columns:minmax(0,1fr)} .split-texto,.split--invertido .split-texto{order:0;padding:var(--sec-y) var(--sec-x)} /* La ficha de datos de la sede ya cierra con su ultimo filete: el coixi entero de seccion dejaba un hueco blanco largo antes del mapa. */ .sede-info{padding-bottom:28px} .split-visual{min-height:56vw} .secindex{grid-template-columns:repeat(2,1fr);margin:0;height:auto} .secindex .sec-idx,.secindex .sec-idx:first-child,.secindex .sec-idx:last-child{margin:0;padding:24px;border-top:1px solid var(--hair);border-right:none} .benrow,.benrow--4{grid-template-columns:repeat(2,1fr)} .parte{grid-template-columns:minmax(0,1fr)} /* A una sola columna la intro deja de ser media pantalla. Encajada dentro del padding de la seccion se leia como una seccion metida dentro de otra: aqui sale a sangre y arranca a ras del borde superior, asi que es una banda mas de la pagina, como el resto. */ .parte-intro{margin:calc(-1 * var(--sec-y)) calc(-1 * var(--sec-x)) 0;padding:var(--sec-y) var(--sec-x)} .parte-intro .sub{padding-right:0} .parte-form{border-left:0;border-top:0;margin:40px 0 0;padding:0} .datos{grid-template-columns:minmax(0,1fr)} } @media (max-width: 900px) { .dos-col{grid-template-columns:minmax(0,1fr);gap:32px} .recambios{grid-template-columns:minmax(0,1fr);gap:40px} /* La foto de recambios es 1400x934. Plegada a una columna heredaba el 16/9 de .svc-visual y el object-fit:cover le comia arriba y abajo: quedaba una franja rara. Cuadrada recorta por los lados, que es lo que sobra en estas fotos de pieza, y llena la caja entera. */ .recambios .svc-visual{aspect-ratio:1/1} } @media (max-width: 720px) { .secindex{grid-template-columns:minmax(0,1fr)} .benrow,.benrow--4{grid-template-columns:minmax(0,1fr)} .parte-form{grid-template-columns:minmax(0,1fr)} /* El rotulo del boton de envio no cabe en una linea a 375 px: el .btn del design system lleva white-space:nowrap, asi que aqui se le permite partir. */ .parte-pie{flex-direction:column;align-items:stretch;gap:14px} .parte-pie .btn{white-space:normal;text-align:center;line-height:1.3} .pagehero-p{font-size:16px} } .on-beige-60{background:var(--beige-60)} /* ---------- Bloque partido sin foto ---------- Mientras no haya fotografía real, el bloque no deja media pantalla vacía: pasa a una sola columna con los márgenes de la retícula y una medida de lectura corta, en lugar de estirar el texto a 1440 px. */ .split--sin-imagen{grid-template-columns:minmax(0,1fr)} .split--sin-imagen .split-texto,.split--invertido.split--sin-imagen .split-texto{order:0;max-width:var(--sec-max);width:100%;margin:0 auto;padding:var(--sec-y) var(--sec-x)} .split--sin-imagen .h2{max-width:760px} .recambios--sin-imagen{grid-template-columns:minmax(0,1fr)} /* ---------- Contacto ---------- */ .sede-sec{border-top:1px solid var(--hair)} .benrow--3{grid-template-columns:repeat(3,1fr)} .benrow--2{grid-template-columns:repeat(2,1fr)} .benrow--1{grid-template-columns:minmax(0,1fr)} /* ---------- Contact Form 7 ---------- */ /* El diseno del formulario es el de arriba; aqui solo se encaja el marcado que anade CF7 por su cuenta, sin tocar ni un valor del diseno. Dos envoltorios nuevos: CF7 mete un
alrededor del
, que pasa a ser el item de la rejilla exterior de .parte, y un alrededor de cada control. Por eso la plantilla que genera cc_cf7_plantilla() envuelve cada campo en un .fld-cell: es ese div el que hace de item de la rejilla del formulario, y asi el ancho completo de los campos largos sigue estando a nuestro alcance. */ /* El envoltorio del shortcode desaparece de la maquetacion, asi el sigue siendo la columna derecha de .parte y conserva TODAS sus reglas, media queries incluidos, sin tocar ninguna. */ .parte > .wpcf7{display:contents} .parte-form .fld-cell{min-width:0} .parte-form .fld-cell--ancho{grid-column:1 / -1} .parte-form .wpcf7-form-control-wrap{display:block;position:relative} /* Aviso por campo. Se posiciona contra el .wpcf7-form-control-wrap, que por eso lleva position:relative arriba. */ .parte-form .wpcf7-not-valid-tip{margin-top:6px;font-size:12.5px;line-height:1.4;color:#E23230} .parte-form .fld.wpcf7-not-valid{border-bottom-color:#E23230} /* Aviso general: reutiliza el estilo que ya estaba disenado para .parte-aviso. CF7 5.x pone el estado (sent / invalid / failed) como clase del propio form; .wpcf7-mail-sent-ok es la forma antigua, se cubren las dos. */ .parte-form .wpcf7-response-output{grid-column:1 / -1;margin:0;padding:0;border:0;font-size:14px;line-height:1.6;color:#E23230} .parte-form.init .wpcf7-response-output, .parte-form.submitting .wpcf7-response-output, .parte-form.resetting .wpcf7-response-output{display:none} .parte-form.sent .wpcf7-response-output, .parte-form .wpcf7-response-output.wpcf7-mail-sent-ok{padding:14px 18px;color:#523F34;border-left:3px solid #E23230;background:var(--beige-08)} /* Sin [submit] de CF7 no hay bloqueo automatico mientras envia. */ .parte-form.submitting .btn{pointer-events:none;opacity:.7} .parte-form .wpcf7-spinner{margin:0 0 0 14px} /* Adjunto: CF7 pinta el input dentro de su propio span, un nivel mas abajo que el marcado propio, pero .filefld sigue siendo el ancestro posicionado y el selector de abajo es de descendencia, asi que el input sigue cubriendo la caja entera. */ .parte-form .filefld .wpcf7-form-control-wrap{position:static} /* Consentimiento: el tamano y el color se fijan en la celda que envuelve el campo, que es marcado nuestro y existe siempre. Colgarlos de .fld-consent no funcionaba: esa clase la pone CF7 en su propio span y no estaba llegando, asi que el texto se quedaba con los 16px por defecto del navegador. El texto va dentro del [acceptance], asi que la casilla y el texto quedan dentro del