/* Zalkess · iconos de redes sociales (5-nov-2026). Hoja compartida por la web, la pantalla de acceso, el registro y el pie del panel.
   Los enlaces salen de marketing/redes.json (fuente única). Iconos SVG propios en línea, sin librerías y sin estilos en línea (style-src 'self'). */

.redes-sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

.redes { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem; margin: 0; padding: 0; list-style: none; }
.redes li { display: flex; }

/* Objetivo táctil mínimo de 44 px; el dibujo es más chico. */
.red {
  display: inline-flex; align-items: center; justify-content: center; gap: .6rem;
  min-width: 44px; min-height: 44px; border-radius: 12px;
  color: #5e4b40; text-decoration: none; transition: color .15s, background-color .15s, border-color .15s;
}
.red-ico { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.red:hover { color: #9a3412; background: rgb(194 65 12 / .1); }
.red:focus-visible { outline: 3px solid #c2410c; outline-offset: 2px; }

/* Sobre fondo oscuro (pie y bloque de contacto de la web). */
.redes--oscuro .red { color: #ead9c9; }
.redes--oscuro .red:hover { color: #fff; background: rgb(255 255 255 / .12); }
.redes--oscuro .red:focus-visible { outline-color: #ffd9a8; }

/* Iconos chicos para cabeceras y pies del panel. */
.redes--pequena .red-ico { width: 20px; height: 20px; }

/* Con marco redondo (pies, contacto, acceso). */
.redes--marcos { gap: .5rem; }
.redes--marcos .red { border: 1px solid #d8c3b0; border-radius: 50%; }
.redes--marcos .red:hover { border-color: #c2410c; }
.redes--oscuro.redes--marcos .red { border-color: rgb(255 255 255 / .3); }
.redes--oscuro.redes--marcos .red:hover { border-color: #ffd9a8; }
.redes--centro { justify-content: center; }

/* Bloque «Síguenos» del contacto. */
.siguenos { position: relative; z-index: 2; display: grid; justify-items: center; gap: .25rem; margin-top: .5rem; padding: .5rem 1.25rem .75rem; border-radius: 24px; background: rgb(29 22 18 / .78); box-shadow: inset 0 0 0 1px rgb(247 227 207 / .25); }
.siguenos-titulo { margin: 0; font-size: 1rem; font-weight: 700; color: #ead9c9; }

/* Cabecera de la web: tres iconos a la vista cuando hay sitio (1280 px o más); en pantallas más chicas y en móvil pasan al menú desplegable. */
.redes--cabecera { display: none; flex: none; gap: 0; }
@media (min-width: 1280px) { .redes--cabecera { display: flex; } }
.redes-menu { flex: none; }
@media (min-width: 1280px) { .redes-menu { display: none; } }
/* Entre 1280 y 1365 px la cabecera se aprieta un poco para que los iconos no la partan en dos filas. */
@media (min-width: 1280px) and (max-width: 1365px) {
  .nav-corp { gap: .5rem; }
  .nav-corp-link { padding-inline: .35rem; }
}
@media (max-width: 959px) { .redes-menu { order: 4; } }
.redes-menu-boton {
  display: grid; place-items: center; width: 44px; height: 44px; list-style: none; cursor: pointer;
  border: 1px solid #d8c3b0; border-radius: 12px; background: #fff; color: #2a211c;
}
.redes-menu-boton::-webkit-details-marker { display: none; }
.redes-menu-boton:focus-visible { outline: 3px solid #c2410c; outline-offset: 2px; }
.redes-menu[open] .redes-menu-boton { background: #2a211c; border-color: #2a211c; color: #fff; }
.redes-menu .redes--lista {
  position: absolute; right: .75rem; top: calc(100% + .4rem); z-index: 60; display: grid; gap: 0; min-width: 14rem; padding: .5rem;
  background: #fff; border: 1px solid #eadccd; border-radius: 16px; box-shadow: 0 18px 40px rgb(42 33 28 / .18);
}
.redes-menu .redes--lista .red { justify-content: flex-start; width: 100%; padding: 0 .8rem; border-radius: 10px; color: #2a211c; font-weight: 700; }
.redes-menu .redes--lista .red:hover { background: #fff8f1; }

/* Pie sencillo con enlaces legales e iconos (registro y panel). */
.pie-redes { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.25rem; margin-top: 1rem; font-size: .9375rem; }
.pie-redes a:not(.red) { display: inline-flex; align-items: center; min-height: 44px; color: #5e4b40; text-underline-offset: 3px; }
.pie-redes a:not(.red):hover { color: #9a3412; }

/* Pie de las páginas legales (usa el pie oscuro de web.css). */
.pie--legal { grid-template-columns: 1fr; justify-items: center; }
.pie-linea { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: .25rem 1.5rem; }
.pie-linea .pie-enlaces { margin: 0; }
.pie:not(.pie--legal) .pie-linea { justify-content: flex-start; }

/* Pie del panel: la línea de soporte y, a su lado, la fila de iconos. */
.pie-soporte { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem 1.25rem; }

/* Pantalla de acceso: fila pequeña bajo los enlaces. */
.acceso-redes { display: flex; flex-wrap: wrap; align-items: center; gap: .25rem .75rem; margin-top: .5rem; }
.acceso-redes-texto { margin: 0; font-size: .9375rem; font-weight: 650; color: #5e4b40; }

/* Invitación al terminar el alta. */
.alta-redes { display: grid; gap: .5rem; justify-items: start; padding: 1rem 1.125rem; background: #fff1e3; border: 1px solid #eadccd; border-left: 4px solid #f5a524; border-radius: 12px; }
.alta-redes[hidden] { display: none; }
.alta-redes-texto { margin: 0; color: #2a211c; font-weight: 600; line-height: 1.5; }

@media (prefers-reduced-motion: reduce) {
  .red { transition: none; }
}
@media (forced-colors: active) {
  .redes--marcos .red { border-color: CanvasText; }
}