/* ===========================================================================
   CODE / PHARMA · paleta de marca
   ---------------------------------------------------------------------------
   Fecha : 20/08/2026 (v2, tras revisión de Jordi)
   Carga : después de style.css y cwb-layouts.css.
   Quitar: borrar la línea de pharma-brand.css en header.php.

   Code Industrial brand colour: a low-saturation industrial petrol.
   La rampa se deriva de ahí manteniendo tono y saturación (H 202° · S 40%) y
   moviendo solo la luminosidad, así que todo es la misma familia.

   REGLA DE ORO DE ESTE FICHERO
   ---------------------------
   Aquí solo se cambian COLORES. Nada de tamaños, pesos ni posiciones de
   componentes que code26 ya tiene resueltos: la primera versión tocó
   .cnumbermodel (peso y color) y se cargó el número grande del modelo
   operativo, que en code.barcelona es negro y pesado. Si un componente ya se ve
   bien en code.barcelona, aquí no se toca.
   =========================================================================== */

/* Fondo blanco explicito en html: sin esto, cualquier zona sin contenido
   pintado a tiempo (p.ej. video sin decodificar en un navegador automatizado)
   se ve negra en vez de blanca detras. */
html { background: #fff; }

:root {
  /* 22/08/2026: la rampa era la azul heredada de pharma (H 202 / S 40) con el
     300 ya cambiado al verde de marca. El verde quedaba solo entre azules, asi
     que "el verde de verdad" no se veia en ningun sitio salvo donde se usara
     justo ese escalon. Ahora los siete se derivan del propio #A5B5B0 --
     H 161 / S 10 -- moviendo solo la luminosidad (22/35/50/68/78/86/94), que
     es lo que este comentario decia desde el principio y no se habia hecho. */
  --pharma-900: #333E3A;
  --pharma-700: #50625D;
  --pharma-500: #738C84;
  --pharma-300: #A5B5B0;   /* ← brand */
  --pharma-200: #C1CDC9;
  --pharma-100: #D8DFDD;
  --pharma-050: #EEF1F0;

  /* El rosa de Code se mantiene: es lo único que impide que esto parezca las
     otras cuarenta webs pharma, todas azul y cian. */
  --accent: #FF608C;

  /* Remapeo de lo que ya usa el tema (68 usos, cambian solos). */
  --color1: var(--pharma-300);
  --color2: var(--pharma-100);
}

/* ---------------------------------------------------------------------------
   Texto pequeño: Roboto Condensed, peso 400. NO Roboto Mono.
   Corrección de Jordi el 21/08/2026 sobre una instrucción anterior mía que
   había interpretado mal: el mono se queda para lo que ya lo llevaba en el
   tema (nada, en la práctica -- .smini es el único sitio donde aparecía), y
   el texto pequeño pasa a Condensed en 400. El :hover del botón saltaba a
   peso 400 igual que el resto y desplazaba el texto: aquí también se fija.
   --------------------------------------------------------------------------- */
.smini,
.cta,
.cmenu *,
.smini a,
.iinputdefault,
.jqwrite,
.cwb-post-cta-pre {
  font-family: "Roboto Condensed", "Roboto Mono", monospace !important;
  font-weight: 400 !important;
}

.cta:hover {
  font-weight: 400 !important;
}

/* ---------------------------------------------------------------------------
   Botón secundario. Venía con fondo var(--color2) y texto var(--color1):
   gris sobre gris, ilegible. Fantasma con borde, que es lo que toca al lado de
   un botón sólido.
   --------------------------------------------------------------------------- */
/* Los selectores van escalados a propósito: cwb-layouts.css trae
   `.cwb-post-cta .cta2 { color: var(--color1)!important }`, que con dos clases
   e !important gana a un `.cta2` a secas por muy al final que se cargue. */
.cta2,
.cwb-post-cta .cta2,
.cwb-post-cta-dark .cta2 {
  background: transparent;
  border: 1px solid var(--black);
  color: var(--black) !important;
}

.cta2:hover,
.cwb-post-cta .cta2:hover,
.cwb-post-cta-dark .cta2:hover {
  background: var(--black);
  border-color: var(--black);
  color: #fff !important;
}

/* ---------------------------------------------------------------------------
   Bloque CTA. Sobre el azul de marca, TODO el texto en negro.
   #97BCD2 con negro da 11,0:1 — de sobra para AA y AAA.
   --------------------------------------------------------------------------- */
.cwb-post-cta {
  background: var(--pharma-050);
  /* cwb-layouts.css (migrado, no editar a mano) le pone border + margin
     lateral formando una "tarjeta" recuadrada -- eso es de codeweb26, no
     existe en el brand de code.barcelona, que va a sangre completa. */
  border: none;
  /* Aire por arriba: el bloque azul venia pegado a la seccion anterior. */
  margin: var(--sectionmargin) 0 0;
  padding: var(--sectionmargin) 0;
}

/* ---------------------------------------------------------------------------
   Eslogan del footer, "CODE IS A TRUSTED DIGITAL PARTNER".
   Es el eslogan base de la casa, pero venia en #F0F0F0 sobre blanco: en la
   practica invisible (comprobado tambien en code.barcelona, donde se pierde
   igual). Pasa al azul de marca para que se lea como marca de agua grande sin
   competir con el contenido.
   --------------------------------------------------------------------------- */
/* 22/08/2026: estaba en --pharma-200 (#B4CFDF), que es azul. La marca de este
   sitio es el verde industrial --pharma-300 / --color1 (#A5B5B0), asi que el
   eslogan salia de otra familia de color que el resto. Pasa al color de marca.
   OJO: la rampa --pharma-200/100/050 sigue siendo la azul heredada de pharma;
   solo el 300 se cambio a verde. Si aparece azul en otro sitio, viene de ahi. */
.cfooter .ctohcubic {
  color: var(--color1);
}

.cwb-post-cta-dark {
  background: var(--color1);
}

/* cwb-layouts.css pinta `.cwb-post-cta-dark *` en blanco. Se contrarresta con
   la misma forma de selector para que no haya texto blanco suelto. */
/* Con !important porque cwb-layouts.css pinta en blanco varios descendientes
   con selectores de dos clases. El botón principal se salva justo debajo, con
   más especificidad. */
.cwb-post-cta,
.cwb-post-cta *,
.cwb-post-cta-dark,
.cwb-post-cta-dark * {
  color: var(--black) !important;
}

/* ...menos el botón principal, que es negro sólido con texto blanco. Es el
   punto de máximo contraste de la sección y por eso funciona como llamada.
   (La regla general de arriba se lo comía: negro sobre negro.) */
.cwb-post-cta .cta:not(.cta2),
.cwb-post-cta-dark .cta:not(.cta2) {
  background: var(--black);
  border-color: var(--black);
  color: #fff !important;
}

/* ---------------------------------------------------------------------------
   Cabecera de la home.
   code26 trae `.home .cheader { background: rgba(103,128,134,.9) }` -- el
   #678086 de code.barcelona, su color de marca anterior al azul pharma.
   Va el color de marca, #97BCD2. El texto del menu es negro, y negro sobre
   #97BCD2 da 11:1 -- que es ademas la regla ya acordada para fondos branded.
   (Primero puse #223E4F, un tono derivado de la rampa: ni era el brand ni
   funcionaba, porque con texto negro se quedaba en 1.6 de contraste.)
   --------------------------------------------------------------------------- */
/* El :not(.cheaderwhite) es imprescindible. Al pasar el hero, el tema anade
   `cheaderwhite` al body y style.css lo vuelve blanco con
   `.cheaderwhite .cheader { background: rgba(255,255,255,.8) }`. Esa regla y
   esta tienen la MISMA especificidad (0,2,0), y como pharma-brand.css carga
   despues, sin el :not() ganabamos siempre y el header se quedaba azul para
   siempre. Detectado el 22/08/2026 comparando con code.barcelona, que si
   cambia a blanco al salir del hero. */
body.home:not(.cheaderwhite) .cheader {
  background: rgba(165, 181, 176, 0.9);
  backdrop-filter: blur(7.5px);
  -webkit-backdrop-filter: blur(7.5px);
}

body.home:not(.cheaderwhite) .cheader .ctaheaderidiomas.ejq-idiomasdrop {
  background: rgba(165, 181, 176, 0.9) !important;
}

/* El eslogan del header iba desplazado: al quitar el bloque del selector de
   idiomas se quedo sin su tope por la derecha. */
.csloganheader {
  right: 0px;
}

/* ---------------------------------------------------------------------------
   Cifras. cwb-home.css las trae en var(--color1) -- azul claro sobre un fondo
   casi blanco, con lo que el numero, que es lo que tiene que leerse primero,
   era lo que menos se veia. En negro.
   --------------------------------------------------------------------------- */
.cnumberdecada {
  color: var(--black);
}

/* ---------------------------------------------------------------------------
   Rampa de las tarjetas del modelo operativo (01 / 02 / 03 / 04).
   Solo el fondo. El número grande, los pesos y el resto se quedan como los
   tiene code26.
   --------------------------------------------------------------------------- */
.citemmodel  > .cinner::before { background-color: var(--pharma-050); }
.citemmodel2 > .cinner::before { background-color: var(--pharma-100); }
.citemmodel3 > .cinner::before { background-color: var(--pharma-200); }
.citemmodel4 > .cinner::before { background-color: var(--pharma-300); }

/* Mismo criterio para las 3 tarjetas "Decision 01/02/03" de /about/ (layout
   sobre-code): style.css las trae en gris neutro (#C8D0D2/#A1AEB1/#879CA1),
   sin relacion con la marca. Se sustituyen por la misma rampa azul de arriba,
   un escalon mas oscura por tarjeta. Pedido de Jordi, 24/08/2026. */
.cstepitem .cinner  { background-color: var(--pharma-100); }
.cstepitem2 .cinner { background-color: var(--pharma-200); }
.cstepitem3 .cinner { background-color: var(--pharma-300); }

/* ---------------------------------------------------------------------------
   Columnas del layout "free" (cwb/prose y el builder de case-study).
   Los subtitulos son h3 grandes acotados a 400px: uno de dos palabras ocupa una
   linea y otro de cuatro ocupa dos, con lo que el texto de esa columna arranca
   34px mas abajo que el de sus vecinas y la fila queda descuadrada.
   Se le da al h3 la altura de DOS lineas como minimo, que es lo que ocupa el
   caso peor a este ancho. Asi cuadran sin depender de que el copy sea corto,
   que es lo que no se puede garantizar en 313 paginas.
   --------------------------------------------------------------------------- */
/* Titulares de seccion unificados. El titular del bloque CTA venia de
   cwb-layouts.css con clamp(36px,5.2vw,64px) -- la escala de codeweb26 -- y se
   quedaba en 64px mientras el resto de titulares de la pagina iban a 78px.
   Ponerle las clases sh2/shtitle en el PHP no basta: .cwb-cta-title tiene la
   misma especificidad que h2,.sh2 y cwb-layouts.css carga despues de
   style.css, asi que gana por orden. Se iguala aqui, que carga el ultimo. */
.cwb-cta-title {
  font-size: calc(24px + 3.3vw);
  line-height: 0.9;
}

.ccontentfree .csingledescbuilderdesc h3 {
  /* 1.98em es la altura MEDIDA de un h3 de dos lineas a este tamano (72px con
     font-size 36,41px). No vale 2 * line-height: la caja real del h3 sale algo
     mas alta que dos veces su line-height. En em para que siga cuadrando
     cuando el tamano cambia con el viewport. */
  min-height: 1.98em;
}

/* ---------------------------------------------------------------------------
   Entradilla del hero simple: la primera linea es el titular de marca, asi que
   pesa mas que el resto del parrafo.
   --------------------------------------------------------------------------- */
/* Ojo con --fontm: NO es "medium" hacia arriba, son 16px, MENOS que el cuerpo
   (--font, 20px). Al usarlo la linea de marca salia mas pequena que el parrafo
   que tenia debajo. Se usa la escala de titulares del tema (.sh5), que es la
   que ya define un tamano por encima del texto corrido. */
.cwb-lead {
  font-size: calc(20px + .2vw);
  line-height: 1.25;
  font-weight: 400;
  margin-bottom: 18px;
}

/* ---------------------------------------------------------------------------
   Carrusel de servicios: fondo gris claro para separarlo del hero, que es
   blanco, y fichas en blanco para que recorten sobre el.
   --------------------------------------------------------------------------- */
.csectionmodelhomeservices {
  background: var(--lightgray);
  padding-bottom: var(--sectionmargin);
}

.csectionmodelhomeservices .citemservicio,
.csectionmodelhomeservices .citemserviciohome {
  background: #fff;
}

/* ---------------------------------------------------------------------------
   Rampa de las fichas de servicio/sector (citemserviciocat1..4).

   Las de codeweb26 no se pueden usar tal cual, por dos motivos:
     - cat3 venia con #7A7797, que es el morado de marca de CWB y aqui no pinta
       nada;
     - cat1 lleva `.citemserviciocat1 * { color: var(--color2) }`. Alli
       --color1 es azul marino oscuro y --color2 claro, asi que salia texto
       claro sobre fondo oscuro. Aqui --color1 es el azul CLARO de marca, con
       lo que la regla se invertia y dejaba texto #CDDFEA sobre #97BCD2:
       contraste 1.47, ilegible. Medido el 22/08/2026.

   Se redefine la rampa entera con la escala pharma y texto negro, que es lo
   que ya se acordo para fondos de marca. Negro sobre #97BCD2 da 11:1.
   --------------------------------------------------------------------------- */
.citemserviciocat1 { background: var(--pharma-300); }
.citemserviciocat2 { background: var(--pharma-200); }
.citemserviciocat3 { background: var(--pharma-100); }
.citemserviciocat4 { background: var(--pharma-050); }

.citemserviciocat1 *,
.citemserviciocat2 *,
.citemserviciocat3 *,
.citemserviciocat4 * {
  color: var(--black);
}

.citemserviciocat1 .cgridtitularitem,
.citemserviciocat2 .cgridtitularitem,
.citemserviciocat3 .cgridtitularitem,
.citemserviciocat4 .cgridtitularitem {
  border-color: var(--black);
}

/* ---------------------------------------------------------------------------
   FAQ. En móvil la pregunta se quedaba en 11px heredados de .smini, que es
   tamaño de etiqueta y no de pregunta.
   --------------------------------------------------------------------------- */
.cfaqrepeaterinner {
  font-size: 15px;
}

@media (max-width: 700px) {
  .cfaqrepeaterinner {
    font-size: 14px;
    line-height: 1.45;
  }
}

/* ---------------------------------------------------------------------------
   7. Compatibilidad estructural: la tabla con scroll (T-COMPARE) no era una
   pieza de marca, pero el CSS migrado de codeweb26 la dejaba entera detrás de
   `body.single-post .ccoltext table`. Esa clase de body solo la pone WordPress
   en el single de un `post` del blog -- nuestras páginas de comparativa son
   `page`, nunca llevan esa clase, así que la tabla se habría visto sin estilo
   en todas las 8 comparativas. Verificado el 21/08/2026 construyendo el primer
   ejemplo real (wordpress-vs-aem-for-pharma): sin este bloque, la tabla salía
   con el `<table>` por defecto del navegador.

   Se amplía a `.cwb-table-auto` (la clase con la que assets/cwb/compare.php
   envuelve la tabla) sin togar el original en cwb-layouts.css -- ese fichero
   se regenera con extract.php y cualquier edición ahí se perdería.
   --------------------------------------------------------------------------- */
.cwb-table-auto .cb-premium-table-shell{position:relative;width:100%;max-width:100%;margin:34px 0}

/* ===========================================================================
   8. Rejilla de "child-index" (assets/cwb/child-index.php, ej. "What we
   build" en cada hub) desproporcionada frente al slick de la home.

   OJO: .contentcaseshome tambien la usa sectors-grid.php (los "sectores" de
   la home, "PHARMACEUTICAL LABORATORIES" etc.) -- primera version de este
   bloque apuntaba a `.contentcaseshome .citemservicio` a secas y rompio esa
   seccion (el aspect-ratio SI le hace falta ahi, y el topbar .cgridtitular
   quedo mal espaciado). Las dos piezas comparten contenedor pero no columna:
   sectors-grid usa .col50 (2 por fila), child-index usa .col33 (3 por fila)
   -- se distingue por ahi, no por .contentcaseshome solo.

   Las dos comparten la misma clase base .citemservicio con el slick de la
   home, que usa .citemserviciohome con min-height fijo (300px) en vez de
   `aspect-ratio:40/27` (cwb-layouts.css) -- en una columna ancha (col33
   escritorio) ese ratio da una tarjeta mucho mas alta de lo que el
   contenido necesita, dejando un hueco vacio antes del parrafo. Se
   sustituye por el mismo min-height que ya usa el slick, SOLO en col33.
   No es un cambio de color -- excepcion justificada a la regla de este
   fichero, mismo criterio que el bloque 7. Pedido de Jordi, 22/08/2026.
   --------------------------------------------------------------------------- */
.contentcaseshome .col33 .citemservicio {
  aspect-ratio: unset;
  min-height: 260px;
  padding: var(--cardpaddings);
}
@media (max-width: 767px) {
  .contentcaseshome .col33 .citemservicio {
    min-height: 220px;
  }
}
/* El hueco no era solo la altura de la tarjeta: .citemservicio > :last-child
   trae `margin-top:auto` (pensado para el slider, donde empuja la
   descripcion al fondo de una tarjeta de altura fija). En la rejilla
   estatica eso deja el parrafo separado del titulo aunque la tarjeta ya sea
   mas baja. Se sustituye por un margen fijo, pegado al titulo -- solo en
   col33 (child-index), sectors-grid (col50) no lleva este ultimo hijo. */
.contentcaseshome .col33 .citemservicio > :last-child {
  margin-top: 12px;
}
/* El gap horizontal/vertical de child-index venia de --gap:10px (sistema
   base de grid.css, usado en todo el tema), el doble de ajustado que el
   slick de la home (.cslidewrap usa 5px por lado, 10px total). Reducido
   solo cuando la fila contiene columnas col33 (child-index), para no tocar
   el gap de sectors-grid (col50) ni del resto del sitio. */
.contentcaseshome .row:has(> .col33) {
  --gap: 5px;
}

/* ===========================================================================
   9. El eyebrow del hero de home ("Pharmaceutical digital agency") se
   ocultaba por completo bajo 1000px (`.csectiontexthome1 .sh5{display:none}`
   en cwb-home.css, que se regenera con extract.php -- no se toca ahi). Se
   revierte: el texto es informativo (contexto de marca antes del H1), no
   decorativo, y su ausencia deja un hueco vacio sobre el titular en movil.
   Pedido de Jordi, 22/08/2026 ("en mobile el hero esta mal").

   El color en negro se aplica SIEMPRE, no solo en movil: la regla
   `.scolor2{color:var(--color2)}` de style.css (la que queda tras quitar
   el bloque 47 duplicado y roto) resuelve a un azul casi igual al fondo del
   hero tambien en escritorio -- ahi antes se veia negro solo porque la
   regla rota (var(--color3), variable inexistente) ganaba por accidente.
   Corregido a proposito ahora, en escritorio y movil. Pedido de Jordi.
   --------------------------------------------------------------------------- */
.csectiontexthome1 .sh5 {
  color: #000;
  margin-bottom: 12px;
}
@media (max-width: 1000px) {
  .csectiontexthome1 .sh5 {
    display: block;
  }
}

/* ===========================================================================
   10. Hero de home en movil: 3 problemas juntos ("en mobile el hero esta
   mal"). Pedido de Jordi, 22/08/2026.

   a) El hueco enorme entre el titular y los botones: .csectionfull fija
   `height:calc(100vh - header)` (style.css), con la MISMA especificidad que
   el `.csectionfullhome{height:auto}` que estil-responsive.css ya intentaba
   aplicar en movil -- pero como el elemento es un flex item, el navegador
   resuelve min-height:auto a un tamano real basado en el 100vh heredado en
   vez de al contenido, así que el intento existente no bastaba. Se fuerza
   aqui, donde pharma-brand.css es el ultimo fichero en cargar y gana la
   cascada de verdad.
   b) El titular principal (.sh1) usa `calc(35px + 5.8vw)` SIN reducir en el
   breakpoint movil real (la regla de 1200px repite la misma formula que
   escritorio) -- a 375px de ancho eso da ~57px, una palabra por linea. Se
   reduce a algo legible que cabe 2-3 palabras por linea.
   c) El eyebrow ya visible (bloque 9) seguia en --color2, un azul casi
   identico al fondo -- puesto en negro explicitamente para movil.
   --------------------------------------------------------------------------- */
@media (max-width: 767px) {
  /* Cada nivel de esta cadena hereda height:100% de su padre (visto en
     style.css: .csectionfullhome .csectiontext{height:100%}), asi que
     forzar auto solo en el contenedor exterior no bastaba -- el hijo
     seguia heredando el 100% del ancestro que ya media 100vh. Se rompe la
     cadena entera. */
  .csectionfullhome,
  .csectionfullhome .csectiontext,
  .csectiontexthomewrap,
  .csectiontexthome {
    height: auto !important;
    min-height: 0 !important;
  }
  .csectionfullhome .sh1,
  h1.sh1, .sh1 {
    font-size: 34px !important;
  }
  /* El "hueco" no era height:100vh fantasma (eso ya se corrige arriba) --
     el laptop (.cdevicehome) SI esta en el flujo normal, apilado bajo los
     botones. Solo le sobraba aire encima. */
  .cdevicehome {
    margin-top: 20px;
  }
  /* El portatil se salia por la derecha: cwb-home-tune.css trae
     `.csectionfullhome .cdevicehome{transform:translateX(41%)}` (pensado
     para el layout de escritorio, donde el device comparte fila con el
     texto) con mas especificidad que el reset a `transform:none` de
     cwb-home.css para movil, asi que ganaba tambien aqui y desplazaba el
     device -- ya a 100% de ancho -- otro 41% mas hacia la derecha. */
  .csectionfullhome .cdevicehome {
    transform: none !important;
  }
}

/* El menu paso de 4 items (Work/Operating Model/About/Contact, con
   margin-right:100px cada uno en style.css -- pensado para pocos items) a
   11 tras anadir los 7 hubs de servicio. Con 100px de margen no cabian en
   una linea y se solapaban con el badge de la derecha. Se reduce el margen
   y el tamano de letra para que quepan sin romper el resto del header
   (solo afecta a .cmenuwrap, no a otros usos de la clase base). Pedido de
   Jordi, 22/08/2026. */
.cmenuwrap li a {
  margin-right: 22px;
  font-size: 11px;
}
@media (min-width: 1600px) {
  .cmenuwrap li a {
    margin-right: 28px;
  }
}

/* "Services" agrupa Web Development/Marketing/Brand/Platforms/Solutions/
   Technology en un desplegable, para no llenar la barra de 11 items sueltos.
   El tema no traia CSS de submenu (style.css solo pone `li{display:
   inline-block}` a todos los niveles, asi que el hijo salia en linea junto
   a los de primer nivel). Oculto por defecto, visible al pasar el raton por
   encima del padre en escritorio; en movil el burger usa .cmenu-open en vez
   de :hover, ver cwb-nav-submenu.js. Pedido de Jordi, 22/08/2026. */
.cmenuwrap .sub-menu {
  display: none;
  position: fixed;
  top: var(--headerheight);
  left: 0;
  min-width: 220px;
  /* El color/opacidad/blur reales los fija cwb-nav-submenu.js, copiados en
     directo del propio .cheader (mismo fondo azul o blanco, mismo blur,
     misma opacidad, en cualquier estado de scroll) -- ver bloque JS, mas
     fiable que replicar cada combinacion de clases a mano en CSS, que se
     desincroniza en cuanto el header cambia. Aqui solo la estructura. */
  border: 1px solid var(--stroke);
  padding: 12px 0;
  z-index: 599;
}
.cmenuwrap .sub-menu li a {
  color: inherit;
}
.cmenuwrap .menu-item-has-children {
  position: relative;
}
.cmenuwrap .menu-item-has-children > a {
  cursor: pointer;
}
.cmenuwrap .menu-item-has-children:hover > .sub-menu,
.cmenuwrap .menu-item-has-children.cmenu-open > .sub-menu {
  display: block;
}
.cmenuwrap .sub-menu li {
  display: block !important;
}
.cmenuwrap .sub-menu li a {
  display: block;
  margin-right: 0;
  padding: 8px 24px;
  white-space: nowrap;
}
.cmenuwrapresponsive .sub-menu {
  display: none;
  padding-left: 20px;
}
.cmenuwrapresponsive .menu-item-has-children.cmenu-open > .sub-menu {
  display: block;
}
.cmenuwrapresponsive .sub-menu li {
  display: block !important;
}
/* Sin esto el submenu desplegado se veia identico a los items de primer
   nivel (mismo tamano, mismo centrado, misma linea divisoria) y no se
   distinguia que eran hijos de "Services". Letra mas pequena, alineado a
   la izquierda con sangria y fondo tenue para diferenciarlo. Pedido de
   Jordi, 22/08/2026. */
.cmenuwrapresponsive .sub-menu li a {
  font-size: 14px;
  text-align: left;
  padding: 10px 16px;
  border-top: 1px solid rgba(0, 0, 0, 0.12);
  background: rgba(0, 0, 0, 0.035);
}
.cmenuwrapresponsive .sub-menu li:first-child a {
  border-top: none;
}

/* Bug real del tema, no de marca (excepcion a la regla de oro de arriba,
   igual que el bloque T-COMPARE de mas abajo): style.css linea ~513 pone
   `body,input,textarea,a,...{font-size:var(--font)}` -- un 24px fijo
   directamente sobre el elemento <a>. Al ser una regla que apunta al propio
   <a>, gana siempre a la herencia del parrafo que lo contiene (aunque ese
   parrafo use una clase con mas especificidad, un valor heredado nunca
   pisa uno declarado sobre el propio elemento). Resultado: cualquier enlace
   dentro de un <p> -- como los de interlinking a otros sectores/servicios
   en cwb_prose -- sale un 33% mas grande que el resto de la frase (24px
   contra los 18px de --fontm). Se ve en /industries/ y se repetira en
   cualquier parrafo con enlaces. Detectado por Jordi el 24/08/2026. */
p a {
  font-size: inherit;
  line-height: inherit;
}

.cwb-table-auto .cb-premium-table-scroll{width:100%;max-width:100%;overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;border-radius:18px}
.cwb-table-auto table{width:100%;max-width:100%;border-collapse:separate!important;border-spacing:0!important;margin:34px 0!important;font-size:15px!important;line-height:1.55!important;background:#fff!important;border:1px solid rgba(19,0,70,.12)!important;border-radius:18px!important;overflow:hidden!important;box-shadow:0 18px 50px rgba(19,0,70,.08)!important}
.cwb-table-auto .cb-premium-table-scroll table{margin:0!important}
.cwb-table-auto table th{background:var(--color1)!important;color:#fff!important;font-weight:700!important;text-align:left!important;padding:16px 18px!important;border:0!important;border-bottom:1px solid rgba(255,255,255,.16)!important;vertical-align:top!important}
.cwb-table-auto table td{padding:16px 18px!important;border:0!important;border-bottom:1px solid rgba(19,0,70,.09)!important;vertical-align:top!important;color:#1f1f1f!important;background:transparent!important}
.cwb-table-auto table tbody tr:nth-child(even){background:rgba(19,0,70,.025)!important}
.cwb-table-auto table tbody tr:hover{background:rgba(19,0,70,.045)!important}
.cwb-table-auto table tbody tr:last-child td{border-bottom:0!important}
.cwb-table-auto table thead tr:first-child th:first-child{border-top-left-radius:18px!important}
.cwb-table-auto table thead tr:first-child th:last-child{border-top-right-radius:18px!important}
.cwb-table-auto .cb-table-arrow{display:none;position:absolute;right:10px;top:50%;z-index:20;width:34px;height:34px;padding:0;border:1px solid rgba(19,0,70,.16);border-radius:999px;background:rgba(255,255,255,.94);color:var(--color1);box-shadow:0 10px 30px rgba(19,0,70,.18);transform:translateY(-50%);cursor:pointer;align-items:center;justify-content:center;font-size:18px;line-height:1;font-weight:800;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.cwb-table-auto .cb-table-arrow span{display:block;transform:translateY(-1px)}
/* La clase de estado la pone el JS en .cb-premium-table-shell, no en
   .cwb-table-auto -- confundir los dos deja la flecha siempre oculta. */
.cwb-table-auto .cb-premium-table-shell.cb-table-can-scroll .cb-table-arrow{display:flex;animation:cbTableArrowBounce 1.15s ease-in-out infinite}
.cwb-table-auto .cb-premium-table-shell.cb-table-at-end .cb-table-arrow{display:none!important}
@keyframes cbTableArrowBounce{0%,100%{transform:translateY(-50%) translateX(0)}50%{transform:translateY(-50%) translateX(6px)}}
.cwb-table-auto .cb-premium-table-scroll::-webkit-scrollbar{height:8px}
.cwb-table-auto .cb-premium-table-scroll::-webkit-scrollbar-track{background:rgba(19,0,70,.06);border-radius:999px}
.cwb-table-auto .cb-premium-table-scroll::-webkit-scrollbar-thumb{background:rgba(19,0,70,.35);border-radius:999px}

@media (max-width:767px){
  .cwb-table-auto .cb-premium-table-shell{margin:30px 0}
  .cwb-table-auto .cb-premium-table-scroll{border-radius:16px}
  .cwb-table-auto .cb-premium-table-scroll table{display:table!important;width:100%!important;min-width:540px!important;max-width:none!important;margin:0!important;overflow:visible!important;border-radius:16px!important;font-size:12px!important;line-height:1.36!important;box-shadow:0 14px 36px rgba(19,0,70,.08)!important}
  .cwb-table-auto .cb-premium-table-scroll table thead{display:table-header-group!important}
  .cwb-table-auto .cb-premium-table-scroll table tbody{display:table-row-group!important}
  .cwb-table-auto .cb-premium-table-scroll table tr{display:table-row!important}
  .cwb-table-auto .cb-premium-table-scroll table th,
  .cwb-table-auto .cb-premium-table-scroll table td{display:table-cell!important;padding:10px 11px!important;min-width:118px!important}
  .cwb-table-auto .cb-premium-table-scroll table th{font-size:10.8px!important;line-height:1.25!important;white-space:normal!important}
  .cwb-table-auto .cb-premium-table-scroll table td{font-size:12px!important;line-height:1.36!important;white-space:normal!important}
  .cwb-table-auto .cb-table-arrow{width:32px;height:32px;right:10px;font-size:17px}
}

/* ---------------------------------------------------------------------------
   /insights/*: columna unica de 1100px, SOLO para el cuerpo del articulo
   (.contentsmall, layout "article" de prose.php) y la FAQ. `.parent-pageid-616`
   lo pone WordPress solo en las paginas hijas de Insights, asi que no hace
   falta tocar page.php ni marcar nada pagina por pagina.
   El hero (page-hero/.csectioncasos) SI entra tambien -- a Jordi le
   parecio raro un H1 a todo el ancho seguido de un cuerpo estrecho debajo.
   La cabecera propia de prose.php ("IN THIS ARTICLE" + su titulo, pintada
   por _head.php antes de .ccoltext) entra por el mismo motivo, via
   `section:has(.ccoltext)`.
   NO se toca el bloque de cierre "Build a..." (cta.php/.cwb-post-cta): a
   900px su titular grande (mismo tamano que el H1 del hero) se salia de la
   caja y se cortaba -- visto en vivo el 24/08/2026, "MULTILINGUAL" quedaba
   en "MULTILING". Titulares del articulo en negro, no en el azul de marca
   (--color1) que trae .ccoltext de fabrica -- eso es un acento de marca, no
   como se lee un articulo largo. Pedido de Jordi, 24/08/2026.

   REVISION 24/08/2026: la primera version centraba el cuerpo (contentsmall,
   margin:auto heredado de grid.css) -- Jordi pidio en su lugar el layout de
   /legal-notice/ (.cpageblanktext en style.css): seccion a ancho completo,
   pero el TEXTO limitado y pegado a la izquierda, sin centrar nada. Se
   revierte el ancho de los contenedores exteriores a su tamano de fabrica
   (contentxlarge, sin max-width propio) y se limita solo el texto en si,
   sin margin:auto -- por defecto en flujo de bloque eso ya alinea a la
   izquierda, igual que .cpageblanktext. */
/* .contentsmall (ancestor real de .ccoltext en el layout articulo de
   prose.php) trae su propio max-width:1000px + margin:auto de fabrica
   (cwb-layouts.css / grid.css) -- eso seguia centrando el cuerpo aunque
   .ccoltext tuviera su propio max-width, porque un hijo no puede ser mas
   ancho que un padre ya estrecho. Se neutraliza en el propio .contentsmall. */
body.parent-pageid-616 .contentsmall {
  max-width: 1200px;
  margin-left: 0;
  margin-right: 0;
  /* .contentsmall no trae el padding lateral de fabrica que si llevan
     .contentxlarge/.col75 (var(--paddings)) -- sin esto el cuerpo arrancaba
     20px mas a la izquierda que el H1 y los titulares de seccion, justo
     encima. */
  padding-left: var(--paddings);
  box-sizing: border-box;
}
body.parent-pageid-616 .ccoltext {
  max-width: 1200px;
  margin-left: 0;
  margin-right: 0;
}
body.parent-pageid-616 .ccoltext h2,
body.parent-pageid-616 .ccoltext h3,
body.parent-pageid-616 .ccoltext h4 {
  color: #000;
}
/* El h2 de .ccoltext viene con una linea divisoria (border-top) y 35px --
   pensado para separar secciones muy distintas en un post-tipo-magazine,
   pero con TODOS los bloques a h2 (antes de que hubiera niveles) cada
   parrafo quedaba cortado en su propia "tarjeta", muy esquematico para un
   articulo de lectura seguida. Se quita la linea y se reduce un poco el
   tamano; h3/h4 se dejan con su escala de fabrica, que ya es discreta.
   Pedido de Jordi, 24/08/2026. */
body.parent-pageid-616 .ccoltext h2 {
  border-top: none;
  font-size: 30px;
  padding-top: 0;
  margin-top: 46px;
}
/* Mas contraste entre niveles dentro del cuerpo -- "necesito mas
   variabilidad de tamanos" (24/08/2026). h2 sube un pelin (arriba) y h3/h4
   bajan, para que la jerarquia se note mas de un vistazo sin llegar a
   verse desordenado. */
body.parent-pageid-616 .ccoltext h3 {
  font-size: 22px;
}
body.parent-pageid-616 .ccoltext h4 {
  font-size: 17px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
}

/* El H1 del hero y los titulares de seccion ("What this covers", el de la
   FAQ) comparten la escala .shtitle de todo el sitio (66px, pensada para
   un H1 de pagina de servicio) -- en un articulo de blog eso lee "tocho",
   mas grande que cualquier titular real del cuerpo (30px como mucho) y sin
   relacion de escala con el. Se baja solo para insights, y solo estos dos
   sitios -- el CTA de cierre y el formulario de contacto NO entran, son el
   cierre estandar de toda la web y se quedan como estan. Pedido de Jordi,
   24/08/2026. */
body.parent-pageid-616 .csectioncasos h1.shtitle {
  font-size: 44px;
}
body.parent-pageid-616 section:has(.ccoltext) .shtitle,
body.parent-pageid-616 .csectionfaq .shtitle {
  font-size: 32px;
}
/* La entradilla de "What this covers" hereda .contentitledescsmid, que trae
   max-width:720px de fabrica (pensada para ir al lado de otra columna) --
   mas estrecha que el cuerpo del articulo justo debajo. Se quita el limite
   propio: el ancho real ya lo pone el .col75 de abajo, igual que hace
   .cpageblanktext en /legal-notice/. */
body.parent-pageid-616 section:has(.ccoltext) .contentitledescsmid {
  max-width: none;
}
/* El titular+entradilla de "What this covers" (y el H1 del hero, mismo
   partial _head.php) van en una columna .col75 (75% del ancho de un
   contentxlarge de 1900px = 1425px) -- pensada para paginas con otra
   columna al lado que aqui no existe. Se sustituye por el mismo max-width
   fijo que el cuerpo del articulo (1200px) sin centrar, replicando el
   layout de /legal-notice/ (.cpageblanktext: ancho completo, texto
   limitado, todo a la izquierda) en vez del anterior enfoque centrado.
   Pedido de Jordi, 24/08/2026. */
body.parent-pageid-616 section:has(.ccoltext) .col75,
body.parent-pageid-616 .csectioncasos .col75 {
  width: auto;
  max-width: 1200px;
}

/* ---------------------------------------------------------------------------
   Entradillas iniciales: ancho.
   EXCEPCION DELIBERADA A LA REGLA DE ORO DE ESTE FICHERO (aqui solo colores).
   Pedido de Jordi el 22/08/2026 viendo /web-development/project-scoping/: la
   entradilla se quedaba en 720px dentro de una .col75 de ~923px, bajo un H1
   que si ocupa la columna entera, y el bloque se veia encajonado a la
   izquierda con el lado derecho vacio.
   La escala del tema es small 500 / mid 620 / smid 720 / large 820; se sube
   .contentitledescsmid a 900 para que acompane al titular sin pasarse de
   medida comoda de lectura. Afecta a la entradilla del hero, a la de FAQ y a
   la de modelo operativo, que es donde queremos el mismo criterio.
   --------------------------------------------------------------------------- */
.contentitledescsmid {
  max-width: 900px;
}