/* ── DEMO ONLY (quitar al integrar) ── */ *, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Inter', sans-serif; background: #f7f7f5; color: #1a1a2e; padding: 3rem 1rem; } /* ════════════════════════════════════════ VIDEO REVIEWS — CSS Pega esto en tu StyleS.css o ════════════════════════════════════════ */ .reviews-video { padding: 5rem 1.5rem 4rem; } .reviews-video .rv-header { text-align: center; margin-bottom: 2.75rem; } .reviews-video .rv-header h2 { font-family: 'Playfair Display', serif; font-size: clamp(1.6rem, 3vw, 2.2rem); font-weight: 700; color: #1a1a2e; margin-bottom: 0.5rem; } .reviews-video .rv-header p { font-size: 0.95rem; color: #666; max-width: 480px; margin: 0 auto; line-height: 1.6; } /* Grid de tarjetas */ .rv-grid { display: flex; justify-content: center; gap: 1.5rem; flex-wrap: wrap; max-width: 900px; margin: 0 auto; } /* Cada tarjeta */ .rv-card { background: #fff; border-radius: 18px; border: 1px solid #ebebeb; width: 240px; overflow: hidden; transition: transform 0.22s ease, box-shadow 0.22s ease; flex-shrink: 0; } .rv-card:hover { transform: translateY(-4px); box-shadow: 0 12px 36px rgba(0,0,0,0.09); } /* Contenedor del video — proporción 9:16 */ .rv-video-wrap { position: relative; width: 100%; aspect-ratio: 9 / 16; background: #0f0f0f; cursor: pointer; overflow: hidden; } /* Miniatura (poster) */ .rv-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.3s ease; } /* Overlay degradado suave sobre el poster */ .rv-overlay { position: absolute; inset: 0; background: linear-gradient(to top, rgba(0,0,0,0.45) 0%, transparent 55%); transition: opacity 0.3s ease; } /* Botón play */ .rv-play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); width: 54px; height: 54px; background: rgba(255,255,255,0.92); border-radius: 50%; display: flex; align-items: center; justify-content: center; transition: transform 0.2s ease, background 0.2s ease; pointer-events: none; } .rv-video-wrap:hover .rv-play-btn { transform: translate(-50%, -50%) scale(1.1); background: #fff; } .rv-play-btn svg { width: 20px; height: 20px; fill: #1a1a2e; margin-left: 3px; /* centrado visual del triángulo */ } /* Duración badge */ .rv-duration { position: absolute; bottom: 10px; right: 10px; background: rgba(0,0,0,0.6); color: #fff; font-size: 0.7rem; font-weight: 500; padding: 2px 7px; border-radius: 4px; letter-spacing: 0.03em; pointer-events: none; } /* El video real — oculto hasta hacer clic */ .rv-video-wrap video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; background: #000; } /* Estado: reproduciendo */ .rv-video-wrap.is-playing .rv-poster, .rv-video-wrap.is-playing .rv-overlay, .rv-video-wrap.is-playing .rv-play-btn, .rv-video-wrap.is-playing .rv-duration { opacity: 0; pointer-events: none; } .rv-video-wrap.is-playing video { display: block; } /* Info debajo del video */ .rv-info { padding: 1rem 1rem 1.1rem; } .rv-avatar-row { display: flex; align-items: center; gap: 0.6rem; margin-bottom: 0.55rem; } .rv-avatar { width: 34px; height: 34px; border-radius: 50%; background: #e8e4f9; display: flex; align-items: center; justify-content: center; font-size: 0.8rem; font-weight: 600; color: #534AB7; flex-shrink: 0; text-transform: uppercase; } .rv-name { font-size: 0.88rem; font-weight: 600; color: #1a1a2e; line-height: 1.2; } .rv-role { font-size: 0.75rem; color: #999; margin-top: 1px; } .rv-stars { display: flex; gap: 2px; margin-bottom: 0.45rem; } .rv-stars svg { width: 13px; height: 13px; fill: #f5a623; } .rv-text { font-size: 0.8rem; color: #555; line-height: 1.55; } /* Responsive: en móvil las tarjetas ocupan más ancho */ @media (max-width: 600px) { .rv-card { width: calc(50% - 0.75rem); min-width: 150px; } .rv-card:last-child:nth-child(odd) { width: 100%; max-width: 240px; margin: 0 auto; } } @media (max-width: 380px) { .rv-card { width: 100%; max-width: 260px; margin: 0 auto; } }