/*
  Quicial — layout.
  Los valores de este archivo salen literalmente de los artboards del diseno
  (estaban en atributos style="" en linea). Aqui viven con clase semantica para
  que las plantillas no lleven estilo suelto. El design system —color,
  tipografia, componentes— sigue en quicial-ds.css y no se toca desde aqui.
*/

/* ---------- Cabecera ---------- */
.qbrand{display:flex;align-items:center;flex:none}
.qbrand img{height:54px;width:auto;flex:none;align-self:center;margin-left:-25px}
.qnav{display:flex;align-items:stretch;gap:36px;flex:1;justify-content:center}
/* El nav y el buscador del movil viven dentro de .qmenu. A partir de 1280 px
   .qmenu no pinta caja: sus hijos son hijos directos de la fila, asi que la
   cabecera de escritorio queda exactamente igual que antes. */
.qmenu{display:contents}
/* El boton de desplegar solo existe en el menu movil: en escritorio el
   mega-menu se abre al pasar el raton. */
.qtoggle{display:none}
.qsearchpanel--menu{display:none}
/* Hamburguesa: solo por debajo de 1280. Caja con filete a la izquierda, como
   el boton de contacto y la lupa, y tres lineas del marron de texto: no
   estrena lenguaje visual. */
.qburger{display:none;flex:none;width:70px;background:#fff;border:none;border-left:1px solid var(--hair);cursor:pointer;align-items:center;justify-content:center;transition:background .18s ease}
.qburger:hover{background:#F5EFED}
.qburger-lineas{display:flex;flex-direction:column;justify-content:center;gap:5px;width:22px}
.qburger-lineas i{display:block;height:2px;background:#523F34;transition:transform .26s cubic-bezier(.2,.7,.2,1),opacity .18s ease}
.top.menu-open .qburger{background:#F5EFED}
.top.menu-open .qburger-lineas i:nth-child(1){transform:translateY(7px) rotate(45deg)}
.top.menu-open .qburger-lineas i:nth-child(2){opacity:0}
.top.menu-open .qburger-lineas i:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.qmega-inner{width:100%;padding:0;display:grid;grid-template-columns:repeat(var(--qmega-cols,5),minmax(0,1fr));gap:0;align-items:stretch}
.qcol{padding:28px;border-right:1px solid var(--hair);display:flex;flex-direction:column}
.qcol:last-child{border-right:none}
.qsublink-stack{display:flex;flex-direction:column;gap:3px}
.qsublink-sub{font-weight:400;font-size:13px;color:#a08b80}
.qmarca-logo{height:44px;display:flex;align-items:center;margin-bottom:24px}
.qmarca-logo img{width:auto;max-width:160px;object-fit:contain;object-position:left center}
.qmarca-claim{font-weight:500;font-size:15px;color:#523F34;line-height:1.25;margin-bottom:8px}
.qmarca-desc{font-size:14px;line-height:1.55;color:rgba(82,63,52,.72);margin:0;padding-bottom:22px}
.logo-marron{filter:brightness(0) saturate(100%) invert(19%) sepia(24%) saturate(900%) hue-rotate(345deg)}
.qfeat{position:relative;overflow:hidden;background:#211D1A}
.qfeat .fimg{position:absolute;inset:0}
.qfeat .fimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---------- Hero ---------- */
.hero{position:relative;background:#211D1A;overflow:hidden;display:flex;flex-direction:column;min-height:80vh}
.hero-media{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.hero-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(22,19,16,.32) 0%,rgba(22,19,16,.1) 40%,rgba(22,19,16,.72) 78%,rgba(22,19,16,.96) 100%)}
.hero-inner{position:relative;flex:1;display:flex;flex-direction:column;justify-content:flex-end;max-width:var(--sec-max);margin:0 auto;padding:64px var(--sec-x) 72px;width:100%}
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:56px;align-items:end}
.hero-title{font-weight:600;font-size:var(--fs-hero);line-height:1.04;letter-spacing:-.025em;color:#fff;margin:0;max-width:720px;text-wrap:balance;min-height:2.08em}
.hero-actions{display:flex;gap:12px;flex-wrap:wrap;margin-top:32px}
.hero-lead{font-size:15px;line-height:1.55;color:rgba(255,255,255,.72);margin:0;max-width:540px}

/* ---------- Cabeceras de seccion ---------- */
.sec-head{max-width:1120px;margin-bottom:44px}
.sec-head--center{max-width:640px;margin:0 auto 20px;text-align:center}
.sec-head--wide{max-width:860px;margin:0 auto;text-align:center}
.sec-head--marcas{max-width:720px;margin:0 auto;text-align:center}
.eyebrow--center{justify-content:center}
.intro-texto{font-size:16px;line-height:1.6;color:rgba(82,63,52,.72);margin:18px auto 0;max-width:720px;text-wrap:pretty}

/* ---------- Rotulo cinetico ---------- */
.kinetic{overflow:hidden;padding:56px 0 8px;user-select:none;display:flex;flex-direction:column;gap:0;position:relative;width:100%}
.intro{padding-bottom:var(--sec-y)}
.secwrap--sin-pie{padding-bottom:0}
.krow{white-space:nowrap;will-change:transform;font-weight:600;font-size:4.4vw;line-height:1.12;letter-spacing:-.02em;text-transform:uppercase;display:flex;align-items:center;justify-content:center;width:100%;color:#523F34}
.krow--dim{opacity:.5}
.krow span{padding:0 34px}

/* ---------- Rejillas ---------- */
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:24px}
.grid-sectores{display:grid;grid-template-columns:repeat(4,1fr);gap:0;max-width:1080px;margin:0 auto}
.grid-sectores .secitem img{height:150px;width:auto;object-fit:contain;margin:0 auto}
.catimg img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.catbadge{position:absolute;top:64px;left:14px;z-index:4;background:#523F34;color:#fff;font-weight:600;font-size:10px;letter-spacing:.1em;text-transform:uppercase;padding:6px 10px}

/* ---------- Producto propio ---------- */
.propio{display:grid;grid-template-columns:1fr 1.1fr;gap:72px;align-items:stretch}
.propio-body{display:flex;flex-direction:column;gap:28px}
.propio-body .h2{max-width:600px}
.propio-texto{font-size:16px;line-height:1.7;color:#5c493f;margin:24px 0 0;max-width:600px}
.propio-texto + .propio-texto{margin-top:18px}
.propio-body .trustrow{margin-top:34px}
.propio-body .btn{margin-top:40px;width:fit-content}
.propio-visual{position:relative;min-height:100%;background:#211D1A;margin-top:calc(var(--sec-y) * -1);margin-bottom:calc(var(--sec-y) * -1);margin-right:calc(-1 * ((var(--vw, 100vw) - min(var(--vw, 100vw), var(--sec-max)))/2 + var(--sec-x)))}
.propio-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---------- Cita de marca ---------- */
.cita{text-align:center;display:flex;flex-direction:column;align-items:center;padding-bottom:var(--sec-y)}
.cita-texto{transition:opacity .9s cubic-bezier(.2,.7,.2,1),transform .9s cubic-bezier(.2,.7,.2,1);font-weight:600;font-size:3.1vw;line-height:1.12;letter-spacing:-.02em;text-transform:uppercase;color:#523F34;margin:0 auto;max-width:1240px;text-wrap:balance}

/* ---------- Marcas y garantias ---------- */
.marcas-logos{display:flex;align-items:center;justify-content:space-between;gap:48px;flex-wrap:wrap;max-width:1100px;margin:56px auto 40px}
.marcas-logos img{object-fit:contain}
/* Copia de la tira que solo usa la cinta en bucle del movil. */
.marca-dup{display:none}
.rule-bleed{height:1px;background:var(--hair);margin-left:calc((100% - var(--vw, 100vw)) / 2);width:var(--vw, 100vw)}
.garantias{display:grid;grid-template-columns:1fr 1fr;gap:0;align-items:stretch;margin-bottom:calc(-1 * var(--sec-y))}
.garantia{padding:56px 72px var(--sec-y) 0;display:flex;flex-direction:column;gap:8px;justify-content:center}
.garantia + .garantia{border-left:1px solid var(--hair);padding:56px 0 var(--sec-y) 72px}
.garantia-ante{font-weight:700;font-size:11px;letter-spacing:.16em;text-transform:uppercase;color:#E23230}
.garantia-texto{font-weight:500;font-size:19px;color:#523F34;margin:0;line-height:1.45;text-wrap:pretty}

/* ---------- Servicio postventa ---------- */
.svc{display:grid;grid-template-columns:1.02fr .98fr;gap:72px;align-items:stretch}
.svc-visual{position:relative;aspect-ratio:4/3;background:#211D1A;overflow:hidden;min-width:0;width:100%}
.svc-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.svc-col{display:flex;flex-direction:column;justify-content:space-between}
.svc-col .h2{max-width:540px}
.svc-col .sub{margin-top:16px;max-width:520px}
.svc-col .btn{margin-top:22px;width:fit-content}
.svc-col .svc-list{margin-top:48px}

/* ---------- Sobre Quicial ---------- */
.empresa{display:grid;grid-template-columns:1fr 1fr;gap:64px;align-items:center}
.empresa-visual{position:relative;min-height:360px;background:#211D1A;order:2}
.empresa-visual img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.empresa-body .btn{margin-top:30px}
.empresa-body .sub{margin-top:16px}

/* ---------- Bloque de contacto ---------- */
.ctablock-img img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}

/* ---------- Pie ---------- */
.foot{background:#211D1A;color:rgba(255,255,255,.62)}
.foot-inner{max-width:var(--sec-max);margin:0 auto;padding:0 var(--sec-x)}
.foot-rule{height:1px;background:rgba(255,255,255,.1);width:100%}
.foot-cols{display:grid;grid-template-columns:repeat(4,1fr);gap:0}
.foot-col{padding:48px;border-left:1px solid rgba(255,255,255,.1)}
.foot-col--first{padding:48px 48px 48px 0;border-left:0}
.foot-col--last{padding:48px 0 48px 48px}
.foot-logo{filter:brightness(0) invert(1);opacity:.92;margin-bottom:20px;margin-left:-18px;width:193px;height:62px}
/* Mateix to que els enllacos de la resta de columnes: el marro que hi havia
   aqui no surt enlloc mes del peu i trencava la fila. */
.foot-desc{font-size:14px;line-height:1.6;color:rgba(255,255,255,.62);margin:0;max-width:280px}
.foot-social{display:flex;gap:16px;flex-wrap:wrap;margin-top:2px}
/* Segon nivell del peu. El #6d5e55 que hi havia donava 2,69:1 sobre el fons,
   per sota del minim llegible de 4,5:1 a 12,5px. Aquest blanc al 48% en dona
   4,82:1 i encara es llegeix un escalo per sota del 62% de les columnes. */
.foot-bottom{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:14px 24px;padding:22px 0;font-size:12.5px;color:rgba(255,255,255,.48)}
/* Copyright i politiques junts a l'esquerra, credit a la dreta. Les politiques
   centrades quedaven soltes: no s'alineaven amb cap columna del peu. */
.foot-credit{margin-left:auto}
.foot-legal{display:flex;gap:24px;flex-wrap:wrap}
.foot-legal a{color:rgba(255,255,255,.48)}
.foot-legal a:hover{color:#fff}
/* Credito de agencia: una sola linea, sin puntuacion entre mensaje y firma.
   Separa el hueco del flex y el escalo de contraste. La firma es la que sube,
   no el mensaje el que baja: el 48% de aqui arriba ya es el minimo legible a
   12,5px, y rebajarlo lo dejaria por debajo del 4,5:1. */
.foot-credit a{display:inline-flex;align-items:baseline;gap:7px;color:rgba(255,255,255,.48)}
.foot-credit a:hover{color:#fff}
.foot-credit-firma{color:rgba(255,255,255,.8);font-weight:500}
.foot-credit a:hover .foot-credit-firma{color:#fff}

/* ---------- Tamanos de los iconos en linea ----------
   En los artboards el tamano iba en atributos width/height del <svg>. Al
   servirlos como archivo se fija aqui, con los mismos valores. */
.qcaret svg{display:block;width:15px;height:15px}
.catbar-arw svg{width:15px;height:15px}
.trustitem svg{width:17px;height:17px;flex:none}
.benicon svg{width:22px;height:22px}
.foot-menu{list-style:none;margin:0;padding:0}

/* Fondos de seccion del diseno */
.on-beige-08{background:var(--beige-08)}
.on-beige-18{background:var(--beige-18)}
.on-beige-100{background:var(--beige)}
.sec-head .sub,.sec-head--center .sub,.sec-head--wide .sub,.sec-head--marcas .sub{margin-top:16px}
.propio-body .eyebrow{margin-bottom:0}
.marcas{border-bottom:1px solid var(--hair)}
.empresa-sec{border-bottom:1px solid var(--hair)}

/* ---------- Secciones sin material grafico ----------
   Mientras no haya foto real, la seccion no deja una columna vacia: el texto
   ocupa el ancho completo. Regla del proyecto: nunca huecos visuales. */
.propio--sin-imagen,.svc--sin-imagen,.empresa--sin-imagen{grid-template-columns:minmax(0,1fr)}
.ctablock--sin-imagen{grid-template-columns:minmax(0,1fr)}


/* Texto solo para lectores de pantalla (clase estandar de WordPress). */
.screen-reader-text{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap;border:0}
.screen-reader-text:focus{position:static!important;width:auto;height:auto;margin:0;clip-path:none;white-space:normal}

/* Los enlaces de la columna van en su propio contenedor para garantizar un
   hueco constante entre el ultimo item y el filete del «ver todo». En el
   artboard eso se parcheaba con un div vacio suelto en una sola columna. */
.qcol-links{display:flex;flex-direction:column;padding-bottom:22px}
/* El .arw es un span con un <svg> inline dentro: el svg se apoya en la linea
   base, asi que el span medi­a line-height y reservaba hueco de descendente
   debajo. align-items:center centraba esa caja alta, no la flecha, y la
   flecha quedaba por encima del centro del texto. */
.qall .arw{line-height:0}
.qall .arw svg{display:block}
.fu--retardo{animation-delay:.28s}

/* Enlace de salto al contenido: solo visible al recibir el foco con teclado. */
.skiplink{position:absolute;top:0;left:0;z-index:100;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);background:#211D1A;color:#fff;font-weight:700;font-size:13px;letter-spacing:.06em;text-transform:uppercase;padding:14px 22px;white-space:nowrap}
.skiplink:focus{width:auto;height:auto;clip-path:none;color:#fff}

/* ---------- Huecos de foto pendiente ----------
   Solo se dibujan para quien puede editar (ver inc/huecos.php): reproducen el
   rótulo que el artboard ponía en cada image-slot, para que el equipo vea qué
   falta sin que el visitante llegue a ver una caja gris. */
.hueco{position:relative;background:var(--beige-18);display:flex;align-items:center;justify-content:center;min-height:100%;padding:32px}
.hueco::after{content:"";position:absolute;inset:12px;border:1px dashed rgba(82,63,52,.3);pointer-events:none}
.hueco-marco{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center;gap:10px;text-align:center;max-width:320px}
.hueco-marco svg{width:30px;height:30px;color:rgba(82,63,52,.4)}
.hueco-t{font-weight:600;font-size:14px;line-height:1.4;color:rgba(82,63,52,.72);text-wrap:pretty}
.hueco-n{font-size:11.5px;line-height:1.5;color:rgba(82,63,52,.5);text-wrap:pretty}
.hueco--oscuro{background:#211D1A}
.hueco--oscuro::after{border-color:rgba(255,255,255,.2)}
.hueco--oscuro .hueco-marco svg{color:rgba(255,255,255,.4)}
.hueco--oscuro .hueco-t{color:rgba(255,255,255,.72)}
.hueco--oscuro .hueco-n{color:rgba(255,255,255,.45)}

/* El rotulo de categoria del mega-menu ocupa una o dos lineas segun lo largo
   que sea el nombre («Consumibles y recambios» parte). Se le reservan siempre
   dos, para que las cuatro columnas arranquen su lista a la misma altura. */
.qcol .qgroup{line-height:1.2;min-height:2.4em;display:flex;align-items:flex-start;margin-bottom:10px}
/* El titular de la columna ara es un enllac. Es subratlla en passar-hi per
   sobre, que es l'unic que el distingeix d'un titular qualsevol: el color
   ja es el vermell d'accent i no li queda marge per canviar. */
.qcol .qgroup--enlace{text-decoration:none;transition:opacity .2s ease}
.qcol .qgroup--enlace:hover{text-decoration:underline;text-underline-offset:3px}

/* La cita solo arranca oculta si el JS va a revelarla (ver quicial.js). */
.quicial-anim .cita-texto{opacity:0;transform:translateY(14px)}

/* Dentro de un marco cuadrado el hueco lo respeta; suelto, ocupa el alto que
   le dé el contenedor. */
.pgal-hero .hueco,.thumb .hueco,.pdet-fig .hueco,.recimg .hueco{position:absolute;inset:0;aspect-ratio:auto}

/* Datos de contacto del pie con su icono: fijo, movil y correo. */
.footlink--ico{display:flex;align-items:center;gap:10px}
.footlink--ico svg{width:16px;height:16px;flex:none;opacity:.65;transition:opacity .18s ease}
.footlink--ico:hover svg{opacity:1}
/* El hueco rellena su marco por completo, para que no asome el fondo oscuro
   que esos contenedores llevan mientras esperan la foto. */
.empresa-visual .hueco,.split-visual .hueco,.svc-img .hueco,.pcta-img .hueco,.ctablock-img .hueco{position:absolute;inset:0}

/* ---------- Cabecera oscura de página interior ----------
   Compartida por Sectores, Servicio técnico, Sobre Quicial, Contacto, las
   páginas legales y los listados. El antetítulo va en beix, no en vermell:
   sobre el fosc el rojo del design system pierde legibilidad. */
.pagehero .secwrap{width:100%}
/* Fondo fotografico del hero. El velo en degradado mantiene legible el texto
   sobre la foto: opaco a la izquierda, donde va el titular, y transparente a la
   derecha, para que se vea la imagen. */
.pagehero{position:relative;overflow:hidden}
.pagehero-fondo{position:absolute;inset:0}
.pagehero-fondo img{width:100%;height:100%;object-fit:cover;object-position:right center;display:block}
.pagehero--foto::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(33,29,26,.96) 0%,rgba(33,29,26,.8) 38%,rgba(33,29,26,.22) 72%,rgba(33,29,26,0) 100%)}
.pagehero .secwrap{position:relative;z-index:1}
.pagehero-caja{max-width:820px}
.pagehero-caja--estrecha{max-width:760px}
.pagehero .eyebrow{color:var(--beige)}
.pagehero-t{color:#fff;text-wrap:balance}
.pagehero-p{font-size:17px;line-height:1.65;color:rgba(255,255,255,.72);margin:20px 0 0;max-width:620px;text-wrap:pretty}
.pagehero-acciones{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.pagehero-acciones .btn-light{border-color:rgba(255,255,255,.14)}

@media (max-width: 720px) {
  .pagehero-p{font-size:16px}
}