.elementor-kit-6{--e-global-color-primary:#25919D;--e-global-color-secondary:#248C9F;--e-global-color-text:#56575C;--e-global-color-accent:#F6A836;--e-global-color-cqverd:#46AC60;--e-global-color-cqvermell:#E63F37;--e-global-color-cqcrema:#F7F6F3;--e-global-color-cqtinta:#131620;--e-global-color-cqblanc:#FFFFFF;--e-global-typography-primary-font-family:"IBM Plex Sans";--e-global-typography-primary-font-weight:700;--e-global-typography-secondary-font-family:"IBM Plex Sans";--e-global-typography-secondary-font-weight:600;--e-global-typography-text-font-family:"IBM Plex Sans Condensed";--e-global-typography-text-font-weight:400;--e-global-typography-accent-font-family:"IBM Plex Sans Condensed";--e-global-typography-accent-font-weight:700;color:#56575C;font-family:"IBM Plex Sans Condensed", Sans-serif;font-size:18px;font-weight:400;line-height:1.39em;}.elementor-kit-6 e-page-transition{background-color:#FFBC7D;}.elementor-kit-6 a{color:#25919D;}.elementor-kit-6 h1{color:#56575c;font-family:"IBM Plex Sans", Sans-serif;font-size:50px;font-weight:700;line-height:1.5em;}.elementor-kit-6 h2{color:#56575c;font-family:"IBM Plex Sans", Sans-serif;font-size:39px;font-weight:700;line-height:1.5em;}.elementor-kit-6 h3{color:#56575c;font-family:"IBM Plex Sans", Sans-serif;font-size:28px;font-weight:700;line-height:1.5em;}.elementor-kit-6 h4{color:#56575c;font-family:"IBM Plex Sans", Sans-serif;font-size:23px;font-weight:700;line-height:1.5em;}.elementor-kit-6 h5{color:#56575c;font-family:"IBM Plex Sans", Sans-serif;font-size:20px;font-weight:700;line-height:1.5em;}.elementor-kit-6 h6{color:#56575c;font-family:"IBM Plex Sans", Sans-serif;font-size:18px;font-weight:700;line-height:1.5em;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:1158px;}.e-con{--container-max-width:1158px;}.elementor-widget:not(:last-child){--kit-widget-spacing:20px;}.elementor-element{--widgets-spacing:20px 20px;--widgets-spacing-row:20px;--widgets-spacing-column:20px;}{}h1.entry-title{display:var(--page-title-display);}.site-header .site-branding{flex-direction:column;align-items:stretch;}.site-header{padding-inline-end:0px;padding-inline-start:0px;}.site-footer .site-branding{flex-direction:column;align-items:stretch;}@media(max-width:1024px){.elementor-kit-6 h1{font-size:38px;}.elementor-kit-6 h2{font-size:32px;}.elementor-kit-6 h3{font-size:25px;}.elementor-kit-6 h4{font-size:21px;}.elementor-kit-6 h5{font-size:19px;}.elementor-kit-6 h6{font-size:18px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:100%;}.e-con{--container-max-width:100%;}}@media(max-width:767px){.elementor-kit-6{font-size:17px;}.elementor-kit-6 h1{font-size:30px;}.elementor-kit-6 h2{font-size:27px;}.elementor-kit-6 h3{font-size:22px;}.elementor-kit-6 h4{font-size:19px;}.elementor-kit-6 h5{font-size:18px;}.elementor-kit-6 h6{font-size:17px;}.elementor-section.elementor-section-boxed > .elementor-container{max-width:100%;}.e-con{--container-max-width:100%;}}
/* Start custom CSS *//* AVISO: WordPress escapa el combinador ">" al guardar el CSS del kit, así
   que aquí no se usa ninguno: todos los .elementor-kit-6es son de descendencia o de
   clase propia. Si hace falta acotar un hijo directo, se le pone una clase.

/* --- Variables del diseño ------------------------------------------------ */
:root{
  --cq-teal:#25919d; --cq-teal-band:#248c9f; --cq-teal-dark:#1d7580;
  --cq-yellow:#f6a836; --cq-red:#e63f37; --cq-green:#46ac60; --cq-grey:#56575c;
  --cq-white:#fff; --cq-cream:#f7f6f3; --cq-ink:#131620; --cq-body:#56575c; --cq-rule:#e4e2dd;
}

/* --- Base ---------------------------------------------------------------- */
body{ overflow-x:hidden; }
.cq-section{ position:relative; }
.cq-section__in{ position:relative; z-index:1; }

/* Antetítulo "/Serveis", "/Qui som"… */
.cq-eyebrow{ font-weight:700; color:var(--cq-teal); }
.cq-eyebrow p{ margin:0; }

/* Subtítulo en teal bajo el titular. */
.cq-subtitle p{ margin:0; font-weight:700; color:var(--cq-teal); }

/* El diseño justifica el texto de columna; en móvil vuelve a bandera para
   que no se abran calles. */
.cq-justify p{ text-align:justify; }
@media(max-width:767px){ .cq-justify p{ text-align:left; } }

.cq-text-right{ text-align:right; }
@media(max-width:1024px){ .cq-text-right{ text-align:left; } }

/* --- Botones ------------------------------------------------------------- */
.cq-btn .elementor-button{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  min-height:40px; padding:10px 26px;
  border:1.5px solid transparent; border-radius:999px;
  font-family:"IBM Plex Sans Condensed",sans-serif; font-size:16px; font-weight:700; line-height:1.1;
  transition:background-color .18s ease,color .18s ease,border-color .18s ease;
}
.cq-btn--solid .elementor-button{ background:var(--cq-teal); border-color:var(--cq-teal); color:#fff; }
.cq-btn--solid .elementor-button:hover{ background:var(--cq-teal-dark); border-color:var(--cq-teal-dark); color:#fff; }
.cq-btn--outline .elementor-button{ background:transparent; border-color:var(--cq-teal); color:var(--cq-teal); }
.cq-btn--outline .elementor-button:hover{ background:var(--cq-teal); color:#fff; }
.cq-btn--ghost .elementor-button{ background:transparent; border-color:var(--cq-body); color:var(--cq-body); }
.cq-btn--ghost .elementor-button:hover{ background:var(--cq-body); color:#fff; }
.cq-btn--on-dark .elementor-button{ background:transparent; border-color:#fff; color:#fff; }
.cq-btn--on-dark .elementor-button:hover{ background:#fff; color:var(--cq-teal); }

/* Enlace con flecha ("→ Visita GLIA Formaciones"). */
.cq-arrow-link a{ font-weight:700; text-decoration:none; color:var(--cq-teal); }
.cq-arrow-link a:hover{ text-decoration:underline; }

/* --- Ondas decorativas ---------------------------------------------------- */
/* Van detrás del contenido y nunca capturan el puntero. En pantallas
   estrechas se reducen y se asoman por el borde, como en el diseño móvil. */
.cq-wave{ pointer-events:none; user-select:none; }
.cq-wave img{ max-width:none; width:100%; height:auto; }
@media(max-width:1024px){
  .cq-wave:not(.cq-wave--pinned){ width:min(30vw,var(--cq-ww,30vw)); }
}
@media(max-width:767px){
  .cq-wave:not(.cq-wave--pinned){ width:min(22vw,var(--cq-ww,22vw)); }
}

/* Caja que recorta las ondas pintadas sobre una foto. */
.cq-photo-clip{ overflow:hidden; }

/* --- Cabecera ------------------------------------------------------------- */
/* Fija arriba con el sticky de Elementor (parts.mjs, STICKY_HEADER); al bajar
   un poco Elementor le añade .elementor-sticky--effects y aparece la sombra. */
.cq-header{ transition:box-shadow .25s ease; }
.cq-header.elementor-sticky--effects{ box-shadow:0 2px 14px rgba(19,22,32,.10); }
.cq-header .cq-logo img{ height:46px; width:auto; }
.cq-phone .elementor-button{ white-space:nowrap; }

/* Menú lateral (2026-09-30, según la referencia del cliente): la hamburguesa
   abre un panel teal pegado a la izquierda, de alto completo, con las entradas
   en mayúsculas y el submenú de Serveis desplegable debajo. La página queda
   visible a la derecha. Elementor escribe su propio CSS por elemento para
   este desplegable (posición, ancho, top en línea) y lo abre con scaleY: de
   ahí los !important, y el panel entra deslizando desde la izquierda. */
.cq-menu .elementor-menu-toggle{ background:transparent; color:var(--cq-teal); }
.cq-menu .elementor-menu-toggle svg{ width:32px; height:32px; fill:var(--cq-teal); }
.cq-menu .elementor-nav-menu--dropdown.elementor-nav-menu__container{
  position:fixed !important; top:0 !important; left:0 !important; bottom:0 !important; right:auto !important;
  z-index:9998 !important; width:min(400px, 88vw) !important; height:100vh !important; height:100dvh !important;
  max-height:none !important; overflow-y:auto !important;
  background:var(--cq-teal) !important; margin:0 !important; padding:112px 36px 48px !important;
  border:0 !important; box-shadow:0 0 40px rgba(19,22,32,.18) !important;
  transform:translateX(-105%) !important; visibility:hidden;
  transition:transform .35s ease, visibility .35s !important;
}
.cq-menu .elementor-menu-toggle.elementor-active + .elementor-nav-menu__container{
  transform:none !important; visibility:visible;
}
.cq-menu .elementor-nav-menu--dropdown .elementor-nav-menu{ position:static; transform:none; width:100%; }
.cq-menu .elementor-nav-menu--dropdown ul{ width:100%; }
/* El botón (hamburguesa / aspa) queda por encima del panel y en blanco al abrir. */
.cq-header{ z-index:9999; }
/* Safari de iPhone recorta los elementos fijos al contorno de un padre fijo con
   overflow:hidden: el panel (fijo, desde top:68px) quedaba fuera de la cabecera
   fija (68 px de alto) y no se veía nada al abrir el menú (2026-10-06). Nada más
   sobresale de la cabecera, así que se deja visible. */
.cq-header{ overflow:visible !important; }
.cq-menu .elementor-menu-toggle{ position:relative; z-index:9999; }
.cq-menu .elementor-menu-toggle.elementor-active,
.cq-menu .elementor-menu-toggle.elementor-active svg{ color:#fff; fill:#fff; }
/* Entradas de primer nivel. */
.cq-menu .elementor-nav-menu--dropdown a{
  /* El widget lleva la alineación centrada y su propia tipografía: se fuerzan. */
  font-family:"IBM Plex Sans Condensed",sans-serif !important; font-size:17px !important; font-weight:400 !important; letter-spacing:.02em;
  text-transform:uppercase; color:#fff !important; background:transparent !important;
  text-align:left !important; justify-content:flex-start !important; padding:12px 0 !important;
  line-height:1.4 !important;   /* Elementor la baja a 20px en :hover y la entrada «salta» */
  border:0 !important;          /* y en :hover añade un borde transparente a la izquierda */
  transition:opacity .2s ease; transform:none !important;   /* Elementor desplaza el enlace al pasar por encima */
}
.cq-menu .elementor-nav-menu--dropdown a:hover,
.cq-menu .elementor-nav-menu--dropdown a:focus,
.cq-menu .elementor-nav-menu--dropdown a.elementor-item-active{ color:#fff !important; opacity:.75; background:transparent !important; }
/* Submenú de Serveis: en minúsculas, más pequeño y sangrado. */
.cq-menu .elementor-nav-menu--dropdown .sub-menu{ position:static !important; width:auto !important; margin:-4px 0 10px 40px !important; background:transparent !important; box-shadow:none !important; border:0 !important; }
.cq-menu .elementor-nav-menu--dropdown .sub-menu a{ text-transform:none; font-size:16px !important; letter-spacing:0; padding:1px 0 !important; border:0 !important; }
.cq-menu .elementor-nav-menu--dropdown li{ text-align:left !important; }
.cq-menu .elementor-nav-menu--dropdown .sub-arrow{ padding:0 0 0 10px !important; color:#fff; fill:#fff; }
.cq-menu .elementor-nav-menu--dropdown .sub-arrow svg,
.cq-menu .elementor-nav-menu--dropdown .sub-arrow i{ width:14px; height:14px; fill:#fff; color:#fff; }
/* El indicador animado del menú (subrayado que crece) mueve el texto: fuera. */
.cq-menu .elementor-nav-menu--dropdown a:before,
.cq-menu .elementor-nav-menu--dropdown a:after{ display:none !important; content:none !important; }
/* Las secciones con ancla (p. ej. #avaluacio-neuropsicologica) no quedan tapadas por la barra fija. */
.cq-section[id]{ scroll-margin-top:96px; }
/* En tablet (≤1024 px) el teléfono no cabe junto al logo: se oculta, como en móvil (2026-10-02). */
@media(max-width:1024px){ .cq-phone{ display:none !important; } }
@media(max-width:767px){
  /* El widget del logo y el del botón llevan medidas propias por elemento: se fuerzan. */
  .cq-header .cq-logo img{ height:24px !important; width:auto !important; max-width:none !important; }
  .cq-phone{ display:none; }
  .cq-header .cq-cita .elementor-button{ padding:8px 12px !important; font-size:12px !important; line-height:1.2 !important; white-space:nowrap; }
  /* Cabecera de móvil en tres columnas (2026-10-01): hamburguesa a la
     izquierda, logo centrado en la pantalla y «Demana cita» a la derecha. Con
     flex el logo quedaba pegado a la hamburguesa; con 1fr·auto·1fr las dos
     columnas de los lados miden lo mismo y el logo cae en el centro real.
     Elementor da el 100 % de ancho a cualquier contenedor en móvil: se anula. */
  .cq-header-left, .cq-logo-col, .cq-cita-col{ --width:auto !important; width:auto !important; }
  .cq-header-inner{ display:grid !important; grid-template-columns:1fr auto 1fr; align-items:center; column-gap:8px; }
  .cq-header-left{ justify-self:start; }
  .cq-logo-col{ justify-self:center; align-items:center; }
  .cq-cita-col{ justify-self:end; align-items:flex-end; }
  /* El panel del menú se abre por debajo de la cabecera (68 px), que sigue
     visible con su fondo claro; el aspa queda en teal sobre ese fondo. */
  .cq-menu .elementor-nav-menu--dropdown.elementor-nav-menu__container{
    top:68px !important; height:calc(100vh - 68px) !important; height:calc(100dvh - 68px) !important;
    padding-top:32px !important;
  }
  .cq-menu .elementor-menu-toggle.elementor-active,
  .cq-menu .elementor-menu-toggle.elementor-active svg{ color:var(--cq-teal); fill:var(--cq-teal); }
}

/* --- Pie ------------------------------------------------------------------ */
.cq-footer a{ color:#fff; text-decoration:none; }
.cq-footer a:hover{ text-decoration:underline; }
.cq-footer h2{ color:#fff; font-family:"IBM Plex Sans Condensed",sans-serif; font-size:15px; font-weight:700; }
.cq-footer p, .cq-footer address{ font-size:15px; font-style:normal; line-height:1.5; }
.cq-footer address{ margin:0 0 18px; }
.cq-footer-legal a{ font-size:11px; }
.cq-footer-legal ul{ list-style:none; margin:0; padding:0; }
.cq-footer-legal li{ margin-bottom:4px; }

/* Iconos sociales en cuadrado blanco, como en el diseño. */
.cq-social .elementor-social-icon{ width:30px; height:30px; border-radius:6px; background:#fff; }
.cq-social .elementor-social-icon i, .cq-social .elementor-social-icon svg{ color:var(--cq-teal-band); fill:var(--cq-teal-band); font-size:17px; width:17px; height:17px; }

/* Logos de colaboradores: cada marca lleva su propio margen óptico, así que
   la altura se ajusta una a una para que pesen lo mismo. */
.cq-partners img{ width:auto; height:36px; object-fit:contain; }
.cq-partners .cq-p-clc img{ height:30px; }
.cq-partners .cq-p-copc img{ height:34px; }
.cq-partners .cq-p-unie img{ height:32px; }
.cq-partners .cq-p-uab img{ height:40px; }
.cq-partners .cq-p-adecco img{ height:42px; }
@media(max-width:767px){ .cq-partners img{ height:28px !important; } }

/* --- Puntos de color de los servicios ------------------------------------- */
.cq-services{ list-style:none; margin:0; padding:0; display:grid; gap:34px 20px; text-align:center; }
.cq-services--4{ grid-template-columns:repeat(4,1fr); }
.cq-services--5{ grid-template-columns:repeat(5,1fr); }
.cq-services li{ margin:0; }
.cq-services .dot{ display:block; width:74px; height:74px; margin:0 auto 18px; border-radius:50%; }
.cq-services .dot-yellow{ background:var(--cq-yellow); }
.cq-services .dot-red{ background:var(--cq-red); }
.cq-services .dot-green{ background:var(--cq-green); }
.cq-services .dot-teal{ background:var(--cq-teal-band); }
.cq-services .dot-grey{ background:var(--cq-grey); }
.cq-services .name{ font-family:"IBM Plex Sans",sans-serif; font-size:23px; font-weight:400; color:var(--cq-ink); margin:0; }
/* Cada servicio de la home enlaza a su página (2026-10-05). */
.cq-services a{ display:block; color:inherit; text-decoration:none; }
.cq-services a .dot{ transition:transform .2s ease; }
.cq-services a:hover .dot,.cq-services a:focus-visible .dot{ transform:scale(1.06); }
.cq-services a:hover .name,.cq-services a:focus-visible .name{ color:var(--cq-teal); }
.cq-services .who{ display:block; margin-top:6px; font-family:"IBM Plex Sans Condensed",sans-serif; font-size:13px; color:var(--cq-body); }
@media(max-width:767px){
  .cq-services--4,.cq-services--5{ grid-template-columns:repeat(2,1fr); gap:30px 16px; }
  .cq-services .dot{ width:60px; height:60px; }
  .cq-services .name{ font-size:19px; }
}
@media(max-width:359px){ .cq-services--4,.cq-services--5{ grid-template-columns:1fr; } }

/* --- Treball en xarxa ----------------------------------------------------- */
.cq-network ul{ list-style:none; margin:0; padding:0; display:grid; gap:54px; }
.cq-network li{ display:grid; grid-template-columns:67px 1fr; gap:18px; align-items:start; margin:0; }
.cq-network img{ width:58px; height:auto; }
.cq-network li:last-child img{ width:67px; }
.cq-network p{ margin:0; font-size:16px; }
.cq-network b{ color:var(--cq-teal); }
@media(max-width:767px){
  .cq-network ul{ gap:32px; }
  .cq-network li{ grid-template-columns:46px 1fr; gap:14px; }
  .cq-network img{ width:40px; }
  .cq-network li:last-child img{ width:46px; }
}

/* --- Listas de áreas ------------------------------------------------------ */
/* Término en color y descripción debajo. En el diseño fluye a dos columnas. */
.cq-arees dl{ margin:0; padding:0; columns:2; column-gap:38px; }
.cq-arees dl div{ break-inside:avoid; margin-bottom:30px; }
.cq-arees dt{ font-weight:700; color:var(--cq-yellow); margin-bottom:2px; }
.cq-arees dd{ margin:0; }
.cq-arees dt, .cq-arees dd{ font-size:20px; line-height:1.5; }
.cq-arees dd{ text-align:justify; }
.cq-arees--1col dl{ columns:1; }
.cq-arees--red dt{ color:var(--cq-red); }
.cq-arees--green dt{ color:var(--cq-green); }
@media(max-width:767px){
  .cq-arees dl{ columns:1; }
  .cq-arees dt,.cq-arees dd{ font-size:18px; }
}
@media(max-width:599px){ .cq-arees dd{ text-align:left; } }

/* Àrees d'atenció de la página de Serveis: término en teal, cuerpo menor. */
.cq-arees-atencio dl{ margin:0; columns:1; }
.cq-arees-atencio dt{ font-weight:700; color:var(--cq-teal); font-size:17px; margin-top:26px; }
.cq-arees-atencio dt:first-child{ margin-top:0; }
.cq-arees-atencio dd{ margin:4px 0 0; font-size:17px; text-align:left; }

/* --- Par de fotos superpuestas -------------------------------------------- */
/* La foto pequeña monta sobre la grande; los porcentajes salen de los
   recuadros del diseño y el padding reserva el vuelo inferior. */
.cq-stack{ position:relative; }
/* El vuelo de la foto frontal se reserva con un pseudoelemento: si se usara
   padding-bottom en %, Elementor lo mediría contra la fila y no contra la
   columna, y la sección crecería más de 200px. */
.cq-stack::after{ content:""; display:block; padding-top:40%; }
.cq-stack .cq-stack-back img{ width:100%; }
.cq-stack .cq-stack-front{ position:absolute; z-index:2; left:62%; top:68%; width:47%; }
.cq-stack--right::after{ padding-top:39%; }
.cq-stack--right .cq-stack-front{ left:66%; top:80%; width:59%; }
.cq-stack--left::after{ padding-top:23%; }
.cq-stack--left .cq-stack-front{ left:-22.5%; top:72%; width:58%; }
@media(max-width:1024px){
  .cq-stack::after,.cq-stack--right::after,.cq-stack--left::after{ padding-top:30%; }
  .cq-stack .cq-stack-front,
  .cq-stack--right .cq-stack-front,
  .cq-stack--left .cq-stack-front{ left:56%; top:60%; width:42%; }
}

/* Las dos fotos del avance de «Els nostres centres» comparten proporción para
   que queden a la misma altura, como en el diseño. */
.cq-centres-teaser .cq-figure img{ aspect-ratio:475/450; object-fit:cover; width:100%; }

/* --- Pie de foto ---------------------------------------------------------- */
.cq-figure figcaption.widget-image-caption{ margin-top:12px; font-size:16px; color:var(--cq-body); text-align:left; }
.cq-figure--teal figcaption.widget-image-caption{ color:var(--cq-teal); font-weight:700; }

/* --- Fichas del equipo ---------------------------------------------------- */
.cq-equip-foto img{ aspect-ratio:1; object-fit:cover; width:100%; }
/* La foto del equipo no cambia al pasar por encima: el oscurecido que llevaba
   teñía de gris el fondo blanco del retrato y parecía un reborde. Se anulan
   también los contornos y sombras que puedan venir del tema o de Elementor,
   dejando la marca de foco del teclado, que sí hace falta. */
.cq-equip-foto a,
.cq-equip-foto a:hover,
.cq-equip-foto img,
.cq-equip-foto a:hover img{
  filter:none; border:0; outline:0; box-shadow:none; background:transparent; text-decoration:none;
}
.cq-equip-foto a:focus-visible{ outline:2px solid var(--cq-teal); outline-offset:3px; }
.cq-equip-nom p{ margin:14px 0 0; font-size:16px; color:var(--cq-ink); font-weight:700; }
.cq-equip-rol p{ margin:2px 0 0; font-size:16px; color:var(--cq-teal); }

/* Elementor escribe --width:100% en cada contenedor a ancho completo, con la
   especificidad de su CSS por elemento; de ahí el !important en esta rejilla.

   La rejilla del equipo va en filas de cinco (tres la primera, la dirección),
   con el mismo paso que el diseño. En tablet baja a tres por fila y en móvil
   a dos, como en la maquetación original. */
.cq-equip-item{ --width:calc(20% - 36px) !important; }
@media(max-width:1024px){ .cq-equip-fila{ flex-direction:row !important; } .cq-equip-item{ --width:calc(33.333% - 18px) !important; } }
@media(max-width:599px){ .cq-equip-item{ --width:calc(50% - 9px) !important; } }

/* --- Ventanas emergentes del equipo --------------------------------------- */
/* Todas las fotos de las fichas con el mismo formato vertical (el de la de
   Marta, 577×708); las cuadradas se recortan por los lados. */
.cq-popup-foto img{ width:100%; object-fit:cover; object-position:center 25%; aspect-ratio:577/708; filter:grayscale(1); }
.cq-popup-nom{ font-family:"IBM Plex Sans",sans-serif; font-size:27px; color:var(--cq-teal); }
.cq-popup-rol p{ font-size:13px; letter-spacing:.14em; text-transform:uppercase; margin:0; }
.cq-popup-text p{ text-align:justify; font-size:17px; line-height:1.61; margin-bottom:11px; }
@media(max-width:767px){ .cq-popup-text p{ text-align:left; font-size:16px; } }

/* Todas las ventanas del equipo miden lo mismo, sea cual sea su texto: 660 px
   (lo que cabe en una pantalla de 768) o el 86 % del alto si la pantalla es
   menor. Si la biografía no cabe, hace scroll por dentro (.dialog-message es el
   contenedor con overflow de Elementor; el botón de cerrar vive fuera de él y
   no se va con el scroll). En escritorio la foto se queda fija mientras baja
   el texto; en móvil, apilado, sube con él.
   El !important hace falta: el ajuste «alto según contenido» de cada popup
   escribe «#elementor-popup-modal-N .dialog-message{height:auto}», que con el
   id gana a cualquier clase. */
.elementor-popup-modal .dialog-message:has(.cq-popup-text){ height:min(660px, 86vh) !important; height:min(660px, 86dvh) !important; max-height:none; overflow-y:auto; scrollbar-gutter:stable; overscroll-behavior:contain; scrollbar-width:thin; scrollbar-color:var(--cq-teal) transparent; }
@media(min-width:1025px){ .cq-popup-col-foto{ position:sticky; top:40px; align-self:flex-start; } }

/* --- Reseñas -------------------------------------------------------------- */
.cq-ressenya{ background:#f4f1ec; border-radius:12px; }
.cq-stars p{ color:var(--cq-yellow); font-size:15px; letter-spacing:3px; margin:0; }
.cq-ressenya-text p{ font-size:16px; margin:0; }
.cq-ressenya-autor p{ margin:0; padding-top:14px; border-top:1px solid #ddd7cd; font-size:16px; color:var(--cq-ink); }

/* --- Tarjetas teal de Logopèdia ------------------------------------------- */
.cq-carta{ position:relative; overflow:hidden; }
.cq-carta p{ font-size:20px; line-height:1.53; text-align:justify; }
.cq-carta .cq-carta-avant p{ font-size:27px; font-weight:600; margin:0 0 14px; text-align:left; }
.cq-carta-cercle{ position:absolute; left:198px; top:350px; width:454px; aspect-ratio:1; border-radius:50%; overflow:hidden; }
.cq-carta-cercle img{ position:absolute; left:-17.4%; top:-2.9%; width:124.4%; max-width:none; height:auto; }
/* Entre 1025 y 1219 px la tarjeta se estrecha (de 532 a ~460 px), el texto gana
   líneas y a 350 px el círculo lo tapaba: se baja 50 px (2026-10-06). */
@media(min-width:1025px) and (max-width:1219px){ .cq-carta-cercle{ top:400px; } }
@media(max-width:1024px){
  .cq-carta-cercle{ left:auto; right:-10%; top:auto; bottom:-22%; width:62%; }
}
/* En móvil el −22 % de arriba se mide sobre el ALTO de la tarjeta (alta y
   estrecha): el círculo quedaba en ~200 px y casi todo fuera, con 67 px a la
   vista bajo 260 px de hueco. Se ancla al pie con su propio tamaño: hasta 300 px
   y un 22 % fuera (el margen % se mide sobre el ancho, igual que el círculo).
   Elementor fija el margen del widget: !important. (2026-10-06) */
@media(max-width:767px){
  .cq-carta-cercle{ right:-8%; bottom:0; width:min(85%, 300px); margin-bottom:calc(min(85%, 300px) * -0.22) !important; }
}
@media(max-width:599px){ .cq-carta p{ font-size:18px; text-align:left; } }

/* --- Portada de las páginas de servicio ----------------------------------- */
/* Las dos fotos del hero de Logopèdia van superpuestas con las medidas del
   diseño; en pantallas estrechas se apilan en una sola imagen. */
.cq-portada-fotos{ position:relative; aspect-ratio:522/469; }
.cq-portada-fotos .cq-foto-a{ position:absolute; left:26.05%; top:0; width:70.69%; }
.cq-portada-fotos .cq-foto-b{ position:absolute; left:2.49%; top:37.31%; width:46.93%; }
.cq-portada-fotos .cq-foto-a img,.cq-portada-fotos .cq-foto-b img{ width:100%; height:100%; object-fit:cover; }
@media(max-width:1024px){
  .cq-portada-fotos{ aspect-ratio:auto; max-width:560px; }
  .cq-portada-fotos .cq-foto-a,.cq-portada-fotos .cq-foto-b{ position:static; width:100%; }
  .cq-portada-fotos .cq-foto-b{ margin-top:16px; }
  /* La foto de arriba trae pegada en la esquina inferior izquierda un trozo de
     la de abajo: viene así del recorte del PDF y en escritorio no se ve porque
     la segunda foto la tapa. Al apilarse queda a la vista, así que se recorta.
     Cuando lleguen las fotos originales se puede quitar esta regla. */
  .cq-portada-fotos .cq-foto-a img{ aspect-ratio:738/368; object-fit:cover; object-position:top center; }
  /* A la de abajo le pasa lo mismo por el borde superior. */
  .cq-portada-fotos .cq-foto-b img{ aspect-ratio:490/540; object-fit:cover; object-position:bottom center; }
}

/* --- Formularios ---------------------------------------------------------- */
/* El diseño usa campos con una sola línea inferior, sin caja. */
.cq-form .elementor-field-group{ margin-bottom:10px; }
.cq-form .elementor-field-group label{ font-size:16px; color:var(--cq-body); font-weight:400; margin-bottom:4px; }
.cq-form .elementor-field-textual{
  padding:6px 2px 9px; border:0; border-bottom:1px solid var(--cq-rule); border-radius:0;
  background:transparent; font-family:"IBM Plex Sans Condensed",sans-serif; font-size:18px; color:var(--cq-ink);
  box-shadow:none;
}
.cq-form .elementor-field-textual:focus{ outline:none; border-bottom-color:var(--cq-teal); box-shadow:none; }
.cq-form textarea.elementor-field-textual{ min-height:74px; }
.cq-form select.elementor-field-textual{ appearance:none; cursor:pointer; }
.cq-form .elementor-field-type-acceptance .elementor-field-option{ display:flex; align-items:flex-start; gap:8px; }
.cq-form .elementor-field-type-acceptance label{ font-size:12px; color:var(--cq-body); line-height:1.4; }
.cq-form .elementor-field-type-acceptance a{ color:var(--cq-teal); }
.cq-form .elementor-field-group.elementor-column.elementor-field-type-submit{ justify-content:flex-end; }
.cq-form .elementor-button[type=submit]{
  border-radius:999px; background:var(--cq-teal); color:#fff; min-height:40px; padding:10px 30px;
  font-family:"IBM Plex Sans Condensed",sans-serif; font-weight:700; font-size:16px;
}
.cq-form .elementor-button[type=submit]:hover{ background:var(--cq-teal-dark); }
/* Pista entre paréntesis bajo la etiqueta (Assessorament i formació). */
.cq-form .elementor-field-group .elementor-field-description{ font-size:16px; color:var(--cq-body); font-style:italic; margin-top:2px; }

/* Contacto directo bajo el formulario: el icono va dentro de un círculo teal,
   como en el diseño. El widget de lista de iconos pinta el icono; el círculo
   lo pone este CSS. */
.cq-direct .elementor-icon-list-icon{
  display:flex; align-items:center; justify-content:center; flex:0 0 auto;
  width:31px; height:31px; border-radius:50%; background:var(--cq-teal);
  line-height:0; padding:0 !important;
}
/* Elementor deja un margen a la derecha del icono que lo descentra dentro del círculo. */
.cq-direct .elementor-icon-list-icon svg{ display:block; margin:0 !important; }
.cq-direct .elementor-icon-list-item{ gap:12px; align-items:center; }
.cq-direct .elementor-icon-list-text{ color:var(--cq-teal); }
.cq-direct a:hover .elementor-icon-list-text{ text-decoration:underline; }
.cq-direct-title p{ margin:0; }

/* --- Páginas legales ------------------------------------------------------ */
.cq-legal h2{ font-size:28px; color:var(--cq-teal); margin:52px 0 16px; }
.cq-legal h3{ font-family:"IBM Plex Sans Condensed",sans-serif; font-size:20px; color:#56575c; margin:32px 0 12px; }
.cq-legal p, .cq-legal li{ font-size:17px; }
.cq-legal ul, .cq-legal ol{ margin:0 0 1.05em; padding-left:1.4em; }
.cq-legal li{ margin-bottom:.6em; }
.cq-legal ol.alpha{ list-style:lower-alpha; }
.cq-legal a{ overflow-wrap:anywhere; color:var(--cq-teal); }
@media(max-width:767px){ .cq-legal h2{ margin-top:40px; } }

/* --- Pasos de la metodología ---------------------------------------------- */
.cq-step-title{ font-family:"IBM Plex Sans Condensed",sans-serif; font-size:20px; font-weight:700; color:var(--cq-green); }
.cq-step-text p{ font-size:20px; text-align:justify; margin:0; }
@media(max-width:1024px){ .cq-step-text p{ text-align:left; } }

/* --- Rejilla de espacios de los centros ----------------------------------- */
.cq-espais img{ width:100%; object-fit:cover; aspect-ratio:428/298; }
/* Carrusel de espais (2026-09-30): mismo recorte que la fila de tres fotos. */
.cq-espais-carrusel .swiper-slide-image{ width:100%; object-fit:cover; aspect-ratio:428/298; }
.cq-espais-carrusel .swiper-pagination{ position:static; margin-top:24px; }
/* Flechas de las galerías (2026-10-05): círculo blanco con chevron teal sobre la foto. */
.cq-espais-carrusel .elementor-swiper-button{ width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; background:#fff; color:var(--cq-teal); box-shadow:0 2px 10px rgba(0,0,0,.18); opacity:1; transition:background .2s ease,color .2s ease; }
/* El cambio de color sólo con ratón: en pantallas táctiles el :hover se queda
   pegado tras pulsar y la flecha quedaba en un círculo teal liso (2026-10-06). */
@media(hover:hover){ .cq-espais-carrusel .elementor-swiper-button:hover{ background:var(--cq-teal); color:#fff; } }
.cq-espais-carrusel .elementor-swiper-button i{ font-size:18px; color:inherit; }
.cq-espais-carrusel .elementor-swiper-button-prev{ left:12px; }
.cq-espais-carrusel .elementor-swiper-button-next{ right:12px; }
@media(max-width:767px){ .cq-espais-carrusel .elementor-swiper-button{ width:38px; height:38px; } }

/* --- Com treballem -------------------------------------------------------- */
.cq-metodologia .cq-met-row{ margin-bottom:70px; }
.cq-metodologia .cq-met-row:last-of-type{ margin-bottom:0; }
@media(max-width:1024px){ .cq-metodologia .cq-met-row{ margin-bottom:48px; } }

/* La foto de la primera fila sangra hasta el borde del lienzo: el ancho de
   columna del diseño (407px) más el margen del contenedor dan los 511px del
   original. Sólo tiene sentido cuando la ventana supera el contenedor. */
@media(min-width:1223px){
  .cq-metodologia .cq-bleed-left{
    margin-left:calc((1158px - 100vw) / 2);
    --width:calc(35% + (100vw - 1158px) / 2) !important;
  }
}

/* --- Serveis -------------------------------------------------------------- */
/* El hero centra su contenido dentro de la banda de 470px. */
.cq-serveis-hero{ justify-content:center; }

/* --- Els nostres centres -------------------------------------------------- */
/* En el diseño la primera reseña arranca algo más arriba que las otras dos. */
@media(min-width:900px){ .cq-ressenya--alta{ margin-top:-52px; } }
/* Y por debajo de 900px las tres pasan a una sola columna. */
@media(max-width:899px){ .cq-ressenyes .cq-ressenya{ --width:100% !important; } }
/* Carrusel de reseñas (2026-10-02): cada tarjeta con su altura natural y el
   desnivel del diseño (una sí y otra no, 52 px más abajo) en tablet y
   escritorio; en móvil, una sola tarjeta y sin desnivel. */
.cq-ressenyes-carrusel .swiper-wrapper{ align-items:flex-start; }
.cq-ressenyes-carrusel .cq-ressenya{ --width:100% !important; height:auto !important; }
@media(min-width:768px){ .cq-ressenyes-carrusel .swiper-slide:nth-child(even){ margin-top:52px; } }
.cq-ressenyes-carrusel .swiper-pagination{ margin-top:28px; }
/* Con 19 reseñas los puntos (9 px + 8 px de separación) llenaban todo el ancho
   del móvil: más pequeños y juntos (2026-10-06). */
@media(max-width:767px){ .cq-ressenyes-carrusel .swiper-pagination-bullet{ width:6px !important; height:6px !important; margin:0 3px !important; } }
@media(max-width:767px){ .cq-centre .cq-eyebrow{ margin-top:48px !important; } }

/* --- Portadas de las páginas de servicio ---------------------------------- */
/* En el diseño el claim (y en Reeducació también el nombre del servicio) son
   más anchos que la columna de texto y se salen hacia la derecha, por encima
   de la foto. Llevan su propio salto de línea, así que basta con max-content. */
@media(min-width:1025px){
  .cq-servei-ample{ width:max-content; max-width:760px; }
}

/* Las dos fotos de Logopèdia arrancan más abajo que el texto. */
.cq-portada-fotos--logopedia{ margin-top:99px; }
@media(max-width:1024px){ .cq-portada-fotos--logopedia{ margin-top:0; } }

/* Psicologia y Reeducació llevan una sola foto, desplazada dentro de su columna. */
.cq-portada-foto--psico{  margin:202px 0 0 14.18%; width:84.5%; }
.cq-portada-foto--reeduc{ margin:197px 0 0 3.26%; width:96.6%; }
@media(max-width:1024px){
  .cq-portada-foto--psico,.cq-portada-foto--reeduc{ margin:0; width:100%; }
}

/* Las tarjetas teal vuelan 14px a cada lado del texto (x123…x1242 del lienzo). */
.cq-cartes{ margin-inline:-14px; }
@media(max-width:1024px){ .cq-cartes{ margin-inline:0; } }

/* A una sola columna la tarjeta necesita hueco para la foto circular; el
   relleno lo escribe Elementor por elemento, de ahí el !important. */
@media(max-width:1024px){
  .cq-carta.cq-carta--cercle{ padding-bottom:300px !important; }
  .cq-carta{ padding-bottom:40px !important; }
}
@media(max-width:767px){
  .cq-carta.cq-carta--cercle{ padding:26px 24px 260px !important; }
  .cq-carta{ padding:26px 24px 32px !important; }
}

/* --- Accesibilidad -------------------------------------------------------- */
.cq-visually-hidden{ position:absolute; width:1px; height:1px; margin:-1px; padding:0; overflow:hidden; clip-path:inset(50%); white-space:nowrap; }/* End custom CSS */