/* ==========================================================================
   Cabecera — plantilla 1610
   --------------------------------------------------------------------------
   Logo a la izquierda (20 %), menú a la derecha y los cuatro iconos
   sociales. Es «sticky» de JetBlocks: al bajar se pega arriba, fondo blanco y
   sin relleno vertical. La sombra la lleva siempre, y el margen negativo de
   -12px hace que la banda azul se meta debajo de ella.
   ========================================================================== */
.cid-cabecera {
  position: sticky;
  top: 0;
  z-index: 50;
  padding: 10px 0;
  margin-bottom: 2px;   /* el original declara -12px, pero lo que pinta son 2px */
  background: var(--blanco);
  box-shadow: 0 5px 10px 0 rgba(0, 0, 0, .24);
}

.cid-cabecera.es-pegada { padding: 0; }

.cid-cabecera-cuerpo {
  display: flex;
  align-items: center;
  max-width: var(--ancho);
  margin: 0 auto;
  min-height: 70px;
}

.cid-logo {
  flex: 0 0 20%;
  align-self: flex-start;
  padding: 10px 5px 5px 15px;
}

.cid-logo img { width: 219px; max-width: 90%; }

/* En el original la columna derecha (80 %) se reparte entre menú (83,884 %)
   y redes (15 %). Con Blog, Videos y los iconos de la barra greb y la cuenta,
   que el original no tiene, el menú toma lo que sobra. */
.cid-nav { flex: 1 1 auto; margin-left: 10px; }

.cid-nav ul { display: flex; justify-content: flex-end; flex-wrap: wrap; }

.cid-nav a {
  display: block;
  padding: 8px 15px;
  color: var(--azul);
  font-family: var(--titular);
  font-size: 16px;
  font-weight: 600;
  line-height: 14px;
  letter-spacing: 1px;
}

.cid-nav a span { display: inline-block; line-height: 14px; }

.cid-nav a:hover,
.cid-nav a.es-actual { color: var(--rojo); }

.cid-nav-abrir,
.cid-nav-cerrar { display: none; background: none; border: 0; padding: 0; }

/* Iconos sociales: 15px, separados 11px, efecto «float» al pasar. */
.cid-redes { display: flex; align-items: center; }

.cid-redes.es-cabecera {
  flex: 0 0 auto;
  justify-content: center;
  padding: 0 18px 0 22px;
  gap: 11px;
}

.cid-red { color: var(--azul); transition: transform .3s; }

.cid-red svg { width: 15px; height: 15px; }

.cid-redes.es-cabecera .cid-red:hover { transform: translateY(-8px); }