/* =====================================================================
CQS Chemical Solutions — estilos para WordPress
Generado desde assets/css/styles.css por 0-generador/build-wp.js.
NO editar a mano: edita el original y vuelve a ejecutar el generador.
Todo va encapsulado en :is(#cqs,.cqs), que pesa como un ID: ni Astra ni WPBakery
entran, y estos estilos no salen del contenedor.
--cqs-rem fija la base en 16px aunque el tema use html{font-size:62.5%}.
===================================================================== */
:is(#cqs,.cqs){ --cqs-rem:16px; }
/* ==========================================================================
CQS Chemical Solutions — Shared Stylesheet
Diseño basado en el brochure oficial 2026
CQS S.A.
========================================================================== */
:is(#cqs,.cqs){
/* Brochure Navy & Brand Tokens */
--cqs-navy:#2A2C6A;
--cqs-navy-dark:#1F2150;
--cqs-navy-light:#3D3F84;
/* Brand from Brandbook */
--cqs-blue:#1E92D6;
--cqs-blue-dark:#1474B0;
--cqs-blue-deep:#0E5180;
--cqs-blue-darker:#0A3E63;
--cqs-blue-light:#E8F4FB;
/* Yellow / Gold */
--cqs-yellow:#F2B233;
--cqs-yellow-soft:#FFE25F;
--cqs-yellow-dark:#D69922;
--cqs-yellow-light:#FFF1D0;
/* Neutrals */
--cqs-dark:#0F1729;
--cqs-grey-900:#1F2937;
--cqs-grey-700:#4A5568;
--cqs-grey-500:#718096;
--cqs-grey-300:#CBD5E0;
--cqs-grey-200:#E2E8F0;
--cqs-grey-100:#F4F7FA;
--cqs-grey-50:#FAFBFD;
--cqs-white:#FFFFFF;
/* Typography */
--font-display:'Plus Jakarta Sans',sans-serif;
--font-heading:'Manrope',sans-serif;
--font-body:'DM Sans',sans-serif;
/* Radii */
--radius-sm:6px;
--radius-md:12px;
--radius-lg:20px;
--radius-xl:28px;
/* Shadows */
--shadow-xs:0 2px 6px rgba(14,81,128,0.06);
--shadow-sm:0 4px 12px rgba(14,81,128,0.08);
--shadow-md:0 10px 30px rgba(14,81,128,0.12);
--shadow-lg:0 20px 50px rgba(14,81,128,0.18);
--shadow-xl:0 30px 80px rgba(14,81,128,0.25);
/* Motion */
--transition:.45s cubic-bezier(.2,.8,.2,1);
--bezier:cubic-bezier(.7,0,.3,1);
}
/* ---------- corte de herencia ----------
Estas propiedades se HEREDAN del del tema y el reset del sitio
(*{margin:0;padding:0}) no las toca. Si Astra o una plantilla ponen
body{letter-spacing:.02em; text-align:justify; font-size:1.8rem}, se cuelan
en toda la web. Aquí se devuelven a su valor inicial en la raíz de .cqs.
Solo propiedades HEREDABLES, y ninguna que el sitio ya fije en su body{}
(font-family, color y line-height vienen de ahí y se aplican a este mismo
selector unas líneas más arriba: repetirlas aquí las rompería).
Tampoco list-style: el sitio la fija en ul{} y forzarla aquí cambiaría el
valor heredado en TODOS los elementos respecto del original. */
:is(#cqs,.cqs){
/* En el original el vale 16px, el valor por defecto del navegador:
el mismo que --cqs-rem, así todo el sitio mide igual aunque el tema use
html{font-size:62.5%}. */
font-size:var(--cqs-rem);
/* text-align:start, no left. Se ven igual, pero el original computa "start"
y con "left" salen cientos de diferencias falsas al medir. */
text-align:start;
letter-spacing:normal; word-spacing:normal; text-indent:0;
text-transform:none; font-style:normal; font-variant:normal; text-shadow:none;
white-space:normal; direction:ltr; font-stretch:normal;
}
/* ---------- reset interno: neutraliza tema y WPBakery dentro de .cqs ----------
El sitio ya trae *{margin:0;padding:0;box-sizing:border-box}, pero el tema
puede pintar elementos que ese reset no cubre (fondos, bordes, tablas). */
:is(#cqs,.cqs) :is(div,section,article,aside,main,header,footer,nav,form,figure,figcaption){
background:none; border-width:0; float:none;
}
/* border-width:0, NUNCA "border:0": el atajo tocaría también el estilo y el
color, y algunas reglas del sitio solo fijan el ancho.
El COLOR sí hay que devolverlo a su valor inicial (currentcolor) aparte: el
tema pone img{border:3px solid pink} y, aunque el ancho quede en 0, el color
heredado seguía siendo rosa y aparecía en cuanto algo daba ancho al borde. */
:is(#cqs,.cqs) :is(div,section,article,aside,main,header,footer,nav,form,figure,figcaption,
table,tr,td,th,img,iframe,ul,ol,li,p,span,a,h1,h2,h3,h4,h5,h6){
border-color:currentcolor;
}
:is(#cqs,.cqs) :is(table,tr,td,th){ border-width:0; background:none; }
:is(#cqs,.cqs) img{ border-width:0; box-shadow:none; }
:is(#cqs,.cqs) iframe{ border-width:0; }
/* Titulares: heredan del contenedor, como en el original. "inherit" y no
valores fijos, para reproducir exactamente lo que hacía el sitio estático.
(font-family, color, line-height y letter-spacing sí los fija el propio
styles.css en h1-h6 y por eso no aparecen aquí.) */
:is(#cqs,.cqs) :is(h1,h2,h3,h4,h5,h6){
font-style:inherit; text-transform:inherit; word-spacing:inherit; text-align:inherit;
padding:0; border-width:0; background:none; text-shadow:none;
}
/* Astra define reglas como nav a{font-weight:400} o .site-footer a{color:...}
que ganan a la herencia. En el original estos enlaces heredan del padre.
⚠️ UN SOLO SELECTOR, "${P} a", y nada más específico. Pesa (1,0,1): le gana
al "nav a" del tema (0,0,2) y PIERDE contra cualquier regla del propio sitio
que lleve una clase, como ".nav-menu a" (1,1,1). Ese equilibrio es todo el
truco. La versión anterior usaba ":is(nav,header,footer) a:not(...)", que
pesa (1,1,3) y le ganaba al propio sitio: los enlaces del menú perdían su
color y salían con el gris del body. */
:is(#cqs,.cqs) a{ box-shadow:none; background:none; font-family:inherit; font-size:inherit;
font-weight:inherit; line-height:inherit; text-align:inherit;
text-transform:inherit; letter-spacing:inherit; font-style:inherit; }
:is(#cqs,.cqs) a:hover{ text-decoration:none; }
/* Campos de formulario: Astra los engorda (min-height, fondo gris, borde).
"revert" —y no un valor fijo— devuelve la apariencia del NAVEGADOR, que es
justo lo que tenían en el original: el sitio no les da tamaño de letra ni
fondo, así que usaban el del navegador (13.33px y blanco en los
del header se la pasaba a sus 21 descendientes y ninguno coincidía con el
original, que hereda "disc" del body. Con inherit se comporta igual que si
no hubiera regla, que es lo que pasa en el sitio estático. */
:is(#cqs,.cqs) .nav{ display:revert; flex-wrap:revert; padding:0; margin:0; list-style:inherit; background-color:transparent; }
/* Mismo caso: Bootstrap pone list-style:none en estas clases y, como se
hereda, se la pasaban a todos sus hijos (el breadcrumb de /productos/
arrastraba 4 elementos). inherit = comportarse como si no hubiera regla. */
:is(#cqs,.cqs) :is(.breadcrumb,.menu,.list-unstyled,.list-inline,.pagination){ list-style:inherit; }
:is(#cqs,.cqs) .breadcrumb{ display:revert; padding:0; margin:0; background:none; }
/* Bootstrap define .btn{border:1px solid transparent}: 2px de más de alto y de
ancho en los 69 botones del sitio. Va aquí arriba para que cualquier regla
del propio sitio sobre .btn —que viene después en el archivo— le gane. */
:is(#cqs,.cqs) .btn{ border-width:0; }
:is(#cqs,.cqs) .card{ background:revert; border:0; border-radius:inherit; }
:is(#cqs,.cqs) .badge{ padding:revert; font-size:inherit; line-height:inherit; border-radius:inherit; }
:is(#cqs,.cqs) .modal{ position:revert; inset:revert; width:revert; height:revert; overflow:revert; }
:is(#cqs,.cqs), :is(#cqs,.cqs) *{margin:0;padding:0;box-sizing:border-box;}
:is(#cqs,.cqs){scroll-behavior:smooth;}
:is(#cqs,.cqs){
font-family:var(--font-body);
color:var(--cqs-grey-700);
line-height:1.65;
background:var(--cqs-white);
overflow-x:hidden;
}
:is(#cqs,.cqs) img{max-width:100%;display:block;}
:is(#cqs,.cqs) a{text-decoration:none;color:inherit;transition:color var(--transition);}
:is(#cqs,.cqs) ul{list-style:none;}
:is(#cqs,.cqs) button{cursor:pointer;border:0;background:none;font-family:inherit;}
:is(#cqs,.cqs) h1, :is(#cqs,.cqs) h2, :is(#cqs,.cqs) h3, :is(#cqs,.cqs) h4, :is(#cqs,.cqs) h5, :is(#cqs,.cqs) h6{
font-family:var(--font-heading);
color:var(--cqs-navy);
line-height:1.18;
font-weight:800;
letter-spacing:-0.02em;
}
:is(#cqs,.cqs)::selection, :is(#cqs,.cqs) ::selection{background:var(--cqs-yellow);color:var(--cqs-navy);}
:is(#cqs,.cqs) .container{
width:100%;
max-width:1280px;
margin:0 auto;
padding:0 24px;
}
/* ==========================================================================
Section primitives
========================================================================== */
:is(#cqs,.cqs) .section{padding:110px 0;position:relative;}
:is(#cqs,.cqs) .section-tag{
display:inline-flex;align-items:center;gap:14px;
color:var(--cqs-yellow);
font-family:var(--font-heading);font-weight:800;
font-size:14px;letter-spacing:0.18em;text-transform:uppercase;
margin-bottom:18px;
}
:is(#cqs,.cqs) .section-tag::before{
content:"\f078";
font-family:"Font Awesome 6 Free";font-weight:900;
color:var(--cqs-yellow);font-size:18px;
}
:is(#cqs,.cqs) .section-tag.alt{color:var(--cqs-blue);}
:is(#cqs,.cqs) .section-tag.alt::before{color:var(--cqs-yellow);}
:is(#cqs,.cqs) .section-title{
font-size:clamp(28px, 3.6vw, 50px);
margin-bottom:18px;line-height:1.1;
font-family:var(--font-display);
}
:is(#cqs,.cqs) .section-title .accent-yellow{color:var(--cqs-yellow);}
:is(#cqs,.cqs) .section-title .accent-blue{color:var(--cqs-blue);}
:is(#cqs,.cqs) .section-lead{color:var(--cqs-grey-700);font-size:17px;max-width:720px;line-height:1.7;}
:is(#cqs,.cqs) .text-center{text-align:center;}
:is(#cqs,.cqs) .text-center .section-tag{justify-content:center;}
:is(#cqs,.cqs) .text-center .section-lead{margin:0 auto;}
/* Sections on dark navy background */
:is(#cqs,.cqs) .section-dark{
background:var(--cqs-navy);color:#fff;
position:relative;overflow:hidden;
}
:is(#cqs,.cqs) .section-dark h1, :is(#cqs,.cqs) .section-dark h2, :is(#cqs,.cqs) .section-dark h3, :is(#cqs,.cqs) .section-dark h4, :is(#cqs,.cqs) .section-dark h5{color:#fff;}
:is(#cqs,.cqs) .section-dark .section-lead{color:rgba(255,255,255,0.85);}
/* Decorative curve (white arc on navy bg or vice versa) */
:is(#cqs,.cqs) .curve-wrap{position:relative;overflow:hidden;}
:is(#cqs,.cqs) .curve-wrap::before{
content:"";position:absolute;
width:140%;height:140%;
top:-20%;left:-70%;
border-radius:50%;
background:#fff;
z-index:0;
}
:is(#cqs,.cqs) .curve-wrap.curve-right::before{left:auto;right:-70%;}
:is(#cqs,.cqs) .curve-wrap > *{position:relative;z-index:1;}
/* Yellow corner accent (chevron) - replicates brochure style */
:is(#cqs,.cqs) .section-with-arrow{position:relative;}
:is(#cqs,.cqs) .section-with-arrow::before{
content:"";position:absolute;
top:30px;left:30px;
width:34px;height:34px;
background:url("data:image/svg+xml;utf8,