/* ===========================================================================
   CLOUDESK — hoja de estilos propia.

   Original de la casa: no hay Bootstrap, ni FontAwesome, ni icomoon, ni
   animate.css, ni template comprado. Todo lo que se ve aquí está escrito en
   este archivo, y todo lo que se dibuja (iconos, marca, ilustración del héroe)
   sale de SVG en línea generado por PHP. Sin build, sin CDN, sin un solo
   recurso externo: es lo que permite que la política de privacidad pueda
   afirmar que no hay transferencias internacionales.

   Orden del archivo:
     1. Fichas y variables
     2. Reinicio y base tipográfica
     3. Rejilla y contenedores
     4. Piezas comunes (botones, epígrafes, chapas, la franja)
     5. Cabecera, idiomas, menú móvil
     6. Héroe y constelación de aplicaciones
     7. Bloques de contenido
     8. Tarjetas de aplicación y de servicio
     9. Cabecera de página interior, migas, prosa, error
    10. Formulario de contacto
    11. Pie
    12. Movimiento y accesibilidad

   LA REGLA DEL COLOR: el sitio va en el azul de la casa. El color de una
   aplicación solo aparece donde informa —su tarjeta, su ficha, su punto en el
   menú, su nodo en la ilustración del héroe—. Todo cuelga de `--marca`, así
   que teñir una página entera es redefinir esa variable en el ámbito que sea.
   =========================================================================== */

/* ---- 1. Fichas y variables ---------------------------------------------- */

:root {
  /* Tinta y superficies */
  --tinta:        #0b1b3a;   /* titulares, y el fondo de las bandas oscuras */
  --tinta-media:  #3d4f6d;
  --tinta-suave:  #5b6b85;   /* texto corrido */
  --papel:        #ffffff;
  --papel-alt:    #f4f7fc;   /* secciones alternas */
  --noche:        #071431;   /* bandas oscuras y pie */
  --linea:        #e2e9f4;
  --linea-fuerte: #cfdaeb;

  /* Marca. Se redefine en la ficha de una aplicación y en cada tarjeta. */
  --marca:        #1f6fd4;
  --marca-rgb:    31, 111, 212;
  --marca-honda:  #0f4ea6;
  --marca-agua:   rgba(31, 111, 212, .10);

  /* Medidas */
  --ancho:        1180px;
  --canal:        24px;
  --radio:        16px;
  --radio-s:      10px;
  --radio-p:      999px;

  --sombra-1: 0 1px 2px rgba(11, 27, 58, .05);
  --sombra-2: 0 2px 4px rgba(11, 27, 58, .04), 0 14px 34px -18px rgba(11, 27, 58, .28);
  --sombra-3: 0 4px 10px rgba(11, 27, 58, .06), 0 26px 60px -26px rgba(11, 27, 58, .38);

  --pausa: 180ms cubic-bezier(.2, .6, .3, 1);

  color-scheme: light;
}

/* ---- 2. Reinicio y base tipográfica ------------------------------------- */

*, *::before, *::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 96px;
}

body {
  margin: 0;
  background: var(--papel);
  color: var(--tinta-suave);
  font-family: 'DM Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  font-size: 17px;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 .5em;
  font-family: 'Onest', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  color: var(--tinta);
  font-weight: 600;
  line-height: 1.16;
  letter-spacing: -.015em;
  /* Nunca capitalize: en castellano convierte cualquier titular en «El
     Recinto Lo Dibujas Tú». Si alguien lo reintroduce, esto lo desarma. */
  text-transform: none;
}

h1 { font-size: clamp(2.1rem, 1.35rem + 2.6vw, 3.5rem); }
h2 { font-size: clamp(1.7rem, 1.2rem + 1.7vw, 2.5rem); }
h3 { font-size: clamp(1.2rem, 1.05rem + .5vw, 1.4rem); }
h4 { font-size: 1.1rem; }

p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

a { color: var(--marca); text-decoration: none; transition: color var(--pausa); }
a:hover { color: var(--marca-honda); }

img, svg { max-width: 100%; height: auto; display: block; }

ul, ol { margin: 0 0 1.1em; padding-left: 1.2em; }
li { margin: 0 0 .4em; }

.ck-lista-limpia { list-style: none; margin: 0; padding: 0; }
.ck-lista-limpia > li { margin: 0; }

strong, b { color: var(--tinta); font-weight: 600; }

hr { border: 0; border-top: 1px solid var(--linea); margin: 2.5rem 0; }

:focus-visible {
  outline: 3px solid var(--marca);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Sobre fondo oscuro el azul de la casa (o el acento de una ficha) se queda
   corto de contraste: anillo blanco. */
.ck-pie :focus-visible, .ck-heroe :focus-visible, .ck-sec--noche :focus-visible { outline-color: #fff; }

::selection { background: rgba(var(--marca-rgb), .18); color: var(--tinta); }

/* Salto al contenido: solo visible al tabular. */
.ck-salto {
  position: absolute;
  left: 12px; top: -100px;
  z-index: 3000;
  background: var(--tinta);
  color: #fff;
  padding: 12px 18px;
  border-radius: var(--radio-s);
  transition: top var(--pausa);
}
.ck-salto:focus { top: 12px; color: #fff; }

.ck-oculto {
  position: absolute !important;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ---- 3. Rejilla y contenedores ------------------------------------------ */

.ck-wrap {
  width: 100%;
  max-width: var(--ancho);
  margin: 0 auto;
  padding: 0 var(--canal);
}

.ck-wrap--estrecho { max-width: 860px; }

/* Rejilla propia. `--cols` manda; se pliega sola en pantallas pequeñas. */
.ck-grid {
  display: grid;
  gap: 26px;
  grid-template-columns: repeat(var(--cols, 3), minmax(0, 1fr));
}
.ck-grid--2 { --cols: 2; }
.ck-grid--3 { --cols: 3; }
.ck-grid--4 { --cols: 4; }
.ck-grid--ancha { gap: 34px; }

@media (max-width: 1000px) {
  .ck-grid--3, .ck-grid--4 { --cols: 2; }
}
@media (max-width: 700px) {
  .ck-grid { --cols: 1 !important; gap: 20px; }
}

/* Secciones. El ritmo vertical del sitio sale de aquí y de ningún otro sitio. */
.ck-sec {
  position: relative;
  padding: clamp(56px, 6vw, 96px) 0;
}
.ck-sec--alt { background: var(--papel-alt); }
.ck-sec--linea { border-top: 1px solid var(--linea); }
.ck-sec--corta { padding: clamp(40px, 4vw, 64px) 0; }

.ck-sec--noche {
  background: var(--noche);
  color: #b9c8de;
}
.ck-sec--noche h1, .ck-sec--noche h2,
.ck-sec--noche h3, .ck-sec--noche h4 { color: #fff; }

/* Trama de puntos: el fondo firma del sitio. Dibujada con gradientes, sin
   imagen, así que no pesa nada y se tiñe con el color activo. */
.ck-trama::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(var(--marca-rgb), .16) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: linear-gradient(180deg, #000, transparent 70%);
          mask-image: linear-gradient(180deg, #000, transparent 70%);
  pointer-events: none;
}
.ck-trama > * { position: relative; }

/* ---- 4. Piezas comunes -------------------------------------------------- */

/* Botones: macizos y quietos. Cambian de color de fondo al pasar por encima y
   nada más — ni láminas que crecen, ni desplazamientos, ni sombras que saltan. */
.ck-btn {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 14px 26px;
  border: 1px solid transparent;
  border-radius: var(--radio-p);
  background: var(--marca);
  color: #fff;
  font-family: 'Onest', system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--pausa), border-color var(--pausa), color var(--pausa);
}
.ck-btn:hover { background: var(--marca-honda); color: #fff; }

.ck-btn--tinta { background: var(--tinta); }
.ck-btn--tinta:hover { background: #142a52; color: #fff; }

.ck-btn--claro {
  background: #fff;
  color: var(--tinta);
  border-color: var(--linea-fuerte);
}
.ck-btn--claro:hover { background: var(--papel-alt); color: var(--tinta); }

.ck-btn--pequeno { padding: 10px 18px; font-size: .94rem; min-height: 44px; }
.ck-btn .ic { flex: none; }

.ck-btns {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  align-items: center;
}

/* Enlace con flecha: para salir a la web de una aplicación. */
.ck-enlace {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-family: 'Onest', system-ui, sans-serif;
  font-weight: 600;
  color: var(--marca);
}
.ck-enlace .ic { transition: transform var(--pausa); }
.ck-enlace:hover .ic { transform: translateX(3px); }

/* Epígrafe + titular + entradilla. Toda sección del sitio empieza igual. */
.ck-titulo { max-width: 44rem; margin-bottom: 44px; }
.ck-titulo--centro { margin-left: auto; margin-right: auto; text-align: center; }

.ck-epigrafe {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
  font-family: 'Onest', system-ui, sans-serif;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--marca);
}
.ck-epigrafe::before {
  content: '';
  width: 20px; height: 2px;
  background: currentColor;
  border-radius: 2px;
}
.ck-sec--noche .ck-epigrafe { color: #7fb0f2; }

.ck-titulo h1, .ck-titulo h2 { margin-bottom: .35em; }

.ck-entradilla {
  font-size: 1.08rem;
  color: var(--tinta-suave);
  margin-bottom: 0;
}
.ck-sec--noche .ck-entradilla { color: #b9c8de; }

/* Chapa de estado (Disponible / Próximamente) y chapas de sección. */
.ck-chapa {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 5px 12px;
  border-radius: var(--radio-p);
  background: var(--marca-agua);
  color: var(--marca-honda);
  font-family: 'Onest', system-ui, sans-serif;
  font-size: .78rem;
  font-weight: 600;
  letter-spacing: .01em;
}
.ck-chapa::before {
  content: '';
  width: 7px; height: 7px;
  border-radius: 50%;
  background: currentColor;
}
.ck-chapa--pronto {
  background: #f1f4f9;
  color: var(--tinta-media);
}

/* La franja: un segmento por aplicación publicada, con su color real. No es
   decoración — es el catálogo dibujado en una sola barra. */
.ck-franja {
  display: flex;
  height: 4px;
  width: 100%;
  overflow: hidden;
}
.ck-franja span { flex: 1 1 0; }
.ck-franja--redonda { border-radius: var(--radio-p); }

/* Sello: el icono a tamaño grande sobre el color que toque. Se usa donde
   todavía no hay fotografía, y es dibujo nuestro, no un hueco esperando. */
.ck-sello {
  display: grid;
  place-items: center;
  aspect-ratio: 4 / 3;
  border-radius: var(--radio);
  background:
    radial-gradient(120% 120% at 20% 10%, rgba(255, 255, 255, .28), transparent 60%),
    var(--sello, var(--marca));
  color: #fff;
  box-shadow: var(--sombra-2);
  position: relative;
  overflow: hidden;
}
/* La misma trama de puntos del sitio, en negativo: sin ella el sello era un
   rectangulo de color plano y se notaba demasiado que faltaba la foto. */
.ck-sello::after {
  content: '';
  position: absolute;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, .22) 1px, transparent 1px);
  background-size: 18px 18px;
  -webkit-mask-image: linear-gradient(150deg, #000, transparent 72%);
          mask-image: linear-gradient(150deg, #000, transparent 72%);
}
.ck-sello .ic { position: relative; width: 34%; height: auto; opacity: .92; }

/* Baldosa de icono: el chip redondeado que abre cada tarjeta y cada
   característica. Es la pieza que más se repite del sitio. */
.ck-baldosa {
  display: grid;
  place-items: center;
  width: 52px; height: 52px;
  flex: none;
  border-radius: 14px;
  background: var(--marca-agua);
  color: var(--marca);
  transition: background-color var(--pausa), color var(--pausa);
}
.ck-baldosa--grande { width: 64px; height: 64px; border-radius: 18px; }

/* ---- 5. Cabecera, idiomas, menú móvil ----------------------------------- */

.ck-cabecera {
  position: relative;
  z-index: 900;
  background: #fff;
}

/* Barra superior: contacto y redes. Se retira en pantalla pequeña. */
.ck-cabecera__cinta {
  background: var(--noche);
  color: #fff;
  font-size: .88rem;
}
.ck-cabecera__cinta .ck-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  min-height: 42px;
}
.ck-cabecera__datos {
  display: flex;
  flex-wrap: wrap;
  gap: 22px;
  margin: 0; padding: 0;
  list-style: none;
}
.ck-cabecera__datos li {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}
.ck-cabecera__datos .ic { color: #5f86bd; flex: none; }
.ck-cabecera__datos a { color: #cbd8ea; }
.ck-cabecera__datos a:hover { color: #fff; }

.ck-redes { display: flex; gap: 6px; }
.ck-redes a {
  display: grid;
  place-items: center;
  width: 32px; height: 32px;
  border-radius: 50%;
  color: #93a6c2;
  transition: background-color var(--pausa), color var(--pausa);
}
.ck-redes a:hover { background: rgba(255, 255, 255, .12); color: #fff; }

/* Barra de navegación. */
.ck-barra {
  border-bottom: 1px solid var(--linea);
  background: #fff;
}
.ck-barra .ck-wrap {
  display: flex;
  align-items: center;
  gap: 20px;
  min-height: 78px;
}

.ck-marca {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-family: 'Onest', system-ui, sans-serif;
  font-weight: 700;
  font-size: 1.22rem;
  letter-spacing: .06em;
  color: var(--tinta);
}
.ck-marca:hover { color: var(--tinta); }
.ck-marca svg { flex: none; }

.ck-nav {
  display: flex;
  gap: 4px;
  margin: 0 auto 0 18px;
  padding: 0;
  list-style: none;
}
.ck-nav > li { margin: 0; }
.ck-nav a {
  display: block;
  padding: 10px 14px;
  white-space: nowrap; /* «Neurrira egindako softwarea» no se parte en dos */
  border-radius: var(--radio-s);
  font-family: 'Onest', system-ui, sans-serif;
  font-weight: 500;
  color: var(--tinta);
  transition: background-color var(--pausa), color var(--pausa);
}
.ck-nav a:hover { background: var(--papel-alt); color: var(--marca); }
.ck-nav .es-actual > a {
  color: var(--marca);
  background: var(--marca-agua);
}

/* Cinco entradas desde el 24/09/2026, y en euskera o en inglés son largas.
   Hasta 1240 px el botón de contacto de la barra sobra (Contacto ya está en
   el menú) y el relleno se aprieta; por debajo de 992 manda el panel móvil. */
@media (min-width: 992px) and (max-width: 1240px) {
  .ck-nav { margin-left: 8px; gap: 0; }
  .ck-nav a { padding: 10px 9px; font-size: .94rem; }
  .ck-barra__acciones .ck-btn { display: none; }
}

.ck-barra__acciones {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.ck-hamburguesa {
  display: none;
  place-items: center;
  width: 44px; height: 44px;
  border: 1px solid var(--linea-fuerte);
  border-radius: var(--radio-s);
  background: #fff;
  color: var(--tinta);
  cursor: pointer;
}

/* Cabecera pegajosa: la misma barra, fija, al bajar. */
.ck-pegajosa {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 950;
  background: rgba(255, 255, 255, .96);
  backdrop-filter: saturate(140%) blur(8px);
  box-shadow: var(--sombra-2);
  transform: translateY(-100%);
  /* Escondida de verdad mientras no baja: sin esto, sus enlaces recibían el
     foco del teclado fuera de pantalla hasta que corría app.js. */
  visibility: hidden;
  transition: transform 240ms ease, visibility 0s linear 240ms;
}
.ck-pegajosa.esta-fija { transform: translateY(0); visibility: visible; transition: transform 240ms ease, visibility 0s; }
.ck-pegajosa .ck-barra { border-bottom: 0; }
.ck-pegajosa .ck-barra .ck-wrap { min-height: 68px; }

/* Selector de idioma: los cinco escritos, no un desplegable.

   Va en la cinta oscura de la cabecera. Con cinco idiomas, esconder cuatro
   detrás de un botón que pone «ES» es pedirle al visitante que adivine si su
   idioma está; escritos caben, y de paso se ahorra el JavaScript. */
.ck-idiomas {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.ck-idiomas__marca { display: flex; color: #5f86bd; }
.ck-idiomas__lista {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px 0;
  margin: 0; padding: 0;
  list-style: none;
}
.ck-idiomas__lista li { margin: 0; display: flex; align-items: center; }
/* Separador dibujado, no un carácter en el marcado: así el enlace es solo el
   nombre del idioma y el punto no se selecciona ni se lee en voz alta. */
.ck-idiomas__lista li + li::before {
  content: '';
  width: 3px; height: 3px;
  border-radius: 50%;
  background: rgba(255, 255, 255, .22);
}
.ck-idiomas__lista a {
  display: block;
  padding: 4px 9px;
  border-radius: var(--radio-p);
  color: #cbd8ea;
  font-family: 'Onest', system-ui, sans-serif;
  font-size: .86rem;
  font-weight: 500;
  white-space: nowrap;
  transition: color var(--pausa), background-color var(--pausa);
}
.ck-idiomas__lista a:hover { color: #fff; background: rgba(255, 255, 255, .10); }
.ck-idiomas__lista a.es-actual {
  color: #fff;
  font-weight: 600;
  background: rgba(var(--marca-rgb), .34);
}

/* En el panel móvil (la cinta no se ve ahí) van en columna, como el resto. */
.ck-idiomas--menu { display: block; }
.ck-idiomas--menu .ck-idiomas__lista { display: block; }
.ck-idiomas--menu .ck-idiomas__lista li { display: block; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.ck-idiomas--menu .ck-idiomas__lista li + li::before { display: none; }
.ck-idiomas--menu .ck-idiomas__lista a {
  padding: 12px 0;
  border-radius: 0;
  font-size: .98rem;
  color: #dce6f4;
}
.ck-idiomas--menu .ck-idiomas__lista a:hover { background: none; color: #fff; }
.ck-idiomas--menu .ck-idiomas__lista a.es-actual { background: none; color: #7fb0f2; }

/* La cinta: contacto a la izquierda, idiomas y redes a la derecha. */
.ck-cabecera__fin {
  display: flex;
  align-items: center;
  gap: 16px;
  min-width: 0;
}

/* Menú móvil: panel lateral con velo. */
.ck-menu {
  position: fixed;
  inset: 0;
  z-index: 1200;
  visibility: hidden;
  opacity: 0;
  transition: opacity 220ms ease, visibility 220ms ease;
}
.ck-menu.esta-abierto { visibility: visible; opacity: 1; }

.ck-menu__velo {
  position: absolute;
  inset: 0;
  background: rgba(7, 20, 49, .58);
}

.ck-menu__panel {
  position: absolute;
  inset: 0 auto 0 0;
  width: min(360px, 88vw);
  padding: 26px 24px 32px;
  overflow-y: auto;
  background: var(--noche);
  color: #b9c8de;
  transform: translateX(-100%);
  transition: transform 260ms cubic-bezier(.2, .7, .3, 1);
}
.ck-menu.esta-abierto .ck-menu__panel { transform: translateX(0); }

.ck-menu__panel .ck-marca { color: #fff; }
.ck-menu__panel .ck-marca:hover { color: #fff; }

.ck-menu__cerrar {
  position: absolute;
  right: 18px; top: 18px;
  display: grid;
  place-items: center;
  width: 40px; height: 40px;
  border: 1px solid rgba(255, 255, 255, .18);
  border-radius: 50%;
  background: none;
  color: #fff;
  cursor: pointer;
}
.ck-menu__cerrar:hover { background: rgba(255, 255, 255, .1); }

.ck-menu__lista {
  list-style: none;
  margin: 26px 0 0;
  padding: 0;
}
.ck-menu__lista li { margin: 0; border-bottom: 1px solid rgba(255, 255, 255, .1); }
.ck-menu__lista a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 13px 0;
  color: #dce6f4;
  font-family: 'Onest', system-ui, sans-serif;
  font-weight: 500;
}
.ck-menu__lista a:hover { color: #fff; }
.ck-menu__punto {
  width: 9px; height: 9px;
  flex: none;
  border-radius: 50%;
}

.ck-menu__epigrafe {
  margin: 26px 0 6px;
  font-family: 'Onest', system-ui, sans-serif;
  font-size: .74rem;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: #6b83a6;
}

.ck-menu__contacto {
  list-style: none;
  margin: 28px 0 0;
  padding: 0;
  font-size: .93rem;
}
.ck-menu__contacto li {
  display: flex;
  align-items: center;
  gap: 9px;
  margin-bottom: 8px;
}
.ck-menu__contacto a { color: #dce6f4; }

/* Entre 992 y 1150 px la cinta va justa: se retira la dirección postal, que
   está entera en el pie y en Contacto, antes que partir la fila de idiomas. */
@media (max-width: 1150px) {
  .ck-cabecera__datos li:nth-child(2) { display: none; }
}

@media (max-width: 991px) {
  .ck-cabecera__cinta { display: none; }
  .ck-nav { display: none; }
  .ck-hamburguesa { display: grid; }
  .ck-barra .ck-wrap { min-height: 66px; }
}
@media (max-width: 520px) {
  .ck-barra__acciones .ck-btn { display: none; }
}

/* ---- 6. Héroe y constelación -------------------------------------------- */

.ck-heroe {
  position: relative;
  overflow: hidden;
  background:
    radial-gradient(80% 120% at 88% 8%, rgba(var(--marca-rgb), .30), transparent 62%),
    linear-gradient(168deg, #0a1e46 0%, var(--noche) 58%, #050f26 100%);
  color: #b9c8de;
  padding: clamp(52px, 6vw, 92px) 0 clamp(56px, 6vw, 96px);
}

/* Malla técnica de fondo: dos gradientes cruzados. Ni una imagen. */
.ck-heroe::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .045) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .045) 1px, transparent 1px);
  background-size: 56px 56px;
  -webkit-mask-image: radial-gradient(120% 90% at 50% 0%, #000 20%, transparent 78%);
          mask-image: radial-gradient(120% 90% at 50% 0%, #000 20%, transparent 78%);
  pointer-events: none;
}

.ck-heroe__inner {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1.02fr) minmax(0, 1fr);
  gap: clamp(32px, 5vw, 60px);
  align-items: center;
}
.ck-heroe--solo .ck-heroe__inner { grid-template-columns: minmax(0, 1fr); max-width: 46rem; }

.ck-heroe h1 { color: #fff; margin-bottom: .4em; }
.ck-heroe h1 span { color: #7fb0f2; }
.ck-heroe h1.ck-heroe__h1--azul { color: #7fb0f2; }
.ck-heroe h1.ck-heroe__h1--azul em { color: #fff; font-style: normal; }
.ck-heroe .ck-epigrafe { color: #7fb0f2; }

.ck-heroe__texto {
  font-size: 1.12rem;
  color: #c2d0e4;
  max-width: 34rem;
  margin-bottom: 28px;
}

.ck-heroe .ck-btn--claro { border-color: transparent; }

.ck-heroe__figura { position: relative; }
/* La viñeta de la ficha sobre la red oscura: el lienzo claro necesita
   despegarse del fondo, y aquí sí hace falta la sombra por fuera. */
.ck-heroe__figura .ck-vineta {
  border-radius: 21px;
  box-shadow: var(--sombra-3);
}

@media (max-width: 900px) {
  .ck-heroe__inner { grid-template-columns: minmax(0, 1fr); }
  .ck-heroe__figura { order: -1; }
}

/* Héroe de marca: una columna centrada sobre la red animada de Vanta NET
   (assets/js/fondos.js). El lienzo va detrás, a sangre; mientras no
   arranca —o si no arranca— se ve el degradado de .ck-heroe. La malla CSS se
   retira en cuanto la red está activa, que ya dibuja la suya. */
.ck-heroe__red {
  position: absolute;
  inset: 0;
  z-index: 0;
}
.ck-heroe__red canvas { display: block; }
/* La red va detrás de TODAS las cabeceras (héroes de marca, fichas y
   .ck-titular de las páginas interiores): el mismo fondo en toda la web. */
.ck-heroe:has(.ck-heroe__red.is-activa)::before,
.ck-titular:has(.ck-heroe__red.is-activa)::before { display: none; }
.ck-heroe__inner,
.ck-titular .ck-wrap { pointer-events: none; }  /* el ratón llega a la red… */
.ck-heroe__inner a,
.ck-titular .ck-wrap a { pointer-events: auto; }  /* …salvo en los enlaces */
.ck-heroe h1,
.ck-heroe__texto,
.ck-titular h1 { text-shadow: 0 2px 18px rgba(7, 20, 49, .8); }

.ck-heroe--red { padding: clamp(56px, 7vw, 104px) 0 clamp(56px, 7vw, 104px); }
.ck-heroe--red .ck-heroe__inner {
  max-width: 50rem;
  margin: 0 auto;
  text-align: center;
}
.ck-heroe--red .ck-heroe__texto { max-width: none; margin-left: auto; margin-right: auto; }
.ck-heroe--red .ck-btns { margin-bottom: 0; justify-content: center; }

/* La constelación: la ilustración del héroe, dibujada en SVG por
   views/components/constelacion.php. Un nodo por aplicación publicada, con su
   color y su icono, alrededor de la marca. Se lee de /content: una aplicación
   nueva aparece sola. */
.ck-constelacion {
  width: 100%;
  filter: drop-shadow(0 30px 60px rgba(0, 0, 0, .45));
}
.ck-constelacion__nodo { cursor: default; }
.ck-constelacion__nodo text {
  font-family: 'Onest', system-ui, sans-serif;
  font-size: 13px;
  font-weight: 600;
  fill: #ffffff;
}
.ck-constelacion__nodo tspan.sub {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 10.5px;
  font-weight: 400;
  fill: #9fb4d2;
}
.ck-constelacion__marca text {
  font-family: 'Onest', system-ui, sans-serif;
  font-weight: 700;
  fill: #fff;
}
.ck-constelacion__pie {
  font-family: 'DM Sans', system-ui, sans-serif;
  font-size: 11px;
  fill: #7d93b5;
}

/* ---- 7. Bloques de contenido -------------------------------------------- */

/* Características: baldosa + texto, en tarjeta plana. */
.ck-caract {
  display: flex;
  gap: 16px;
  padding: 24px;
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  transition: border-color var(--pausa), box-shadow var(--pausa);
  position: relative;
}
.ck-caract:hover { border-color: var(--linea-fuerte); box-shadow: var(--sombra-2); }
.ck-caract > div { min-width: 0; }
.ck-caract h3 { margin-bottom: .3em; font-size: 1.12rem; overflow-wrap: break-word; hyphens: auto; }
.ck-caract p { margin: 0; font-size: .98rem; }
/* Tarjeta con destino: el título enlaza y el enlace cubre la tarjeta entera. */
.ck-caract__enlace { color: inherit; text-decoration: none; }
.ck-caract__enlace::after { content: ''; position: absolute; inset: 0; border-radius: inherit; }
.ck-caract__enlace:hover, .ck-caract__enlace:focus-visible { color: var(--marca); }
.ck-caract__enlace:focus-visible { outline: none; }
.ck-caract:has(.ck-caract__enlace:focus-visible) { outline: 2px solid var(--marca); outline-offset: 2px; }

/* Enlaces destacados encima de una rejilla (CRM a medida · ERP a medida). */
.ck-destacados {
  display: flex; flex-wrap: wrap; justify-content: center; gap: 12px 16px;
  margin: -12px 0 32px; padding: 0; list-style: none;
}
.ck-destacados a {
  display: inline-flex; align-items: center; gap: 8px;
  min-height: 44px; padding: 10px 18px;
  border: 1px solid var(--marca); border-radius: var(--radio-p);
  color: var(--marca); font-weight: 600; text-decoration: none;
  transition: background-color var(--pausa), color var(--pausa);
}
.ck-destacados a:hover, .ck-destacados a:focus-visible { background: var(--marca); color: #fff; }

/* Enlace con flecha dentro de un texto (respuestas de la FAQ). */
.ck-enlace-flecha { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.ck-sec--noche .ck-caract {
  background: rgba(255, 255, 255, .04);
  border-color: rgba(255, 255, 255, .1);
}

/* Pasos numerados. La línea que los une se dibuja con un pseudoelemento. */
.ck-pasos { counter-reset: paso; position: relative; }
.ck-paso { counter-increment: paso; position: relative; }
.ck-paso__num {
  display: grid;
  place-items: center;
  width: 54px; height: 54px;
  margin-bottom: 18px;
  border-radius: 50%;
  background: var(--marca);
  color: #fff;
  font-family: 'Onest', system-ui, sans-serif;
  font-size: 1.22rem;
  font-weight: 600;
  box-shadow: 0 0 0 8px rgba(var(--marca-rgb), .10);
}
.ck-paso__num::before { content: counter(paso, decimal-leading-zero); }
.ck-paso h3 { font-size: 1.14rem; margin-bottom: .3em; }
.ck-paso p { margin: 0; font-size: .98rem; }

@media (min-width: 1001px) {
  .ck-paso::after {
    content: '';
    position: absolute;
    left: 66px; top: 27px;
    width: calc(100% - 40px);
    border-top: 2px dashed var(--linea-fuerte);
  }
  .ck-paso:last-child::after { display: none; }
}

/* Sección sobre la red animada (bloque `steps` con `red`): azul noche, la
   misma red de Vanta que el héroe detrás y todo el texto en claro. Sin WebGL
   se queda el degradado. */
.ck-sec--red {
  position: relative;
  overflow: hidden;
  background: linear-gradient(168deg, #0a1e46 0%, var(--noche) 60%, #050f26 100%);
  color: #b9c8de;
}
.ck-sec__red { position: absolute; inset: 0; z-index: 0; }
.ck-sec__red canvas { display: block; }
.ck-sec--red > .ck-wrap { position: relative; z-index: 1; }
.ck-sec--red h2,
.ck-sec--red .ck-paso h3 { color: #fff; }
.ck-sec--red .ck-epigrafe { color: #7fb0f2; }
.ck-sec--red .ck-entradilla,
.ck-sec--red .ck-paso p { color: #c2d0e4; }
.ck-sec--red .ck-paso__num { box-shadow: 0 0 0 8px rgba(127, 176, 242, .18); }
.ck-sec--red .ck-paso::after { border-top-color: rgba(127, 176, 242, .35); }
.ck-sec--red h2,
.ck-sec--red .ck-paso h3,
.ck-sec--red .ck-paso p { text-shadow: 0 2px 14px rgba(7, 20, 49, .85); }

/* Cifras. */
.ck-cifras {
  display: grid;
  gap: 24px;
  grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
  list-style: none;
  margin: 0; padding: 0;
  text-align: center;
}
.ck-cifra { margin: 0; }
.ck-cifra strong {
  display: block;
  font-family: 'Onest', system-ui, sans-serif;
  font-size: clamp(2rem, 1.4rem + 1.8vw, 2.9rem);
  font-weight: 600;
  line-height: 1.1;
  color: var(--marca);
}
.ck-sec--noche .ck-cifra strong { color: #7fb0f2; }
.ck-cifra span { font-size: .97rem; }

/* Texto + figura a dos columnas. */
.ck-split__inner {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(30px, 5vw, 62px);
  align-items: center;
}
.ck-split--sin-figura .ck-split__inner { grid-template-columns: minmax(0, 1fr); max-width: 48rem; }
.ck-split--centrada .ck-split__inner { margin: 0 auto; }

@media (max-width: 900px) {
  .ck-split__inner { grid-template-columns: minmax(0, 1fr); }
  .ck-split__figura { order: -1; }
}
@media (min-width: 901px) {
  .ck-split--invertida .ck-split__figura { order: 2; }
}

.ck-split__figura img {
  width: 100%;
  aspect-ratio: 3 / 2;   /* reserva el hueco antes de cargar: sin saltos */
  object-fit: cover;
  border-radius: var(--radio);
  box-shadow: var(--sombra-3);
}

/* La viñeta: la escena dibujada de cada sección (views/components/vineta.php).
   Sin sombra ni redondeo de CSS: el relieve va dentro del propio SVG, que sabe
   dónde están sus piezas; una sombra de caja marcaría el rectángulo completo y
   el dibujo tiene las esquinas redondeadas por dentro. */
.ck-vineta {
  display: block;
  width: 100%;
  height: auto;
}

/* Lista con comprobaciones. */
.ck-checks { list-style: none; margin: 20px 0 26px; padding: 0; }
.ck-checks li {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin-bottom: 11px;
  color: var(--tinta);
  font-weight: 500;
}
.ck-checks .ic {
  flex: none;
  margin-top: 3px;
  padding: 3px;
  border-radius: 50%;
  background: var(--marca-agua);
  color: var(--marca);
  box-sizing: content-box;
}

/* Capturas. */
.ck-captura { margin: 0; }
.ck-captura img {
  width: 100%;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra-2);
}
.ck-captura figcaption {
  margin-top: 12px;
  font-size: .93rem;
  color: var(--tinta-suave);
}

/* Precios. */
.ck-plan {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 30px 28px;
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  transition: border-color var(--pausa), box-shadow var(--pausa);
}
.ck-plan:hover { box-shadow: var(--sombra-2); }
.ck-plan--destacado {
  border-color: var(--marca);
  box-shadow: 0 0 0 1px var(--marca), var(--sombra-2);
}
.ck-plan__chapa { align-self: flex-start; margin-bottom: 14px; }
.ck-plan__nombre {
  font-family: 'Onest', system-ui, sans-serif;
  font-weight: 600;
  color: var(--tinta);
  margin-bottom: 6px;
}
.ck-plan__precio {
  font-family: 'Onest', system-ui, sans-serif;
  font-size: 2.3rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--tinta);
  margin: 0 0 4px;
}
.ck-plan__precio span {
  font-size: .95rem;
  font-weight: 400;
  color: var(--tinta-suave);
}
.ck-plan__nota { font-size: .92rem; margin-bottom: 18px; }
.ck-plan__lista {
  list-style: none;
  margin: 0 0 26px;
  padding: 20px 0 0;
  border-top: 1px solid var(--linea);
  flex: 1;
}
.ck-plan__lista li {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 10px;
  font-size: .97rem;
}
.ck-plan__lista li::before {
  content: '';
  flex: none;
  width: 7px; height: 7px;
  margin-top: 10px;
  border-radius: 50%;
  background: var(--marca);
}
.ck-plan .ck-btn { justify-content: center; }

/* Preguntas frecuentes. */
.ck-faq__inner {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(28px, 5vw, 56px);
  align-items: start;
}
@media (max-width: 900px) { .ck-faq__inner { grid-template-columns: minmax(0, 1fr); } }

.ck-acordeon {
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  background: #fff;
  overflow: hidden;
}
.ck-acordeon__item + .ck-acordeon__item { border-top: 1px solid var(--linea); }
.ck-acordeon__boton {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  width: 100%;
  padding: 20px 22px;
  border: 0;
  background: none;
  text-align: left;
  cursor: pointer;
  font-family: 'Onest', system-ui, sans-serif;
  font-size: 1.04rem;
  font-weight: 600;
  color: var(--tinta);
  transition: color var(--pausa);
}
.ck-acordeon__boton:hover { color: var(--marca); }
.ck-acordeon__boton .ic { flex: none; color: var(--marca); transition: transform var(--pausa); }
.ck-acordeon__boton[aria-expanded="true"] { color: var(--marca); }
.ck-acordeon__boton[aria-expanded="true"] .ic { transform: rotate(180deg); }
.ck-acordeon__panel { padding: 0 22px 22px; }
.ck-acordeon__panel p { margin: 0; }

/* Banda de cierre. */
.ck-cierre__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 28px;
  padding: clamp(30px, 4vw, 48px);
  border-radius: calc(var(--radio) + 6px);
  background:
    radial-gradient(90% 140% at 90% 0%, rgba(var(--marca-rgb), .34), transparent 60%),
    var(--noche);
  color: #b9c8de;
}
.ck-cierre h2 { color: #fff; margin-bottom: .3em; }
.ck-cierre p { margin: 0; max-width: 34rem; }
.ck-cierre__texto { flex: 1 1 320px; }
.ck-cierre .ck-btn--claro { border-color: transparent; }

/* Texto justificado (15/10/2026, a petición del usuario): la prosa, los
   bloques a dos columnas, las respuestas de las preguntas y las guías van
   justificados, con guiones automáticos (el <html> lleva el lang de cada
   idioma). Las tarjetas de tres en fila NO: en una columna de 30 caracteres
   el justificado abre huecos entre palabras, y lo centrado sigue centrado. */
.ck-prosa :is(p, li), .ck-split :is(p, li), .ck-acordeon :is(p, li),
.ck-contacto__inner .ck-entradilla { text-align: justify; -webkit-hyphens: auto; hyphens: auto; }

/* Prosa: texto corrido largo (páginas legales). */
.ck-prosa { max-width: 46rem; }
.ck-prosa h2 { margin-top: 2em; font-size: 1.6rem; }
.ck-prosa h3 { margin-top: 1.6em; }
.ck-prosa h2:first-child, .ck-prosa h3:first-child { margin-top: 0; }
.ck-prosa ul, .ck-prosa ol { padding-left: 1.3em; }
.ck-prosa li { margin-bottom: .5em; }
.ck-prosa a { text-decoration: underline; text-underline-offset: 3px; }
.ck-prosa table {
  width: 100%;
  border-collapse: collapse;
  margin: 1.4em 0;
  font-size: .95rem;
}
.ck-prosa th, .ck-prosa td {
  padding: 11px 13px;
  border: 1px solid var(--linea);
  text-align: left;
  vertical-align: top;
}
.ck-prosa th { background: var(--papel-alt); color: var(--tinta); font-weight: 600; }
.ck-prosa dl { margin: 1.2em 0; }
.ck-prosa dt { color: var(--tinta); font-weight: 600; margin-top: .9em; }
.ck-prosa dd { margin: 0 0 .3em; }

/* Tabla que se desborda: se desplaza dentro de su caja, nunca la página. */
.ck-tabla-scroll { overflow-x: auto; }
.ck-prosa .ck-tabla-scroll table { min-width: 34rem; }

/* «Qué demuestra este proyecto» (fichas de proyecto). */
.ck-demuestra__caja {
  max-width: 52rem; margin: 0 auto;
  padding: 30px 32px;
  border: 1px solid var(--linea); border-left: 4px solid var(--marca);
  border-radius: var(--radio);
  background: #fff;
}
.ck-demuestra__caja h2 { font-size: 1.5rem; margin-bottom: .5em; }
.ck-demuestra__caja p { margin: 0 0 1em; }
.ck-demuestra__cta { color: var(--tinta); }
.ck-demuestra .ck-btns { margin-top: 8px; }
.ck-demuestra .ck-btn--claro { border-color: var(--marca); }
@media (max-width: 560px) { .ck-demuestra__caja { padding: 22px 20px; } }

/* Tabla comparativa (bloque `compare`). */
.ck-comparar {
  max-width: 62rem; margin: 0 auto;
  border: 1px solid var(--linea); border-radius: var(--radio);
  background: #fff;
}
.ck-comparar:focus-visible { outline: 2px solid var(--marca); outline-offset: 2px; }
.ck-comparar table { width: 100%; min-width: 560px; border-collapse: collapse; font-size: .97rem; }
.ck-comparar th, .ck-comparar td {
  padding: 14px 18px; text-align: left; vertical-align: top;
  border-bottom: 1px solid var(--linea);
}
.ck-comparar tbody tr:last-child th, .ck-comparar tbody tr:last-child td { border-bottom: 0; }
.ck-comparar thead th { background: var(--papel-alt); color: var(--tinta); font-family: inherit; font-weight: 600; }
.ck-comparar tbody th { color: var(--tinta); font-weight: 600; width: 26%; }
.ck-comparar td { color: var(--tinta-media); }
.ck-comparar .ck-comparar__nuestra { background: var(--marca-agua); }
.ck-comparar thead .ck-comparar__nuestra { color: var(--marca-honda); }
.ck-comparar__nota {
  max-width: 46rem; margin: 26px auto 0;
  text-align: center; font-weight: 600; color: var(--tinta);
}

/* Escaparate de CLOUDESK CRM (bloque `crm_showcase`). Banda oscura a todo lo
   ancho con todos los módulos a la vista: es el producto de la casa y en la
   portada tiene que pesar más que cualquier otra sección. Va en el azul de la
   marca, que es su color. */
.ck-crm {
  background:
    radial-gradient(70% 60% at 85% 0%, rgba(31, 111, 212, .30), transparent 70%),
    radial-gradient(60% 50% at 0% 100%, rgba(31, 111, 212, .18), transparent 70%),
    var(--noche);
  overflow: hidden;
}
.ck-crm .ck-titulo { max-width: 50rem; }
.ck-crm__cifras { margin-bottom: 48px; }

.ck-crm__modulos {
  display: grid;
  gap: 18px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ck-crm__modulo {
  padding: 22px 22px 20px;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: var(--radio);
  background: rgba(255, 255, 255, .04);
  transition: border-color var(--pausa), background-color var(--pausa);
}
.ck-crm__modulo:hover {
  border-color: rgba(127, 176, 242, .45);
  background: rgba(255, 255, 255, .06);
}
.ck-crm__cabeza {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 14px;
}
.ck-crm__cabeza h3 { margin: 0; font-size: 1.12rem; }
.ck-crm .ck-baldosa {
  width: 44px; height: 44px;
  border-radius: 12px;
  background: rgba(127, 176, 242, .14);
  color: #7fb0f2;
}
.ck-crm__modulo ul {
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: .95rem;
  line-height: 1.5;
}
.ck-crm__modulo li {
  position: relative;
  padding-left: 16px;
  margin-top: 5px;
}
.ck-crm__modulo li::before {
  content: '';
  position: absolute;
  left: 2px; top: .62em;
  width: 5px; height: 5px;
  border-radius: 50%;
  background: #7fb0f2;
}

/* Versión compacta (portada): solo los nombres de los módulos. */
.ck-crm__nombres {
  display: grid; gap: 12px;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin: 0; padding: 0; list-style: none;
}
.ck-crm__nombres li {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px;
  border: 1px solid rgba(255, 255, 255, .10);
  border-radius: var(--radio-s);
  background: rgba(255, 255, 255, .04);
  color: #fff; font-weight: 600; font-size: .95rem; line-height: 1.3;
}
.ck-crm__nombres .ic { flex: none; color: #7fb0f2; }
@media (max-width: 1000px) { .ck-crm__nombres { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 700px)  { .ck-crm__nombres { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.ck-crm__subtitulo {
  margin: 56px 0 22px;
  text-align: center;
  font-size: 1.35rem;
}
.ck-crm__claves {
  display: grid;
  gap: 16px 30px;
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.ck-crm__clave {
  display: flex;
  gap: 12px;
  align-items: flex-start;
}
.ck-crm__clave .ic { flex: none; margin-top: 2px; color: #7fb0f2; }
.ck-crm__clave strong { display: block; color: #fff; font-weight: 600; }
.ck-crm__clave p { margin: 2px 0 0; font-size: .94rem; }

.ck-crm__acciones { justify-content: center; margin-top: 48px; }

@media (max-width: 1000px) {
  .ck-crm__modulos, .ck-crm__claves { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 700px) {
  .ck-crm__modulos, .ck-crm__claves { grid-template-columns: minmax(0, 1fr); }
  /* Las cuatro cifras de dos en dos: una por fila se comían la pantalla. */
  .ck-crm__cifras { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px 12px; }
}

/* ---- 8. Tarjetas de aplicación y de servicio ---------------------------- */

/* La tarjeta de aplicación es la pieza principal del catálogo. Al pasar por
   encima se levanta un pelo y se tiñe el filete superior con SU color: nada
   desaparece, nada se pone blanco sobre blanco. */
.ck-app {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  overflow: hidden;
  transition: transform var(--pausa), box-shadow var(--pausa), border-color var(--pausa);
}
.ck-app__cuerpo {
  display: flex;
  flex-direction: column;
  flex: 1;
  padding: 22px 24px 24px;
}

/* La miniatura dibujada de arriba (components/vista-app). No es una captura
   real: es el gesto de la aplicación, en su color. */
.ck-app__vista {
  padding: 18px 18px 0;
  background: linear-gradient(180deg, rgba(var(--marca-rgb), .10), rgba(var(--marca-rgb), .02));
  border-bottom: 1px solid var(--linea);
}
.ck-app__vista .ck-vista {
  width: 100%;
  border-radius: 12px 12px 0 0;
  box-shadow: 0 -1px 0 rgba(11, 27, 58, .06), 0 12px 26px -14px rgba(11, 27, 58, .5);
  transition: transform var(--pausa);
}
.ck-app:hover .ck-app__vista .ck-vista { transform: translateY(-3px); }

.ck-app__web {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0 0 16px;
  font-size: .88rem;
  color: var(--tinta-media);
}
.ck-app__web .ic { color: var(--marca); flex: none; }
.ck-app::before {
  content: '';
  position: absolute;
  inset: 0 0 auto 0;
  height: 4px;
  background: var(--marca);
  opacity: .85;
}
.ck-app:hover {
  transform: translateY(-3px);
  border-color: rgba(var(--marca-rgb), .45);
  box-shadow: var(--sombra-3);
}
.ck-app__cabeza {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}
.ck-app__cabeza .ck-baldosa {
  background: rgba(var(--marca-rgb), .12);
  color: var(--marca);
}
.ck-app:hover .ck-baldosa { background: var(--marca); color: #fff; }

.ck-app__nombre {
  margin: 0;
  font-size: 1.3rem;
}
.ck-app__nombre a { color: var(--tinta); }
.ck-app__nombre a:hover { color: var(--marca); }
/* El enlace cubre la tarjeta entera: se puede pulsar en cualquier punto y
   sigue siendo un enlace de verdad para el teclado y el lector de pantalla. */
.ck-app__nombre a::after { content: ''; position: absolute; inset: 0; }
/* El enlace cubre la tarjeta entera: el anillo de foco, también. */
.ck-app:has(a:focus-visible) { outline: 3px solid var(--marca); outline-offset: 2px; }
.ck-app__nombre a:focus-visible { outline: none; }

.ck-app__texto { flex: 1; margin: 0 0 18px; font-size: .99rem; }

.ck-app__pie {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 16px;
  border-top: 1px solid var(--linea);
}
.ck-app__mas {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-family: 'Onest', system-ui, sans-serif;
  font-weight: 600;
  font-size: .95rem;
  color: var(--marca);
}
.ck-app__mas .ic { transition: transform var(--pausa); }
.ck-app:hover .ck-app__mas .ic { transform: translateX(3px); }

.ck-app--pronto { opacity: .92; }
.ck-app--pronto::before { opacity: .4; }

/* La tarjeta de servicio: la misma pieza, sin color propio (un servicio no es
   una marca) y con su lista de puntos. */
.ck-servicio {
  display: flex;
  flex-direction: column;
  height: 100%;
  padding: 30px 28px;
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  transition: box-shadow var(--pausa), border-color var(--pausa);
}
.ck-servicio:hover { border-color: var(--linea-fuerte); box-shadow: var(--sombra-2); }
.ck-servicio h3 { margin: 18px 0 .35em; }
.ck-servicio__lista { list-style: none; margin: 4px 0 22px; padding: 0; flex: 1; }
.ck-servicio__lista li {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  margin-bottom: 8px;
  font-size: .95rem;
}
.ck-servicio__lista .ic { flex: none; margin-top: 4px; color: var(--marca); }
.ck-servicio .ck-btn { align-self: flex-start; }

/* Banda del enlace a la web propia de la aplicación. */
.ck-web-propia {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 18px;
  padding: 22px 26px;
  background: #fff;
  border: 1px solid var(--linea);
  border-left: 4px solid var(--marca);
  border-radius: var(--radio);
}
.ck-web-propia__texto { flex: 1 1 300px; }
.ck-web-propia p { margin: 0; font-size: .97rem; }
.ck-web-propia strong { display: block; font-family: 'Onest', system-ui, sans-serif; }

/* ---- 9. Cabecera de página, migas, error -------------------------------- */

.ck-titular {
  position: relative;
  padding: clamp(38px, 5vw, 66px) 0;
  background:
    radial-gradient(70% 140% at 92% 0%, rgba(var(--marca-rgb), .28), transparent 60%),
    var(--noche);
  color: #a9bad3;
  overflow: hidden;
}
.ck-titular::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(255, 255, 255, .04) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255, 255, 255, .04) 1px, transparent 1px);
  background-size: 48px 48px;
  -webkit-mask-image: radial-gradient(100% 100% at 100% 0%, #000, transparent 70%);
          mask-image: radial-gradient(100% 100% at 100% 0%, #000, transparent 70%);
}
.ck-titular .ck-wrap { position: relative; }
.ck-titular h1 { color: #fff; margin-bottom: .25em; }
.ck-titular__meta { font-size: .95rem; color: #93a6c2; margin: 0; }

.ck-migas {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  margin: 16px 0 0;
  padding: 0;
  font-size: .92rem;
}
.ck-migas li { margin: 0; }
.ck-migas a { color: #a9bad3; }
.ck-migas a:hover { color: #fff; }
.ck-migas span[aria-current] { color: #7fb0f2; }
.ck-migas__sep { color: #566f92; }
.ck-migas li[aria-hidden] { color: #566f92; }
/* Migas dentro de un héroe centrado (páginas de servicio). */
.ck-heroe .ck-migas { margin: 0 0 18px; }
.ck-heroe--red .ck-migas { justify-content: center; }

.ck-error { text-align: center; }
.ck-error__num {
  font-family: 'Onest', system-ui, sans-serif;
  font-size: clamp(4rem, 2rem + 10vw, 8rem);
  font-weight: 700;
  line-height: 1;
  color: var(--marca);
  margin: 0 0 .1em;
}

/* ---- 10. Formulario de contacto ----------------------------------------- */

.ck-contacto__inner {
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: clamp(30px, 5vw, 56px);
  align-items: start;
}
@media (max-width: 900px) { .ck-contacto__inner { grid-template-columns: minmax(0, 1fr); } }

.ck-datos { list-style: none; margin: 26px 0 0; padding: 0; }
.ck-datos li {
  display: flex;
  gap: 14px;
  margin-bottom: 20px;
}
.ck-datos__et {
  font-family: 'Onest', system-ui, sans-serif;
  font-weight: 600;
  color: var(--tinta);
  margin: 0 0 2px;
}
.ck-datos p { margin: 0; font-size: .97rem; }

.ck-form {
  padding: clamp(22px, 3vw, 34px);
  background: #fff;
  border: 1px solid var(--linea);
  border-radius: var(--radio);
  box-shadow: var(--sombra-2);
}
.ck-form__fila {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 18px;
}
@media (max-width: 620px) { .ck-form__fila { grid-template-columns: minmax(0, 1fr); } }

.ck-campo { margin-bottom: 18px; }
.ck-campo label {
  display: block;
  margin-bottom: 7px;
  font-family: 'Onest', system-ui, sans-serif;
  font-weight: 600;
  font-size: .93rem;
  color: var(--tinta);
}
.ck-campo .opcional { font-weight: 400; color: var(--tinta-suave); }

.ck-campo input,
.ck-campo textarea,
.ck-campo select {
  width: 100%;
  padding: 13px 15px;
  border: 1px solid #8a9bb5;  /* 3:1 sobre blanco (WCAG 1.4.11) */
  border-radius: var(--radio-s);
  background: #fff;
  color: var(--tinta);
  font-family: inherit;
  font-size: 1rem;
  transition: border-color var(--pausa), box-shadow var(--pausa);
}
.ck-campo textarea { resize: vertical; min-height: 140px; }
.ck-campo input:focus,
.ck-campo textarea:focus,
.ck-campo select:focus {
  border-color: var(--marca);
  box-shadow: 0 0 0 3px rgba(var(--marca-rgb), .16);
}
.ck-campo input:focus-visible,
.ck-campo textarea:focus-visible,
.ck-campo select:focus-visible { outline: 3px solid var(--marca); outline-offset: 2px; }
.ck-campo__error {
  display: block;
  margin-top: 6px;
  font-size: .88rem;
  color: #b32020;
}

.ck-casilla {
  display: flex;
  align-items: flex-start;
  gap: 11px;
  margin: 4px 0 16px;
  font-size: .96rem;
  cursor: pointer;
}
.ck-casilla input { margin-top: 4px; width: 18px; height: 18px; flex: none; accent-color: var(--marca); }

.ck-aviso-datos {
  margin: 0 0 22px;
  padding: 18px 20px;
  background: var(--papel-alt);
  border: 1px solid var(--linea);
  border-radius: var(--radio-s);
  font-size: .89rem;
}
.ck-aviso-datos h3 { font-size: .96rem; margin-bottom: .6em; }
.ck-aviso-datos dl { margin: 0; }
.ck-aviso-datos dt { font-weight: 600; color: var(--tinta); margin-top: .6em; }
.ck-aviso-datos dd { margin: 0; }
.ck-aviso-datos a { text-decoration: underline; }

.ck-mensaje {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 18px 20px;
  border-radius: var(--radio-s);
  border: 1px solid;
}
.ck-mensaje p { margin: 0; }
.ck-mensaje--ok { background: #eefaf1; border-color: #b9e5c6; color: #1c6b36; }
.ck-mensaje--err { background: #fdeeee; border-color: #f3c4c4; color: #9d2222; }

/* Honeypot: fuera de la vista, nunca display:none (algunos bots lo detectan). */
.ck-honeypot {
  position: absolute !important;
  left: -9999px;
  opacity: 0;
  height: 0;
  overflow: hidden;
}

/* ---- 11. Pie ------------------------------------------------------------ */

.ck-pie {
  position: relative;
  overflow: hidden;
  background: var(--noche);
  color: #fff;
  font-size: .96rem;
}
/* Nubes de Vanta (assets/js/fondos.js) a sangre detrás del pie, en los
   azules de la casa para que el texto claro se siga leyendo. Sin WebGL o con
   «menos movimiento», el pie se queda en su azul noche. */
.ck-pie__nubes { position: absolute; inset: 0; z-index: 0; }
.ck-pie__nubes canvas { display: block; }
.ck-pie > :not(.ck-pie__nubes) { position: relative; z-index: 1; }
.ck-pie__top { padding: clamp(46px, 5vw, 72px) 0 40px; }
.ck-pie__cols {
  display: grid;
  grid-template-columns: 1.4fr 1fr 1fr 1.2fr;
  gap: 34px;
}
@media (max-width: 900px) { .ck-pie__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .ck-pie__cols { grid-template-columns: minmax(0, 1fr); } }

.ck-pie .ck-marca { color: #fff; }
.ck-pie .ck-marca:hover { color: #fff; }
.ck-pie__lema { margin: 18px 0 20px; max-width: 30rem; }

.ck-pie h3 {
  font-size: 1rem;
  color: #fff;
  margin-bottom: 18px;
  letter-spacing: .01em;
}
.ck-pie__lista { list-style: none; margin: 0; padding: 0; }
.ck-pie__lista li { margin-bottom: 10px; }
.ck-pie__lista a { color: #fff; }
.ck-pie__lista a:hover { color: #fff; text-decoration: underline; }
.ck-pie__lista .ck-menu__punto { display: inline-block; margin-right: 8px; vertical-align: middle; }

.ck-pie__contacto { list-style: none; margin: 0 0 22px; padding: 0; }
.ck-pie__contacto li { display: flex; gap: 10px; margin-bottom: 12px; }
.ck-pie__contacto .ic { flex: none; margin-top: 3px; color: #fff; }
.ck-pie__contacto a { color: #fff; }
.ck-pie__contacto a:hover { color: #fff; text-decoration: underline; }

/* Cobertura: selectores de provincia y municipio (app.js navega al elegir). */
.ck-pie__geo { border-top: 1px solid rgba(255, 255, 255, .1); padding: 22px 0 24px; }
.ck-pie__geo-titulo {
  display: flex; align-items: center; gap: 8px;
  margin: 0 0 14px;
  color: #fff; font-weight: 600; font-size: .92rem;
}
.ck-pie__selectores {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px 22px;
  max-width: 760px;
}
@media (max-width: 560px) { .ck-pie__selectores { grid-template-columns: minmax(0, 1fr); } }
.ck-pie__selector { display: grid; gap: 6px; font-size: .86rem; color: #fff; }
.ck-pie__selector select {
  width: 100%;
  appearance: none;
  padding: 11px 40px 11px 14px;
  border: 1px solid rgba(255, 255, 255, .28);
  border-radius: 10px;
  background: rgba(8, 20, 45, .55) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23fff' stroke-width='1.8' stroke-linecap='round'/%3E%3C/svg%3E") no-repeat right 14px center;
  color: #fff;
  font: inherit; font-size: 1rem;
  cursor: pointer;
}
.ck-pie__selector select:hover { border-color: rgba(255, 255, 255, .55); }
.ck-pie__selector select:focus-visible { outline: 2px solid #fff; outline-offset: 2px; }
.ck-pie__selector select:disabled { opacity: .6; cursor: not-allowed; }
.ck-pie__selector option { color: #0b1a33; background: #fff; }

/* Sección propia de provincia y municipio (bloque `geo`). */
.ck-geo__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(28px, 5vw, 64px); }
.ck-geo__col h3 { margin: 10px 0 12px; }
.ck-geo__col p { color: var(--tinta-suave); margin: 0; }
@media (max-width: 760px) { .ck-geo__cols { grid-template-columns: minmax(0, 1fr); } }

.ck-pie__bottom {
  border-top: 1px solid rgba(255, 255, 255, .1);
  padding: 20px 0;
}
.ck-pie__bottom .ck-wrap {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 14px;
}
.ck-pie__bottom p { margin: 0; font-size: .9rem; }
.ck-pie__legal {
  display: flex;
  flex-wrap: wrap;
  gap: 18px;
  list-style: none;
  margin: 0; padding: 0;
  font-size: .9rem;
}
.ck-pie__legal li { margin: 0; }
.ck-pie__legal a { color: #fff; }
.ck-pie__legal a:hover { color: #fff; text-decoration: underline; }

/* La franja del catálogo cierra el pie por abajo. */
.ck-pie > .ck-franja { height: 5px; }

/* Burbuja de WhatsApp. Un enlace a wa.me y nada más: ni widget de Meta, ni
   guion de terceros, ni una petición a otro dominio mientras no se pulsa.

   El verde es el de WhatsApp, y es la única excepción a la regla del color del
   sitio: aquí el color es lo que hace que se reconozca sin leer. En pantalla
   ancha la burbuja enseña además la palabra; en móvil se queda en el círculo,
   que es donde el pulgar llega. */
.ck-wasap {
  position: fixed;
  right: 20px; bottom: 20px;
  z-index: 1500;
  display: inline-flex;
  align-items: center;
  gap: 10px;
  height: 58px;
  padding: 0 7px;
  border-radius: var(--radio-p);
  background: #25d366;
  color: #fff;
  box-shadow: 0 6px 16px rgba(11, 27, 58, .18), 0 18px 40px -16px rgba(18, 140, 70, .55);
  transition: background-color var(--pausa), transform var(--pausa),
              opacity var(--pausa), visibility var(--pausa);
}
.ck-wasap:hover { background: #1db457; color: #fff; }
.ck-wasap__icono {
  display: grid;
  place-items: center;
  width: 44px; height: 44px;
  flex: none;
}
.ck-wasap__texto {
  padding-right: 12px;
  font-family: 'Onest', system-ui, sans-serif;
  font-weight: 600;
  font-size: .95rem;
  white-space: nowrap;
}
@media (max-width: 720px) {
  .ck-wasap { right: 14px; bottom: 14px; padding: 0; }
  .ck-wasap__texto { display: none; }
  .ck-wasap__icono { width: 54px; height: 54px; }
}

/* Mientras el aviso de cookies está abierto, la burbuja se aparta: el aviso
   ocupa todo el ancho por abajo y es lo único que puede taparla. Cuando se
   cierra —que pasa sin recargar la página— vuelve sola. Un navegador sin
   `:has()` se limita a dejarla debajo del aviso, que es donde ya estaba por
   z-index: no se rompe nada. */
body:has(.cc-banner:not([hidden])) .ck-wasap,
/* Ni encima del menú móvil, que es modal: tapaba su esquina de abajo. */
body:has(.ck-menu.esta-abierto) .ck-wasap {
  opacity: 0;
  visibility: hidden;
  transform: translateY(12px);
}

/* ---- 12. Movimiento y accesibilidad ------------------------------------- */

/* Entrada al hacer scroll. La clase va en el marcado y la anima
   assets/js/app.js. El estado oculto solo se aplica con JavaScript activo
   (`scripting: enabled`; para navegadores viejos, el <noscript> del layout):
   sin él —o con menos movimiento pedido— el contenido se ve desde el
   principio. */
@media (scripting: enabled) {
  .js-entra { opacity: 0; transform: translateY(14px); }
}
.js-entra.ha-entrado {
  opacity: 1;
  transform: none;
  transition: opacity 520ms ease, transform 520ms cubic-bezier(.2, .7, .3, 1),
              border-color var(--pausa), box-shadow var(--pausa), background-color var(--pausa);
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
  .js-entra { opacity: 1; transform: none; }
  .ck-app:hover { transform: none; }
}

@media print {
  .ck-cabecera, .ck-pegajosa, .ck-menu, .ck-pie, .cc, .ck-wasap { display: none !important; }
  body { color: #000; font-size: 12pt; }
}

/* ---- 13. Remates ---------------------------------------------------------
   Piezas pequeñas que solo aparecen en un sitio y no merecen sección propia.
   -------------------------------------------------------------------------- */

/* La línea que recuerda que las aplicaciones son independientes. Va bajo la
   rejilla del catálogo y bajo el hub: es el mensaje que más se malinterpreta
   de una marca paraguas, así que se dice donde se ven las aplicaciones. */
.ck-nota-rejilla {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  max-width: 46rem;
  margin: 34px auto 0;
  padding: 14px 20px;
  border: 1px dashed var(--linea-fuerte);
  border-radius: var(--radio-p);
  background: #fff;
  text-align: center;
  font-size: .96rem;
}
.ck-nota-rejilla .ic { flex: none; color: var(--marca); }

/* La banda de la web propia, justo bajo el héroe de una ficha. */
.ck-web-propia-caja { margin: -26px auto 0; position: relative; z-index: 5; }
@media (max-width: 700px) { .ck-web-propia-caja { margin-top: -18px; } }
.ck-web-propia { box-shadow: var(--sombra-2); }
.ck-web-propia .ck-baldosa { flex: none; }

.ck-btns--centro { justify-content: center; }
.ck-centrado { text-align: center; }
.ck-faq__cta { margin-top: 26px; }
.ck-acordeon__h { margin: 0; font-size: inherit; }

/* ---- Guías (fase 10 del brief, 14/10/2026) ------------------------------- */
.ck-guia__titulo { font-size: 1.15rem; margin-bottom: .3em; }
.ck-guia__resumen {
  padding: 18px 22px; margin-bottom: 1.6em;
  border-left: 4px solid var(--marca); border-radius: var(--radio-s);
  background: var(--marca-agua); color: var(--tinta);
}
.ck-guia__indice {
  padding: 16px 22px; margin-bottom: 2em;
  border: 1px solid var(--linea); border-radius: var(--radio-s);
}
.ck-guia__indice p { margin: 0 0 .4em; }
.ck-guia__indice ol { margin: 0; }
.ck-guia h2 { scroll-margin-top: 96px; }

/* El <main> recibe el foco del enlace «Saltar al contenido»: sin anillo. */
main:focus { outline: none; }
.ck-destacados--tras { margin-top: 28px; }