IMPLEMENTACION DE LOS VIDEOS EN EL CATALOGO PUBLICO

frontend/estilos.css

@@ -539,6 +539,64 @@ section {
   box-shadow: var(--shadow-sm);
 }
 
+/* ════════════════════════════════
+   REDES SOCIALES
+════════════════════════════════ */
+.redes-section {
+  padding: 20px 20px 10px;
+  max-width: 1200px;
+  margin: 0 auto;
+}
+
+.redes-grid {
+  display: flex;
+  gap: 24px;
+  overflow-x: auto;
+  scroll-snap-type: x mandatory;
+  -webkit-overflow-scrolling: touch;
+  padding-bottom: 12px;
+  scrollbar-width: thin;
+  scrollbar-color: #d4d0e0 transparent;
+}
+
+.redes-grid::-webkit-scrollbar {
+  height: 6px;
+}
+
+.redes-grid::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.redes-grid::-webkit-scrollbar-thumb {
+  background: #d4d0e0;
+  border-radius: 99px;
+}
+
+.redes-grid .video-card {
+  flex: 0 0 auto;
+  width: 360px;
+  max-width: 85vw;
+  scroll-snap-align: start;
+  border-radius: 12px;
+  overflow: hidden;
+  background: #000;
+  box-shadow: 0 4px 20px rgba(0,0,0,0.12);
+}
+
+.redes-grid .video-card video {
+  width: 100%;
+  display: block;
+  max-height: 600px;
+  object-fit: contain;
+  background: #000;
+}
+
+.redes-grid .red-embed .instagram-media {
+  min-width: 326px !important;
+  max-width: 100% !important;
+  width: 100% !important;
+}
+
 /* ════════════════════════════════
    CONTADOR + PRODUCTOS
 ════════════════════════════════ */