/**
 * Theme Name: Blocksy Child
 * Description: Blocksy Child theme — Kopen Software
 * Author: Creative Themes
 * Template: blocksy
 * Text Domain: blocksy
 */

/* =============================================
   KOPEN — Tabla de contenidos
   1. Header global       (logo, sticky header)
   2. Tipografía global   (h2, párrafos, separadores)
   3. Botones             (base, fill, outline, hover, icono, móvil)
   4. Cards               (base, badge Remix, textos, imágenes, hover, enlace)
   5. Secciones           (fondos alternos, layout, gaps)
   6. Home                (hero, botones inline)
   7. Footer              (links, contacto, socials, fondo)
   ============================================= */

/* =============================================
   1. Header global
   ============================================= */

/* --- 1.1 Logo: limitar tamaño --- */
.site-logo-container img,
.default-logo img,
.custom-logo-link img {
  max-height: 60px !important;
  width: auto !important;
}

/* --- 1.2 Sticky header: evitar solape de contenido --- */
header {
  z-index: 100 !important;
}

header .site-logo-container {
  position: relative;
  z-index: 101;
}

/* =============================================
   2. Tipografía global
   ============================================= */

/* --- 2.1 Títulos h2: color de marca + acento inferior --- */
.page .entry-content h2 {
  color: #1b7f8a !important;
  position: relative;
  padding-bottom: 8px;
}

.page .entry-content h2::after {
  content: "";
  display: block;
  width: 60px;
  height: 3px;
  background: #75c1a8;
  border-radius: 2px;
  margin-top: 8px;
  opacity: 0.6;
}

/* --- 2.2 Separador de sección --- */
.wp-block-separator.is-style-wide,
.wp-block-separator {
  background-color: #2e6aab !important;
  height: 1px !important;
  border: none !important;
  opacity: 1 !important;
  max-width: 100px !important;
  margin: 2.25rem auto !important;
}

/* =============================================
   3. Botones
   ============================================= */

/* --- 3.1 Base: alineación, altura, forma --- */
.wp-block-button__link,
:root :where(.wp-block-button__link) {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 48px !important;
  padding: 12px 24px !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  white-space: nowrap !important;
  line-height: 1.4 !important;
}

/* --- 3.2 Botón relleno --- */
.wp-block-button.is-style-fill .wp-block-button__link {
  background: var(--theme-palette-color-1) !important;
  color: #fff !important;
  border: 2px solid var(--theme-palette-color-1) !important;
  box-shadow: 0 2px 8px rgba(27, 127, 138, 0.25) !important;
}

.wp-block-button.is-style-fill .wp-block-button__link:hover {
  background: var(--theme-palette-color-2) !important;
  border-color: var(--theme-palette-color-2) !important;
  box-shadow: 0 4px 16px rgba(27, 127, 138, 0.35) !important;
  transform: translateY(-1px) !important;
}

/* --- 3.3 Botón outline --- */
.wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent !important;
  color: var(--theme-palette-color-3) !important;
  border: 2px solid var(--theme-palette-color-5) !important;
}

.wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: var(--theme-palette-color-1) !important;
  color: #fff !important;
  border-color: var(--theme-palette-color-1) !important;
}

/* --- 3.4 Hover general --- */
.wp-block-button__link:hover {
  opacity: 0.9;
  transform: translateY(-1px);
  transition: all 0.2s ease;
}

/* --- 3.5 Icono dentro del botón --- */
.wp-block-button__link i {
  font-size: 18px !important;
  margin-left: 8px !important;
}

/* --- 3.6 Botones inline dentro de columnas --- */
.wp-block-column > .wp-block-button {
  display: inline-block;
  vertical-align: middle;
}

.wp-block-column > .wp-block-button + .wp-block-button {
  margin-left: 0;
}

/* --- 3.7 CTA inline (fuera de columnas) --- */
body .entry-content > .wp-block-button,
body .entry-content .wp-block-group > .wp-block-button {
  display: inline-block !important;
  vertical-align: middle !important;
  margin-right: 12px !important;
  margin-bottom: 0 !important;
  width: auto !important;
}

body .entry-content > .wp-block-button:last-child,
body .entry-content .wp-block-group > .wp-block-button:last-child {
  margin-right: 0 !important;
}

/* --- 3.7bis Botón .aligncenter al final del contenido ---
   La regla 3.7 (display:inline-block + margin-right:12px !important) trencava
   el centrat que WordPress aplica als botons .aligncenter via margin:0 auto:
   el botó quedava ancorat fora de la columna de text (a la dreta, arran del
   viewport). Restaurem display:block + margin auto perquè torni a centrar-se. */
body .entry-content > .wp-block-button.aligncenter,
body .entry-content .wp-block-group > .wp-block-button.aligncenter {
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
  width: auto !important;
}

/* --- 3.8 Responsive: apilar botones en móvil --- */
@media (max-width: 600px) {
  .wp-block-column > .wp-block-button + .wp-block-button {
    margin-left: 0;
    margin-top: 8px;
  }

  .wp-block-button__link {
    width: 100%;
  }
}

/* --- 3.9 CTA mòbil: el botó no pot sortir del marc (Sergi, 2026-10-01) ---
   A 375px el CTA «Descubre cómo podemos ayudarte» sortia 23px del viewport
   perquè §3.1 força white-space:nowrap i el wrapper inline-block es queda en
   mida màxima del contingut. A ≤600px permetem el salt de línia i retiquem
   el padding perquè el botó quepi dins la seva columna. */
@media (max-width: 600px) {
  .wp-block-button__link {
    white-space: normal !important;
    padding: 12px 16px !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  .entry-content .wp-block-group.section-cta .wp-block-button__link {
    padding: 14px 16px !important;
  }
}

/* =============================================
   4. Cards
   ============================================= */

/* --- 4.1 Card estándar --- */
.wp-block-column.card {
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 16px !important;
  padding: 28px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* --- 4.2 Card soft --- */
.wp-block-column.card-soft {
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 16px !important;
  padding: 28px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

/* --- 4.3 Contexto del badge: permite que sobresalga --- */
.card-soft,
.card,
.wp-block-column.card-soft,
.wp-block-column.card {
  position: relative !important;
  padding-top: 12px !important;
}

/* --- 4.4 Badge Remix --- */
.icon-badge-remix {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 52px !important;
  height: 52px !important;
  border-radius: 14px !important;
  background: #1b7f8a !important;
  box-shadow: 0 2px 8px rgba(27, 127, 138, 0.25) !important;
  font-size: 26px !important;
  color: #fff !important;
  position: absolute !important;
  top: -16px !important;
  left: 20px !important;
  z-index: 2 !important;
  transition: background 0.2s ease, box-shadow 0.2s ease !important;
}

.card-soft:hover .icon-badge-remix,
.card:hover .icon-badge-remix,
.wp-block-column.card-soft:hover .icon-badge-remix,
.wp-block-column.card:hover .icon-badge-remix {
  background: #2e6aab !important;
  box-shadow: 0 2px 8px rgba(46, 106, 171, 0.25) !important;
}

/* --- 4.5 Card con badge: espacio superior --- */
.wp-block-column.card:has(.icon-badge-remix),
.wp-block-column.card-soft:has(.icon-badge-remix) {
  padding-top: 56px !important;
}

/* --- 4.6 El párrafo del badge no debe ocupar espacio --- */
.wp-block-column.card > p:first-child,
.wp-block-column.card-soft > p:first-child {
  margin: 0 !important;
  line-height: 0 !important;
  height: 0 !important;
}

/* --- 4.7 Títulos de card --- */
.wp-block-column.card h3,
.wp-block-column.card-soft h3,
.wp-block-column.card h3.wp-block-heading,
.wp-block-column.card-soft h3.wp-block-heading {
  font-size: 1.5rem;
  font-weight: 700;
  color: #1b7f8a;
  margin: 0 0 8px;
  line-height: 1.3;
}

/* --- 4.8 Texto de card (p i li unificats: mida i color) --- */
.wp-block-column.card p,
.wp-block-column.card-soft p {
  font-size: 1.125rem;
  color: #374151;
  line-height: 1.6;
  margin: 0;
}

/* --- 4.9 Listas en cards --- */
.wp-block-column.card li,
.wp-block-column.card-soft li {
  color: #374151;
  font-size: 1.125rem;
  line-height: 1.6;
  padding-left: 4px;
}

.wp-block-column.card li::marker,
.wp-block-column.card-soft li::marker {
  color: #1b7f8a;
}

/* --- 4.10 Listas de problema: solo espaciado (sin borde lateral) ---
   El borde izq. se retiró: el acento ya lo da el marcador de color del li. */
.wp-block-column.card .wp-block-list li {
  margin-bottom: 10px;
}

/* --- 4.11 Imágenes de card y de solución --- */
.wp-block-columns .wp-block-column .wp-block-image img,
.wp-block-columns .wp-block-column figure.wp-block-image img,
.wp-block-column.card .wp-block-image img,
.wp-block-column.card figure.wp-block-image img {
  width: 100% !important;
  height: 160px !important;
  max-height: 180px !important;
  object-fit: cover !important;
  border-radius: 8px !important;
  margin-bottom: 12px !important;
}

.wp-block-columns .wp-block-column .wp-block-image,
.wp-block-column.card .wp-block-image {
  margin-bottom: 12px !important;
  overflow: hidden !important;
  border-radius: 8px !important;
}

/* --- 4.12 Override de cualquier 48px inline en imágenes de solución --- */
.wp-block-columns .wp-block-column img[style*=48px] {
  width: 100% !important;
  height: 160px !important;
  max-height: 160px !important;
}

/* --- 4.13 Espaciado de cards en columnas --- */
.wp-block-columns .wp-block-column.card,
.wp-block-columns .wp-block-column.card-soft {
  margin: 10px;
  flex: 1 1 0;
  min-width: 0;
}

/* --- 4.14 Hover: elevación --- */
.wp-block-column.card:hover,
.wp-block-column.card-soft:hover {
  transform: translateY(-3px) !important;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1) !important;
  transition: all 0.2s ease;
}

/* --- 4.15 Card clicable: enlace estirado (stretched link) --- */
.wp-block-column.card .card-link,
.wp-block-column.card-soft .card-link {
  color: inherit !important;
  text-decoration: none !important;
}

.wp-block-column.card .card-link::after,
.wp-block-column.card-soft .card-link::after {
  content: "" !important;
  position: absolute !important;
  inset: 0 !important;
  z-index: 3 !important;
}

.wp-block-column.card:has(.card-link),
.wp-block-column.card-soft:has(.card-link) {
  cursor: pointer;
}

.wp-block-column.card .card-link:hover,
.wp-block-column.card-soft .card-link:hover {
  color: #2e6aab !important;
}

/* --- 4.16 Foto d'equip (Nosotros) --- */
.wp-block-column.card .team-photo,
.wp-block-column.card figure.team-photo {
  text-align: center;
  margin-bottom: 12px !important;
}

.wp-block-column.card .team-photo img,
.wp-block-column.card figure.team-photo img {
  width: 160px !important;
  height: 160px !important;
  max-height: 160px !important;
  border-radius: 50% !important;
  object-fit: cover !important;
  margin: 0 auto !important;
  display: block;
}

/* =============================================
   5. Secciones
   ============================================= */

/* --- 5.1 Fondos alternos de sección --- */
.home main > .wp-block-columns:first-of-type {
  padding: 0;
}

/* Propuesta de valor: "Una base común" */
.entry-content .wp-block-columns:has(.card-soft) {
  background: #f0f4f8;
  margin-left: -20px;
  margin-right: -20px;
  padding: 36px 20px 24px 20px;
  border-radius: 16px !important;
}

/* Soluciones principales */
.entry-content .wp-block-columns:has(.card) {
  background: #f0f4f8;
  margin-left: -20px;
  margin-right: -20px;
  padding: 36px 20px 24px 20px;
  border-radius: 16px !important;
}

/* Te acompañamos: proceso de 4 columnas */
.entry-content .wp-block-columns:has(.wp-block-column:nth-child(4)) {
  background: #f0f4f8;
  margin-left: -20px;
  margin-right: -20px;
  padding: 36px 20px 24px 20px;
  border-radius: 16px !important;
}

/* --- 5.1b Cards agrupades: un sol marc per al conjunt (no per fila) --- */
/* Wrapper .cards-wrap (core/group) que conté una o més files de .card / .card-soft */
.entry-content .wp-block-group.cards-wrap {
  background: #f0f4f8;
  margin-left: -20px;
  margin-right: -20px;
  padding: 36px 20px 24px 20px;
  border-radius: 16px !important;
}

/* Dins del conjunt, les files de cards perden el marc propi */
.entry-content .wp-block-group.cards-wrap .wp-block-columns:has(.card),
.entry-content .wp-block-group.cards-wrap .wp-block-columns:has(.card-soft) {
  background: transparent !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* --- 5.2 Soluciones: tamaño de card consistente y gap entre filas --- */
.entry-content .wp-block-columns:has(.card) .wp-block-column {
  display: flex !important;
  flex-direction: column !important;
}

.entry-content .wp-block-columns:has(.card) .wp-block-column .card {
  flex: 1 !important;
  display: flex !important;
  flex-direction: column !important;
}

.entry-content .wp-block-columns:has(.card) + .wp-block-columns:has(.card) {
  margin-top: 32px !important;
}

/* --- 5.3 Hero: sombra inferior sutil --- */
.wp-block-columns:first-of-type {
  margin-bottom: 8px;
}

/* =============================================
   6. Home
   ============================================= */

/* --- 6.1 Hero: imagen full-width y proporcional --- */
.entry-content > .wp-block-group:first-child .wp-block-image img {
  width: 100% !important;
  height: auto !important;
  max-width: none !important;
  max-height: none !important;
  object-fit: contain !important;
  border-radius: 12px !important;
}

/* --- 6.1b Hero de Desarrollos: captura vertical dins un marc de mòbil --- */
.page-id-6940 .entry-content > .wp-block-group:first-child .wp-block-image img {
  width: auto !important;
  max-width: 240px !important;
  height: auto !important;
  max-height: none !important;
  display: block !important;
  margin-left: auto !important;
  margin-right: auto !important;
  border: 8px solid #1f2937 !important;
  border-radius: 30px !important;
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.18) !important;
}

/* --- 6.1c Desarrollos: el portal B2B no ha de quedar petit (regla d'imatge de card) --- */
.page-id-6940 .entry-content .section-aporta .wp-block-image img {
  width: 100% !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain !important;
  border-radius: 10px !important;
}

/* --- 6.2 Botones del hero: inline --- */
.home .wp-block-columns > .wp-block-column > .wp-block-button {
  display: inline-block !important;
  vertical-align: middle !important;
  margin-right: 12px !important;
  margin-bottom: 0 !important;
}

.home .wp-block-columns > .wp-block-column > .wp-block-button:last-child {
  margin-right: 0 !important;
}

.home .wp-block-columns > .wp-block-column > .wp-block-button + .wp-block-button {
  margin-top: 0 !important;
}

/* =============================================
   7. Footer
   ============================================= */

/* --- 7.1 Fondo del footer (global, decisió Sergi 2026-10-01) --- */
.ct-footer {
  background: #2d4a6b !important;
  border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* --- 7.2 Links: subrayado animado de izquierda a derecha --- */
.footer a,
.ct-footer a,
[class*=copyright] a {
  color: #ffffff !important;
  text-decoration: none !important;
  position: relative !important;
}

.footer a::after,
.ct-footer a::after,
[class*=copyright] a::after {
  content: '' !important;
  position: absolute !important;
  left: 0 !important;
  bottom: -2px !important;
  width: 0 !important;
  height: 1px !important;
  background: #ffffff !important;
  transition: width 0.3s ease !important;
}

.footer a:hover::after,
.ct-footer a:hover::after,
[class*=copyright] a:hover::after {
  width: 100% !important;
}

/* --- 7.3 Texto de contacto --- */
.ct-footer p,
.ct-footer span,
.ct-footer li {
  color: #ffffff !important;
}

/* --- 7.4 Socials: blancos, sin subrayado --- */
.ct-footer .social-icons a,
.ct-footer .social-icon a,
.ct-footer [class*=social] a {
  color: #ffffff !important;
  border-bottom: none !important;
}

.ct-footer .social-icons a::after,
.ct-footer .social-icon a::after,
.ct-footer [class*=social] a::after {
  display: none !important;
}

.ct-socials-block {
  --theme-icon-color: #ffffff !important;
  --theme-icon-hover-color: #ffffff !important;
}

.ct-socials-block a::after {
  display: none !important;
}

/* --- 7.5 Horario (bloque Stackable): texto blanco --- */
.stk-012f1b0 .stk-block-icon-list-item__text,
li.stk-012f1b0 a {
  color: #ffffff !important;
}

/* --- 7.6 Contacto: iconos más pequeños, alineados a la izquierda --- */
.ct-footer .stk-block-icon-list__ul {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
}

.ct-footer .stk-block-icon-list-item__content {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
}

.ct-footer .stk--inner-svg {
  flex-shrink: 0 !important;
}

.ct-footer .stk--inner-svg svg {
  width: 18px !important;
  height: 18px !important;
}

.ct-footer .stk-block-icon-list-item__text {
  font-size: 15px !important;
  line-height: 1.5 !important;
}

/* --- 7.7 Contacto: iconos blancos --- */
.ct-footer .stk--inner-svg {
  color: #ffffff !important;
}

.ct-footer .stk--inner-svg svg {
  fill: #ffffff !important;
}

.ct-footer .stk-block-icon-list-marker {
  color: #ffffff !important;
}

/* --- 7.8 Caja de compartir (Blocksy): espaciado --- */
.ct-share-box {
  margin-top: 16px !important;
}

/* =============================================
   8. Soluciones (marcs de secció) + CTA global de totes les pàgines
   ============================================= */

/* --- 8.1 Marcs de secció discrets (proposta 02-pagines/soluciones.html) --- */
.page-id-6913 .entry-content > .wp-block-group.section-content,
.page-id-6913 .entry-content > .wp-block-group.section-soluciones {
  border: 1px solid #d5e3dc !important;
  border-radius: 28px !important;
  padding: 34px !important;
  background: #ffffff !important;
}

/* El marc de la secció ja és el marc del conjunt: el grup de cards no duplica fons */
.page-id-6913 .entry-content .wp-block-group.cards-wrap {
  background: transparent !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* --- 8.2 CTA de tancament: format per defecte a totes les pàgines --- */
.entry-content .wp-block-group.section-cta {
  background: linear-gradient(135deg, #1b7f8a 0%, #2e6aab 100%) !important;
  border-radius: 28px !important;
  padding: 48px 34px !important;
  text-align: center;
}

.entry-content .wp-block-group.section-cta h2 {
  color: #ffffff !important;
}

.entry-content .wp-block-group.section-cta h2::after {
  background: rgba(255, 255, 255, 0.75) !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

.entry-content .wp-block-group.section-cta p {
  color: rgba(255, 255, 255, 0.92) !important;
  max-width: 620px;
  margin-left: auto !important;
  margin-right: auto !important;
}

.entry-content .wp-block-group.section-cta strong {
  color: #ffffff !important;
}

.entry-content .wp-block-group.section-cta .wp-block-button {
  margin-top: 8px;
}

/* Botó principal (blanc) dins el CTA */
.entry-content .wp-block-group.section-cta .wp-block-button__link {
  background: #ffffff !important;
  color: #1b7f8a !important;
  border-color: #ffffff !important;
  padding: 14px 30px !important;
  box-shadow: 0 8px 22px rgba(0, 0, 0, 0.18) !important;
}

.entry-content .wp-block-group.section-cta .wp-block-button__link:hover {
  background: #eaf6f2 !important;
  color: #145f68 !important;
  border-color: #eaf6f2 !important;
}

/* Botó secundari (outline) dins el CTA */
.entry-content .wp-block-group.section-cta .wp-block-button.is-style-outline .wp-block-button__link {
  background: transparent !important;
  color: #ffffff !important;
  border-color: rgba(255, 255, 255, 0.75) !important;
  box-shadow: none !important;
}

.entry-content .wp-block-group.section-cta .wp-block-button.is-style-outline .wp-block-button__link:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #ffffff !important;
  border-color: #ffffff !important;
}

/* =============================================
   9. Responsive — hero de la Home (mòbil)
   ============================================= */

/* --- 9.1 Botons del hero: separació quan fan wrap (a qualsevol amplada) --- */
.home .wp-block-columns > .wp-block-column > .wp-block-button,
.home .wp-block-columns > .wp-block-column > .wp-block-button:last-child {
  margin-bottom: 12px !important;
}

/* --- 9.2 Botons del hero a mòbil: apilats i centrats --- */
@media (max-width: 600px) {
  .home .wp-block-columns > .wp-block-column > .wp-block-button,
  .home .wp-block-columns > .wp-block-column > .wp-block-button:last-child {
    display: block !important;
    width: fit-content !important;
    margin-left: auto !important;
    margin-right: auto !important;
  }
}

/* =============================================
   8b. Carrusel de logos de clients (Home)
   ============================================= */
.logos-carousel {
  display: flex !important;
  flex-wrap: nowrap !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 40px !important;
  overflow-x: auto !important;
  scroll-snap-type: x mandatory !important;
  padding: 16px 4px 20px !important;
  -webkit-overflow-scrolling: touch;
}

.logos-carousel .wp-block-image {
  flex: 0 0 auto !important;
  scroll-snap-align: center;
  margin: 0 !important;
}

.logos-carousel .wp-block-image img {
  height: 44px !important;
  width: auto !important;
  max-width: none !important;
  object-fit: contain !important;
  filter: grayscale(1);
  opacity: 0.65;
  transition: filter 0.2s ease, opacity 0.2s ease;
}

.logos-carousel .wp-block-image a:hover img {
  filter: none;
  opacity: 1;
}

/* --- 8b.1 Mòbil i tauleta: bloc amb tots els logos visibles (Sergi, 2026-10-01) ---
   A ≤900px el carrusel feia scroll horizontal i calia desllistar per veure els
   logos. Passem a graella: 2 columnes a mòbil, 3 a tauleta, sense scroll. */
@media (max-width: 900px) {
  .logos-carousel {
    display: grid !important;
    justify-content: center !important;
    gap: 24px 20px !important;
    overflow-x: visible !important;
    scroll-snap-type: none !important;
    -webkit-overflow-scrolling: auto;
    padding: 12px 4px 24px !important;
  }

  .logos-carousel .wp-block-image {
    flex: none !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    min-width: 0;
    scroll-snap-align: none !important;
  }

  .logos-carousel .wp-block-image img {
    height: auto !important;
    max-height: 44px !important;
    width: auto !important;
    max-width: 100% !important;
  }
}

@media (max-width: 600px) {
  .logos-carousel {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

@media (min-width: 601px) and (max-width: 900px) {
  .logos-carousel {
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)) !important;
  }
}

/* =============================================
   9. Loop de casos d'èxit (/casos-de-exito/)
   ============================================= */
.casos-loop .wp-block-post-template {
  gap: 24px;
}

.casos-loop .wp-block-post {
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 16px !important;
  padding: 24px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.casos-loop .wp-block-post:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1) !important;
}

.casos-loop .wp-block-post-featured-image {
  margin-bottom: 12px;
}

.casos-loop .wp-block-post-featured-image img {
  width: 100%;
  height: 160px;
  object-fit: cover;
  border-radius: 8px !important;
}

.casos-loop .wp-block-post-title {
  font-size: 1.25rem;
}

.casos-loop .wp-block-post-title a {
  color: #1b7f8a !important;
  text-decoration: none !important;
}

.casos-loop .wp-block-post-title a:hover {
  color: #2e6aab !important;
}

.casos-loop .wp-block-post-excerpt__excerpt {
  color: #6b7280;
}

/* =============================================
   10. Llista amb icones (Nosotros - Qué nos diferencia)
   ============================================= */
.wp-block-list li i.ri {
  color: #1b7f8a;
  margin-right: 8px;
  font-size: 1.1em;
  vertical-align: -1px;
}

/* Sense marcador a les llistes que ja porten icona */
.wp-block-list:has(li i.ri) {
  list-style: none;
  padding-left: 0;
}

.wp-block-list:has(li i.ri) > li {
  list-style: none;
}

/* =============================================
   8.1b Marcs de secció: NOMÉS a Soluciones (page-id-6913).
   Decisió 2026-09-25: no s'aplica a tot el web (massa vores, monòton).
   El ritme global es fa amb fons de secció + gris clar de cards + hr fi.
   ============================================= */

/* =============================================
   11. Text legal del formulari de contacte
   ============================================= */
.entry-content p.legal-note {
  font-size: 0.8rem !important;
  line-height: 1.5 !important;
  color: #6b7280 !important;
}

/* =============================================
   12. Minicards del blog (Home)
   ============================================= */
.blog-loop .wp-block-post-template {
  gap: 24px;
}

.blog-loop .wp-block-post {
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 16px !important;
  padding: 20px 22px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.blog-loop .wp-block-post:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1) !important;
}

.blog-loop .wp-block-post-title {
  font-size: 1.05rem;
  margin: 0 0 8px;
}

.blog-loop .wp-block-post-title a {
  color: #1b7f8a !important;
  text-decoration: none !important;
}

.blog-loop .wp-block-post-title a:hover {
  color: #2e6aab !important;
}

.blog-loop .wp-block-post-date {
  color: #6b7280 !important;
  font-size: 0.85rem;
  margin: 0;
}

/* Miniatura a les minicards del blog */
.blog-loop .wp-block-post-featured-image {
  margin: 0 0 12px !important;
}

.blog-loop .wp-block-post-featured-image img {
  width: 100% !important;
  height: 150px !important;
  object-fit: cover !important;
  border-radius: 10px !important;
}

/* =============================================
   13. Icones al menú MÒBIL (offcanvas) — DEFINITIU (2026-09-25)
   Només afecta el panell mòbil (.ct-panel), no el menú d'escriptori.
   ============================================= */
.ct-panel .ct-menu-link::before {
  font-family: "remixicon" !important;
  font-style: normal;
  display: inline-block;
  margin-right: 10px;
  font-size: 18px;
  line-height: 1;
  vertical-align: -2px;
  color: var(--theme-palette-color-1, #1b7f8a);
}

.ct-panel .menu-item-1413 .ct-menu-link::before { content: "\ee1d"; } /* Inicio: home-4-line */
.ct-panel .menu-item-6927 .ct-menu-link::before { content: "\f181"; } /* Soluciones: stack-line */
.ct-panel .menu-item-7145 .ct-menu-link::before { content: "\ec12"; } /* Tryton: dashboard-3-line */
.ct-panel .menu-item-7146 .ct-menu-link::before { content: "\ea96"; } /* Metabase: bar-chart-2-line */
.ct-panel .menu-item-7147 .ct-menu-link::before { content: "\eba9"; } /* Desarrollos: code-line */
.ct-panel .menu-item-7148 .ct-menu-link::before { content: "\eb09"; } /* FrePPLe: building-2-line */
.ct-panel .menu-item-7149 .ct-menu-link::before { content: "\f256"; } /* Consultoría: user-3-line */
.ct-panel .menu-item-7150 .ct-menu-link::before { content: "\f2f7"; } /* IA: brain-line */
.ct-panel .menu-item-6929 .ct-menu-link::before { content: "\eb09"; } /* Sectores: building-2-line */
.ct-panel .menu-item-6932 .ct-menu-link::before { content: "\eb0d"; } /* Industria: building-4-line */
.ct-panel .menu-item-6933 .ct-menu-link::before { content: "\f120"; } /* Distribución: shopping-cart-line */
.ct-panel .menu-item-7151 .ct-menu-link::before { content: "\f22f"; } /* Clientes: trophy-line */
.ct-panel .menu-item-1412 .ct-menu-link::before { content: "\f1ee"; } /* Nosotros: team-line */
.ct-panel .menu-item-1420 .ct-menu-link::before { content: "\eef6"; } /* Contacto: mail-line */
.ct-panel .menu-item-2336 .ct-menu-link::before { content: "\ea7e"; } /* Blog: article-line */

/* --- 13.1 LinkedIn: visible només al menú mòbil (Sergi, 2026-10-01) ---
   L'ítem es va afegir al menú 23 (db_id 7277, custom link a
   linkedin.com/company/kopen-software) perquè es pugui obrir des del panell
   mòbil. El menú d'escriptori NO el mostra: es amaga fora de .ct-panel perquè
   la nav desktop ja va just (A1 descartat). */
.menu-item-7277 {
  display: none !important;
}

.ct-panel .menu-item-7277 {
  display: flex !important;
}

.ct-panel .menu-item-7277 .ct-menu-link::before { content: "\eeb5"; } /* LinkedIn: linkedin-fill */

/* =============================================
   15. B1 — Ritme visual: alternar fons de secció (blanc ↔ gris clar)
   ============================================= */
.entry-content > .wp-block-group:nth-of-type(even):not(.section-cta):not(.section-hero) {
  background: #f7f9fb !important;
  border-radius: 20px !important;
  padding: 2.5rem 2rem !important;
}

/* =============================================
   16. Enllaços dins el text (solucions connectades)
   Només al contingut principal (main). El footer de Blocksy també fa
   servir .entry-content als widgets; allà els links han de ser blancs.
   ============================================= */
main .entry-content p a:not(.wp-block-button__link) {
  color: var(--theme-palette-color-1, #1b7f8a) !important;
  text-decoration: underline;
  text-underline-offset: 3px;
}

main .entry-content p a:not(.wp-block-button__link):hover {
  color: var(--theme-palette-color-2, #2e6aab) !important;
}

/* =============================================
   17. Focus visible + selecció de marca (a11y)
   ============================================= */
::selection {
  background: #1b7f8a;
  color: #ffffff;
}

a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible,
.wp-block-button__link:focus-visible,
.ct-menu-link:focus-visible {
  outline: 2px solid #1b7f8a !important;
  outline-offset: 2px !important;
}

.ct-footer a:focus-visible,
.ct-footer button:focus-visible {
  outline-color: #ffffff !important;
}

/* =============================================
   18. Ritme visual: treure soroll redundant
   ============================================= */

/* 18.1 Doble gris: si una banda alterna conté cards, el fons de la banda
   sobra (les cards ja aporten el gris clar #f0f4f8). */
.entry-content > .wp-block-group:nth-of-type(even):not(.section-cta):not(.section-hero):has(.card, .card-soft, .cards-wrap) {
  background: transparent !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* 18.2 L'hr fi és redundant tocant una banda o el CTA: s'amaga. */
.entry-content > .wp-block-group:nth-of-type(even):not(.section-cta):not(.section-hero) + .wp-block-separator,
.entry-content > .wp-block-separator:has(+ .wp-block-group:nth-of-type(even):not(.section-cta):not(.section-hero)),
.entry-content > .wp-block-separator:has(+ .wp-block-group.section-cta),
.entry-content > .wp-block-group.section-cta + .wp-block-separator {
  display: none !important;
}

/* =============================================
   20. Contacto (page-id-819): items con icono, alineados
   Icono en columna fija + texto al lado, para que las líneas
   que envuelven queden alineadas bajo la etiqueta (no bajo el icono).
   ============================================= */
.entry-content p.contact-item {
  display: flex !important;
  align-items: flex-start !important;
  gap: 12px !important;
  margin: 0 0 18px !important;
}

.entry-content p.contact-item > i {
  flex: 0 0 22px !important;
  width: 22px !important;
  text-align: center !important;
  font-size: 20px !important;
  line-height: 1.5 !important;
  color: #1b7f8a !important;
  margin-top: 1px !important;
}

.entry-content p.contact-item > span {
  display: block !important;
  flex: 1 1 auto !important;
  line-height: 1.5 !important;
}

.entry-content p.contact-item a {
  text-decoration: none !important;
}

.entry-content p.contact-item a:hover {
  text-decoration: underline !important;
}

/* =============================================
   21. Contacto mòbil: el formulari Mautic no s'ha d'encongir
   El propi embed de Mautic fixa wrapper i inputs a width:80% (doble
   reducció → camps massa estrets al mòbil). Override només en mòbil.
   ============================================= */
@media (max-width: 781px) {
  body #mauticform_wrapper_contactoweb {
    width: 100% !important;
    max-width: 100% !important;
  }

  body #mauticform_wrapper_contactoweb .mauticform-innerform,
  body #mauticform_wrapper_contactoweb .mauticform-page-wrapper,
  body #mauticform_wrapper_contactoweb .mauticform-row,
  body #mauticform_wrapper_contactoweb .mauticform-input,
  body #mauticform_wrapper_contactoweb .mauticform-textarea,
  body #mauticform_wrapper_contactoweb input,
  body #mauticform_wrapper_contactoweb textarea,
  body #mauticform_wrapper_contactoweb select {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* =============================================
   23. Menú del header: ítem actiu (pàgina actual) en verd
   Per defecte Blocksy el pinta amb --theme-palette-color-2 (blau).
   El canviem al verd/teal de marca (palette-color-1).
   ============================================= */
header [data-menu] {
  --menu-indicator-active-color: var(--theme-palette-color-1, #1b7f8a);
}

/* =============================================
   24. Submenú del header: hover blau, ítem actiu verd
   Els ítems del desplegable només canviaven el color del text (blanc)
   sense fons → quedaven il·legibles sobre el desplegable blanc.
   ============================================= */
header [data-id="menu"] .sub-menu {
  --dropdown-background-hover-color: var(--theme-palette-color-2, #2e6aab) !important;
}

header [data-id="menu"] .sub-menu li:hover > .ct-menu-link,
header [data-id="menu"] .sub-menu li:hover > .ct-sub-menu-parent {
  background-color: var(--theme-palette-color-2, #2e6aab) !important;
  color: #ffffff !important;
}

header [data-id="menu"] .sub-menu li[class*="current-menu-"] > .ct-menu-link,
header [data-id="menu"] .sub-menu li[class*="current-menu-"] > .ct-sub-menu-parent {
  background-color: var(--theme-palette-color-1, #1b7f8a) !important;
  color: #ffffff !important;
}

/* =============================================
   25. Arxiu del blog (/blog/, categories): coherència amb la resta de targetes
   L'arxiu de Blocksy (data-cards="simple") sortia sense superfície ni
   cantonades i amb els títols en el blau per defecte del navegador
   (rgb(0,0,238)). L'alineem amb les targetes de la web (vegeu §12).
   ============================================= */
.entries[data-layout="grid"] .entry-card {
  background: #fff !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 16px !important;
  padding: 20px 22px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06) !important;
  transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.entries[data-layout="grid"] .entry-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1) !important;
}

.entries[data-layout="grid"] .entry-card .entry-title a {
  color: #1b7f8a !important;
  text-decoration: none !important;
}

.entries[data-layout="grid"] .entry-card .entry-title a:hover {
  color: #2e6aab !important;
}

.entries[data-layout="grid"] .entry-card .ct-media-container {
  aspect-ratio: 16 / 10;
  overflow: hidden;
  border-radius: 10px !important;
}

.entries[data-layout="grid"] .entry-card .ct-media-container img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
  border-radius: 10px !important;
}

.entries[data-layout="grid"] .entry-card .entry-excerpt {
  color: #374151 !important;
  flex: 1 1 auto;
}