/* ─────────────────────────────────────────────────────────────
   Íconos de redes sociales — fila de footer + sección "Sígueme".
   Rutas SVG de Simple Icons (viewBox 0 0 24 24, fill=currentColor),
   verificadas visualmente antes de propagarse al sitio.

   Usa los tokens reales del sitio (--canvas/--primary/--font-mono,
   definidos por página en su <style> inline) — no el teal/DM Sans
   del welcome pack del curso. Con fallback por si algún día una
   página nueva carga este archivo sin definir :root primero.
   ───────────────────────────────────────────────────────────── */

/* Fila del footer — convención footer__bottom (BEM), la mayoría de páginas */
.footer__social,
/* Alias para echo.html, que usa footer-bottom (guion) en vez de footer__bottom.
   Mismas reglas; ver nota en CLAUDE.md sobre la inconsistencia. */
.footer-social {
  display: flex;
  justify-content: center;
  gap: var(--sp-sm, 12px);
  margin-top: 40px;
  padding-top: 24px;
  padding-bottom: var(--sp-lg, 24px); /* ~24px hasta la línea de copyright */
  border-top: 1px solid var(--hairline-soft, #2f2e26); /* separador sutil, mismo token que ya usa echo.html en su footer-bottom */
}

@media (max-width: 640px) {
  .footer__social,
  .footer-social {
    margin-top: 32px;
  }
}

/* footer__bottom/footer-bottom ya trae su propio margin-top + border-top +
   padding-top (para el caso en que NO haya fila social antes). Cuando sí la
   hay, la fila social ya puso el separador y el espacio — se anula aquí para
   no duplicar la línea ni sumar espacio de más antes del copyright. */
.footer__social + .footer__bottom,
.footer-social + .footer-bottom {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.footer__social a,
.footer-social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--r-md, 8px);
  color: var(--muted, #807d72);
  transition: color 150ms ease-out, background 150ms ease-out;
}

.footer__social a:hover,
.footer__social a:focus-visible,
.footer-social a:hover,
.footer-social a:focus-visible {
  color: var(--primary, #f54e00);
  background: var(--canvas-card, #2f2e26);
}

.footer__social svg,
.footer-social svg {
  width: 20px;
  height: 20px;
  fill: currentColor;
  display: block;
}

/* Dropdown de redes en el header — inyectado por assets/social.js justo
   antes del CTA principal en .nav__right. .nav__drawer-social (la fila
   del menú móvil) reusa las reglas de .footer__social de arriba. */
.social-dropdown {
  position: relative;
  display: flex;
  align-items: center;
}

.social-dropdown__trigger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-md, 8px);
  border: 1px solid var(--hairline-strong, #4a4840);
  background: transparent;
  color: var(--muted, #807d72);
  cursor: pointer;
  transition: color 150ms ease-out, border-color 150ms ease-out, background 150ms ease-out;
}

.social-dropdown__trigger:hover {
  color: var(--ink, #f7f7f4);
  border-color: var(--muted, #807d72);
}

.social-dropdown__trigger:focus-visible {
  outline: 2px solid var(--primary, #f54e00);
  outline-offset: 2px;
}

.social-dropdown__panel {
  display: none;
  flex-direction: column;
  gap: 2px;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 190px;
  background: var(--canvas-mid, #26251e);
  border: 1px solid var(--hairline, #3a3830);
  border-radius: var(--r-lg, 12px);
  padding: var(--sp-xs, 8px);
  box-shadow: 0 12px 28px rgba(0, 0, 0, .4);
  z-index: 200;
}

.social-dropdown__panel.open {
  display: flex;
}

.social-dropdown__panel a {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 10px;
  border-radius: var(--r-md, 8px);
  font-family: var(--font-sans, Inter, sans-serif);
  font-size: 14px;
  color: var(--body, #b8b5ae);
  transition: background 120ms ease-out, color 120ms ease-out;
}

.social-dropdown__panel a svg {
  width: 18px;
  height: 18px;
  fill: currentColor;
  flex-shrink: 0;
}

.social-dropdown__panel a:hover {
  background: var(--canvas-card, #2f2e26);
  color: var(--primary, #f54e00);
}

.social-dropdown__panel a:focus-visible {
  outline: 2px solid var(--primary, #f54e00);
  outline-offset: -2px;
  background: var(--canvas-card, #2f2e26);
  color: var(--primary, #f54e00);
}

/* El dropdown de escritorio no aplica en el drawer móvil (ver nota arriba). */
@media (max-width: 768px) {
  .social-dropdown { display: none; }
}

/* index.html y faq.html no le ponían límite de alto ni overflow-y al drawer
   (a diferencia de las otras 7 páginas, que sí lo tienen). Con la fila de
   redes agregada al final, en pantallas bajas el contenido puede exceder el
   viewport y quedar inalcanzable — este límite + scroll interno se agrega
   acá para las 9 por igual, sin duplicar la regla base .nav__drawer de cada
   página (solo agrega max-height/overflow-y, que ninguna definía por sí sola
   salvo las 7 que ya lo traían, donde este bloque es redundante e inofensivo). */
.nav__drawer {
  max-height: calc(100vh - var(--nav-h, 64px));
  overflow-y: auto;
}

/* Sección "Sígueme en redes" — solo index.html, antes del footer */
.social-section {
  padding: var(--sp-sec, 80px) 0;
  border-top: 1px solid var(--hairline, #3a3830);
}

.social-section__head {
  text-align: center;
  margin-bottom: var(--sp-xxl, 48px);
}

.social-grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--sp-base, 16px);
  max-width: 1000px;
  margin: 0 auto;
}

/* .social-card se combina con .card (background/border/radius/padding
   ya definidos por cada página) — solo agrega el layout y el hover. */
.social-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--sp-sm, 12px);
  text-align: center;
  transition: border-color 150ms ease-out, transform 150ms ease-out;
}

.social-card:hover,
.social-card:focus-visible {
  border-color: var(--primary, #f54e00);
  transform: translateY(-2px);
}

.social-card__icon {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-md, 8px);
  background: rgba(245, 78, 0, .1);
  color: var(--primary, #f54e00);
  flex-shrink: 0;
}

.social-card__icon svg {
  width: 22px;
  height: 22px;
  fill: currentColor;
}

.social-card__name {
  font-size: 14px;
  font-weight: 600;
  color: var(--ink, #f7f7f4);
}

.social-card__handle {
  font-family: var(--font-mono, monospace);
  font-size: 12px;
  color: var(--muted, #807d72);
}

@media (max-width: 900px) {
  .social-grid { grid-template-columns: repeat(3, 1fr); }
}
@media (max-width: 560px) {
  .social-grid { grid-template-columns: repeat(2, 1fr); }
}

/* Drawer móvil (cargado por las 9 páginas con menú): con muchos ítems, scroll interno
   para que "Solicitar demo" siempre quede alcanzable en pantallas bajas. */
.nav__drawer {
  max-height: calc(100dvh - var(--nav-h));
  overflow-y: auto;
}