/* ════════════════════════════════════════ VIDEO REVIEWS — CSS (con Slider) Pega esto en tu styles.css o ════════════════════════════════════════ */ * { box-sizing: border-box; margin: 0; padding: 0; } body { font-family: 'Inter', sans-serif; background: #f7f7f5; color: #1a1a2e; padding: 3rem 1rem; } .reviews-video { padding: 5rem 1.5rem 4rem; overflow: hidden; } .rv-header { text-align: center; margin-bottom: 2.75rem; } .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; } .rv-header p { font-size: 0.95rem; color: #666; max-width: 480px; margin: 0 auto; line-height: 1.6; } /* Slider Container */ .rv-slider-container { position: relative; max-width: 1200px; margin: 0 auto; padding: 0 40px; } .rv-slider-wrapper { overflow: hidden; border-radius: 20px; } .rv-slider { display: flex; gap: 1.5rem; transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1); cursor: grab; align-items: stretch; } .rv-slider:active { cursor: grabbing; } /* Cards - Altura automática según contenido */ .rv-card { background: #fff; border-radius: 18px; border: 1px solid #ebebeb; min-width: calc(33.333% - 1rem); overflow: hidden; transition: transform 0.22s ease, box-shadow 0.22s ease; flex-shrink: 0; user-select: none; display: flex; flex-direction: column; } .rv-card:hover { transform: translateY(-4px); box-shadow: 0 12px 36px rgba(0,0,0,0.09); } /* Video Container - 9:16 aspect ratio fijo para la parte visual */ .rv-video-wrap { position: relative; width: 100%; aspect-ratio: 9 / 16; background: #0f0f0f; cursor: pointer; overflow: hidden; flex-shrink: 0; } .rv-poster { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; transition: opacity 0.3s ease; pointer-events: none; } .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; pointer-events: none; } .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; } .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; } .rv-video-wrap video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: none; background: #000; } .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 - Sin límite de altura */ .rv-info { padding: 1rem 1rem 1.25rem; flex: 1; display: flex; flex-direction: column; } .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.55rem; } .rv-stars svg { width: 13px; height: 13px; fill: #f5a623; } /* Texto completo sin truncar */ .rv-text { font-size: 0.8rem; color: #555; line-height: 1.6; margin: 0; } /* Navigation Arrows */ .rv-nav { position: absolute; top: 40%; transform: translateY(-50%); width: 44px; height: 44px; background: #fff; border: 1px solid #ebebeb; border-radius: 50%; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.2s ease; box-shadow: 0 2px 8px rgba(0,0,0,0.1); z-index: 10; } .rv-nav:hover { background: #1a1a2e; border-color: #1a1a2e; } .rv-nav:hover svg { fill: #fff; } .rv-nav svg { width: 20px; height: 20px; fill: #1a1a2e; transition: fill 0.2s ease; } .rv-prev { left: 0; } .rv-next { right: 0; } .rv-nav:disabled { opacity: 0.3; cursor: not-allowed; } /* Dots */ .rv-dots { display: flex; justify-content: center; gap: 8px; margin-top: 2rem; } .rv-dot { width: 8px; height: 8px; border-radius: 50%; background: #ddd; cursor: pointer; transition: all 0.3s ease; border: none; } .rv-dot.active { background: #534AB7; width: 24px; border-radius: 4px; } /* Responsive */ @media (max-width: 992px) { .rv-card { min-width: calc(50% - 0.75rem); } } @media (max-width: 600px) { .rv-slider-container { padding: 0 20px; } .rv-card { min-width: 100%; } .rv-nav { width: 36px; height: 36px; top: 35%; } .rv-nav svg { width: 16px; height: 16px; } }