/* CEFEIN · REDES SOCIALES RESPONSIVE · IMPLEMENTACIÓN ÚNICA */
.cefein-header-social,
.cefein-mobile-social,
.cefein-footer-social,
.cefein-social-popover {
  --social-size: 2.4rem;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  min-width: 0;
}

.cefein-social-link {
  display: inline-grid;
  place-items: center;
  flex: 0 0 auto;
  inline-size: var(--social-size);
  block-size: var(--social-size);
  min-inline-size: var(--social-size);
  min-block-size: var(--social-size);
  padding: 0;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: .78rem;
  background: rgba(255,255,255,.045);
  color: #f8fafc;
  text-decoration: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.1), 0 12px 26px -20px rgba(0,0,0,.75);
  transition: transform 180ms ease, background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

.cefein-social-link svg {
  inline-size: 48%;
  block-size: 48%;
  fill: currentColor;
  display: block;
  pointer-events: none;
}

.cefein-social-link:hover,
.cefein-social-link:focus-visible {
  transform: translateY(-.1rem);
  border-color: rgba(197,168,90,.62);
  background: rgba(255,255,255,.085);
  outline: none;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.16), 0 18px 30px -20px rgba(0,0,0,.82);
}

.cefein-social-link--facebook { color: #3b82f6; }
.cefein-social-link--instagram { color: #f04f88; }
.cefein-social-link--tiktok { color: #f8fafc; }
.cefein-social-link--youtube { color: #ff453a; }
.cefein-social-link--whatsapp { color: #25d366; }

/* Cabecera: no depende de las clases hidden/xl:flex de Tailwind. */
#site-header .cefein-header-social { display: none; }
#site-header .cefein-social-menu { display: none; position: relative; flex: 0 0 auto; }

#site-header .cefein-social-menu > summary {
  display: inline-grid;
  place-items: center;
  inline-size: 2.35rem;
  block-size: 2.35rem;
  padding: 0;
  cursor: pointer;
  border: 1px solid rgba(255,255,255,.16);
  border-radius: .75rem;
  background: rgba(255,255,255,.045);
  color: #d9c487;
  list-style: none;
}
#site-header .cefein-social-menu > summary::-webkit-details-marker { display: none; }
#site-header .cefein-social-menu > summary svg { width: 48%; height: 48%; fill: currentColor; }

#site-header .cefein-social-popover {
  --social-size: 2.35rem;
  position: absolute;
  z-index: 10030;
  inset-block-start: calc(100% + .65rem);
  inset-inline-end: 0;
  width: max-content;
  max-width: min(19rem, calc(100vw - 1.5rem));
  padding: .75rem;
  border: 1px solid rgba(197,168,90,.3);
  border-radius: 1rem;
  background: rgba(2,12,27,.97);
  box-shadow: 0 24px 58px -28px rgba(0,0,0,.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
}

#site-header .cefein-social-language-divider {
  width: 1px;
  align-self: stretch;
  margin-inline: .15rem;
  background: rgba(255,255,255,.12);
}

/* Tablet y escritorio estrecho: botón compacto que abre todas las redes. */
@media (min-width: 768px) and (max-width: 1179.98px) {
  #site-header .cefein-social-menu { display: block; }
}

/* Desde 1180 px hay espacio útil: redes visibles directamente. */
@media (min-width: 1180px) {
  #site-header .cefein-header-social {
    --social-size: 1.8rem;
    display: flex;
    flex-wrap: nowrap;
    gap: .22rem;
  }
  #site-header .cefein-social-menu { display: none; }
}

@media (min-width: 1500px) {
  #site-header .cefein-header-social {
    --social-size: 2.18rem;
    gap: .42rem;
  }
}

/* Si la medición real detecta falta de espacio, se usa el menú compacto, nunca se oculta todo el header. */
@media (min-width: 768px) {
  #site-header.header-social-collapsed .cefein-header-social { display: none; }
  #site-header.header-social-collapsed .cefein-social-menu { display: block; }
}

/* Menú móvil: redes visibles dentro del desplegable. */
.cefein-mobile-social {
  --social-size: 2.65rem;
  padding: .65rem .25rem .2rem;
}

/* Footer: las redes siempre son visibles y se adaptan en varias líneas. */
#site-footer .cefein-footer-social {
  --social-size: 2.7rem;
  display: flex !important;
  visibility: visible !important;
  opacity: 1 !important;
  flex-wrap: wrap;
  gap: .65rem;
  width: 100%;
  margin-top: .25rem;
}

@media (max-width: 420px) {
  #site-footer .cefein-footer-social { --social-size: 2.45rem; gap: .5rem; }
}

@media (prefers-reduced-motion: reduce) {
  .cefein-social-link { transition: none; }
}