{"id":285,"date":"2026-10-01T15:47:20","date_gmt":"2026-10-01T13:47:20","guid":{"rendered":"https:\/\/crgames.online\/?page_id=285"},"modified":"2026-10-01T19:22:31","modified_gmt":"2026-10-01T17:22:31","slug":"diseno-2","status":"publish","type":"page","link":"https:\/\/crgames.online\/?page_id=285","title":{"rendered":"video games"},"content":{"rendered":"\n<style>\n    \/* --- CARRUSEL CENTRADO --- *\/\n    .gw-hero-carousel-container {\n      position: relative !important;\n      width: 100vw !important;\n      max-width: 100vw !important;\n      left: 50% !important;\n      right: 50% !important;\n      margin-left: -50.1vw !important;\n      margin-right: -50.1vw !important;\n      margin-top: 0 !important;\n      margin-bottom: 40px !important;\n      overflow: hidden !important;\n      box-sizing: border-box !important;\n      box-shadow: 0 20px 50px rgba(0, 0, 0, 0.8), 0 0 30px rgba(0, 245, 212, 0.15);\n      border-bottom: 2px solid rgba(0, 245, 212, 0.3);\n    }\n\n    .gw-carousel {\n      position: relative;\n      width: 100%;\n      overflow: hidden;\n    }\n\n    .gw-track {\n      display: flex;\n      transition: transform 0.6s cubic-bezier(0.25, 1, 0.5, 1);\n      width: 100%;\n    }\n\n    .gw-slide {\n      min-width: 100%;\n      width: 100%;\n      height: 520px;\n      position: relative;\n      display: flex;\n      align-items: flex-end;\n      flex-shrink: 0;\n    }\n\n    .gw-slide-bg {\n      position: absolute;\n      inset: 0;\n      background-size: cover;\n      background-position: center;\n      transition: transform 8s ease;\n    }\n\n    .gw-slide.active .gw-slide-bg {\n      transform: scale(1.06);\n    }\n\n    .gw-slide-overlay {\n      position: absolute;\n      inset: 0;\n      background: linear-gradient(to top, #1B1D2C 0%, rgba(27, 29, 44, 0.6) 50%, rgba(13, 14, 23, 0.3) 100%),\n                  linear-gradient(to right, rgba(27, 29, 44, 0.9) 0%, rgba(27, 29, 44, 0.4) 50%, transparent 100%);\n    }\n\n    .gw-slide-inner-container {\n      max-width: 1170px;\n      width: 100%;\n      margin: 0 auto;\n      padding: 0 25px 60px 25px;\n      position: relative;\n      z-index: 2;\n    }\n\n    .gw-slide-tag {\n      display: inline-flex;\n      align-items: center;\n      gap: 6px;\n      background: rgba(123, 44, 191, 0.85);\n      border: 1px solid rgba(0, 245, 212, 0.4);\n      color: #fff;\n      padding: 6px 16px;\n      border-radius: 20px;\n      font-size: 0.85rem;\n      font-weight: 700;\n      text-transform: uppercase;\n      letter-spacing: 1px;\n      margin-bottom: 15px;\n      backdrop-filter: blur(8px);\n      box-shadow: 0 4px 15px rgba(123, 44, 191, 0.4);\n    }\n\n    .gw-slide-title {\n      font-size: clamp(2rem, 5vw, 3.5rem);\n      font-weight: 900;\n      margin-bottom: 12px;\n      color: #fff;\n      text-shadow: 0 4px 20px rgba(0,0,0,0.8);\n      line-height: 1.1;\n    }\n\n    .gw-slide-desc {\n      font-size: clamp(0.95rem, 2vw, 1.15rem);\n      color: #ccd6f6;\n      max-width: 650px;\n      margin-bottom: 25px;\n      line-height: 1.6;\n      text-shadow: 0 2px 10px rgba(0,0,0,0.7);\n    }\n\n    .gw-btn {\n      background: linear-gradient(90deg, #7b2cbf, #00f5d4);\n      border: none;\n      color: #fff;\n      padding: 14px 32px;\n      border-radius: 8px;\n      font-weight: 800;\n      cursor: pointer;\n      text-transform: uppercase;\n      font-size: 0.95rem;\n      letter-spacing: 1px;\n      transition: all 0.3s ease;\n      box-shadow: 0 4px 18px rgba(0, 245, 212, 0.35);\n      display: inline-block;\n    }\n\n    .gw-btn:hover {\n      transform: translateY(-3px);\n      box-shadow: 0 8px 25px rgba(0, 245, 212, 0.6);\n      color: #fff;\n    }\n\n    .gw-nav-btn {\n      position: absolute !important;\n      top: 50% !important;\n      transform: translateY(-50%) !important;\n      background: transparent !important;\n      border: none !important;\n      outline: none !important;\n      box-shadow: none !important;\n      color: #ffffff !important;\n      width: 45px !important;\n      height: 70px !important;\n      min-width: 45px !important;\n      padding: 0 !important;\n      border-radius: 0 !important;\n      cursor: pointer !important;\n      z-index: 9999 !important;\n      display: flex !important;\n      align-items: center !important;\n      justify-content: center !important;\n      font-family: Arial, sans-serif !important;\n      font-size: 58px !important;\n      font-weight: 300 !important;\n      line-height: 1 !important;\n      text-align: center !important;\n      transition: color 0.2s ease, transform 0.2s ease;\n      visibility: visible !important;\n      opacity: 1 !important;\n    }\n\n    .gw-nav-btn:hover {\n      background: transparent !important;\n      color: #00f5d4 !important;\n      box-shadow: none !important;\n    }\n\n    .gw-prev { left: 20px !important; }\n    .gw-next { right: 20px !important; }\n\n    .gw-dots {\n      position: absolute;\n      bottom: 25px;\n      left: 50%;\n      transform: translateX(-50%);\n      display: flex;\n      gap: 12px;\n      z-index: 10;\n    }\n\n    .gw-dot {\n      width: 12px;\n      height: 12px;\n      border-radius: 50%;\n      background: rgba(255,255,255,0.3);\n      cursor: pointer;\n      transition: all 0.3s ease;\n    }\n\n    .gw-dot.active {\n      background: #00f5d4;\n      width: 35px;\n      border-radius: 6px;\n      box-shadow: 0 0 10px #00f5d4;\n    }\n\n    @media (max-width: 768px) {\n      .gw-slide { height: 420px; }\n      .gw-slide-inner-container { padding-bottom: 40px; }\n      .gw-prev { left: 8px !important; }\n      .gw-next { right: 8px !important; }\n      .gw-nav-btn {\n        width: 40px !important;\n        height: 60px !important;\n        font-size: 48px !important;\n      }\n    }\n<\/style>\n\n  <!-- CARRUSEL DE ANCHO COMPLETO (ARRIBA DE TODO EL CONTENIDO) -->\n  <div class=\"gw-hero-carousel-container\">\n    <div class=\"gw-carousel\">\n      <div class=\"gw-track\" id=\"gwTrack\">\n        \n        <!-- Slide 1 -->\n        <div class=\"gw-slide active\">\n          <div class=\"gw-slide-bg\" style=\"background-image: url('https:\/\/images.unsplash.com\/photo-1542751371-adc38448a05e?auto=format&amp;fit=crop&amp;w=1920&amp;q=80');\"><\/div>\n          <div class=\"gw-slide-overlay\"><\/div>\n          <div class=\"gw-slide-inner-container\">\n            <span class=\"gw-slide-tag\">\ud83d\udd25 Destacado de la Semana<\/span>\n            <h2 class=\"gw-slide-title\">Cyber Odyssey 2077<\/h2>\n            <p class=\"gw-slide-desc\">Sum\u00e9rgete en una metr\u00f3polis futurista donde la tecnolog\u00eda y la humanidad chocan. Toma decisiones que alterar\u00e1n el destino de la ciudad.<\/p>\n            <button class=\"gw-btn\">Jugar Ahora<\/button>\n          <\/div>\n        <\/div>\n\n        <!-- Slide 2 -->\n        <div class=\"gw-slide\">\n          <div class=\"gw-slide-bg\" style=\"background-image: url('https:\/\/images.unsplash.com\/photo-1511512578047-dfb367046420?auto=format&amp;fit=crop&amp;w=1920&amp;q=80');\"><\/div>\n          <div class=\"gw-slide-overlay\"><\/div>\n          <div class=\"gw-slide-inner-container\">\n            <span class=\"gw-slide-tag\">\u2694\ufe0f RPG de Fantas\u00eda<\/span>\n            <h2 class=\"gw-slide-title\">Reinos de Eldoria<\/h2>\n            <p class=\"gw-slide-desc\">Forja tu leyenda en un mundo de fantas\u00eda \u00e9pica. Magia antigua, dragones y un destino que solo t\u00fa puedes escribir con tu espada.<\/p>\n            <button class=\"gw-btn\">Explorar Mundo<\/button>\n          <\/div>\n        <\/div>\n\n        <!-- Slide 3 -->\n        <div class=\"gw-slide\">\n          <div class=\"gw-slide-bg\" style=\"background-image: url('https:\/\/images.unsplash.com\/photo-1552820728-8b83bb6b773f?auto=format&amp;fit=crop&amp;w=1920&amp;q=80');\"><\/div>\n          <div class=\"gw-slide-overlay\"><\/div>\n          <div class=\"gw-slide-inner-container\">\n            <span class=\"gw-slide-tag\">\ud83c\udfce\ufe0f Competitivo<\/span>\n            <h2 class=\"gw-slide-title\">Velocity Apex<\/h2>\n            <p class=\"gw-slide-desc\">Adrenalina pura a 300 km\/h. Compite en los circuitos m\u00e1s extremos del mundo con los coches m\u00e1s exclusivos y personal\u00edzalos.<\/p>\n            <button class=\"gw-btn\">Arrancar Motor<\/button>\n          <\/div>\n        <\/div>\n\n      <\/div>\n\n      <!-- Controles Carrusel -->\n      <button type=\"button\" class=\"gw-nav-btn gw-prev\" id=\"gwPrev\" aria-label=\"Anterior slide\">\u2039<\/button>\n      <button type=\"button\" class=\"gw-nav-btn gw-next\" id=\"gwNext\" aria-label=\"Siguiente slide\">\u203a<\/button>\n      \n      <div class=\"gw-dots\" id=\"gwDots\">\n        <span class=\"gw-dot active\" data-index=\"0\"><\/span>\n        <span class=\"gw-dot\" data-index=\"1\"><\/span>\n        <span class=\"gw-dot\" data-index=\"2\"><\/span>\n      <\/div>\n    <\/div>\n  <\/div>\n\n<script>\n    (function() {\n      const track = document.getElementById('gwTrack');\n      const slides = document.querySelectorAll('.gw-slide');\n      const prevBtn = document.getElementById('gwPrev');\n      const nextBtn = document.getElementById('gwNext');\n      const dots = document.querySelectorAll('.gw-dot');\n      let currentIndex = 0;\n      const totalSlides = slides.length;\n\n      function updateCarousel() {\n        track.style.transform = `translateX(-${currentIndex * 100}%)`;\n        slides.forEach((slide, i) => {\n          slide.classList.toggle('active', i === currentIndex);\n        });\n        dots.forEach((dot, i) => {\n          dot.classList.toggle('active', i === currentIndex);\n        });\n      }\n\n      function nextSlide() {\n        currentIndex = (currentIndex + 1) % totalSlides;\n        updateCarousel();\n      }\n\n      function prevSlide() {\n        currentIndex = (currentIndex - 1 + totalSlides) % totalSlides;\n        updateCarousel();\n      }\n\n      nextBtn.addEventListener('click', nextSlide);\n      prevBtn.addEventListener('click', prevSlide);\n\n      dots.forEach(dot => {\n        dot.addEventListener('click', () => {\n          currentIndex = parseInt(dot.getAttribute('data-index'));\n          updateCarousel();\n        });\n      });\n\n      \/\/ Autoplay\n      let autoplay = setInterval(nextSlide, 5000);\n      const carouselContainer = document.querySelector('.gw-hero-carousel-container');\n      carouselContainer.addEventListener('mouseenter', () => clearInterval(autoplay));\n      carouselContainer.addEventListener('mouseleave', () => autoplay = setInterval(nextSlide, 5000));\n\n      \/\/ Redimensionado din\u00e1mico en caso de cambio de tama\u00f1o de ventana\n      window.addEventListener('resize', updateCarousel);\n    })();\n  <\/script>\n\n\n\n<!-- CRgames | Juegos destacados + Explora por g\u00e9nero -->\n<section class=\"crg-section-v2\">\n\n<style>\n.crg-section-v2{\n  --bg:#1B1D2C;\n  --card:#1D2133;\n  --card2:#20253A;\n  --border:#294574;\n  --cyan:#00D9FF;\n  --blue:#168DFF;\n  --purple:#9B2CFF;\n  --text:#F7FAFF;\n  --muted:#AEBBD3;\n\n  width:100%;\n  padding:25px 0 32px;\n  background:#1B1D2C;\n  color:var(--text);\n  font-family:Inter,system-ui,-apple-system,\"Segoe UI\",Arial,sans-serif;\n}\n\n.crg-section-v2 *,\n.crg-section-v2 *::before,\n.crg-section-v2 *::after{\n  box-sizing:border-box;\n}\n\n.crg-v2-wrap{\n  width:min(1225px,calc(100% - 34px));\n  margin:auto;\n}\n\n\/* =========================\n   ENCABEZADOS CRGAMES\n========================= *\/\n\n.crg-v2-head{\n  display:flex;\n  justify-content:space-between;\n  align-items:flex-start;\n  margin-bottom:12px;\n}\n\n.crg-v2-title{\n  display:flex;\n  align-items:center;\n  gap:10px;\n}\n\n.crg-v2-title .icon{\n  width:29px;\n  height:29px;\n  flex:none;\n  color:var(--cyan);\n}\n\n.crg-v2-title h2{\n  margin:0;\n  color:#fff;\n  font-size:20px;\n  font-weight:800;\n  line-height:1.05;\n}\n\n.crg-v2-title p{\n  margin:3px 0 0;\n  color:#9EADCA;\n  font-size:10px;\n}\n\n.crg-v2-more{\n  margin-top:3px;\n  color:#B9C8E4;\n  text-decoration:none;\n  font-size:9px;\n  font-weight:700;\n}\n\n.crg-v2-more:hover{\n  color:var(--cyan);\n}\n\n.crg-v2-more span{\n  color:var(--cyan);\n  font-size:14px;\n  margin-left:3px;\n}\n\n\n\/* =====================================================\n   CAJAS DE JUEGOS\n   SE CONSERVA EL DISE\u00d1O ORIGINAL gw-featured-card\n===================================================== *\/\n\n.gw-featured-grid{\n  display:grid;\n  grid-template-columns:repeat(3,1fr);\n  gap:20px;\n}\n\n.gw-featured-card{\n  position:relative;\n  height:320px;\n  border-radius:12px;\n  overflow:hidden;\n  cursor:pointer;\n  border:1px solid rgba(255,255,255,0.08);\n\n  transition:all 0.4s cubic-bezier(0.25,1,0.5,1);\n}\n\n.gw-featured-card:hover{\n  transform:translateY(-8px);\n  border-color:rgba(0,245,212,0.4);\n  box-shadow:0 15px 35px rgba(0,245,212,0.2);\n}\n\n.gw-featured-bg{\n  position:absolute;\n  inset:0;\n\n  background-size:cover;\n  background-position:center;\n\n  transition:transform 0.6s ease;\n}\n\n.gw-featured-card:hover .gw-featured-bg{\n  transform:scale(1.1);\n}\n\n.gw-featured-overlay{\n  position:absolute;\n  inset:0;\n\n  background:\n    linear-gradient(\n      to top,\n      rgba(11,12,21,0.95) 0%,\n      rgba(11,12,21,0.5) 50%,\n      rgba(11,12,21,0.2) 100%\n    );\n\n  transition:all 0.4s ease;\n}\n\n.gw-featured-card:hover .gw-featured-overlay{\n  background:\n    linear-gradient(\n      to top,\n      rgba(11,12,21,0.98) 0%,\n      rgba(123,44,191,0.3) 50%,\n      rgba(11,12,21,0.4) 100%\n    );\n}\n\n\/* NUMERO *\/\n\n.gw-featured-rank{\n  position:absolute;\n\n  top:15px;\n  left:15px;\n\n  width:35px;\n  height:35px;\n\n  background:rgba(0,245,212,0.9);\n  color:#0b0c15;\n\n  border-radius:50%;\n\n  display:flex;\n  align-items:center;\n  justify-content:center;\n\n  font-weight:900;\n  font-size:1rem;\n\n  z-index:2;\n\n  box-shadow:\n    0 4px 12px rgba(0,245,212,0.5);\n}\n\n\/* ETIQUETA *\/\n\n.gw-featured-badge{\n  position:absolute;\n\n  top:15px;\n  right:15px;\n\n  background:\n    linear-gradient(\n      135deg,\n      #ff006e,\n      #7b2cbf\n    );\n\n  color:#fff;\n\n  padding:6px 12px;\n\n  border-radius:20px;\n\n  font-size:0.75rem;\n  font-weight:700;\n\n  text-transform:uppercase;\n\n  z-index:2;\n\n  box-shadow:\n    0 4px 12px rgba(255,0,110,0.4);\n}\n\n\/* CONTENIDO *\/\n\n.gw-featured-content{\n  position:absolute;\n\n  bottom:0;\n  left:0;\n  right:0;\n\n  padding:20px;\n\n  z-index:2;\n\n  transform:translateY(10px);\n\n  transition:transform 0.4s ease;\n}\n\n.gw-featured-card:hover .gw-featured-content{\n  transform:translateY(0);\n}\n\n\/* GENERO *\/\n\n.gw-featured-genre{\n  color:#00f5d4;\n\n  font-size:0.75rem;\n  font-weight:700;\n\n  text-transform:uppercase;\n\n  letter-spacing:1px;\n\n  margin-bottom:8px;\n}\n\n\/* TITULO *\/\n\n.gw-featured-title{\n  font-size:1.3rem;\n  font-weight:800;\n\n  color:#fff;\n\n  margin-bottom:8px;\n\n  line-height:1.2;\n}\n\n\/* METADATOS *\/\n\n.gw-featured-meta{\n  display:flex;\n  align-items:center;\n\n  gap:15px;\n\n  font-size:0.85rem;\n\n  color:#8892b0;\n\n  margin-bottom:12px;\n}\n\n.gw-featured-meta span{\n  display:flex;\n  align-items:center;\n  gap:5px;\n}\n\n\/* DESCRIPCION *\/\n\n.gw-featured-desc{\n  font-size:0.85rem;\n\n  color:#ccd6f6;\n\n  line-height:1.4;\n\n  opacity:0;\n\n  max-height:0;\n\n  overflow:hidden;\n\n  transition:all 0.4s ease;\n}\n\n.gw-featured-card:hover .gw-featured-desc{\n  opacity:1;\n\n  max-height:60px;\n\n  margin-top:10px;\n}\n\n\n\/* =====================================================\n   EXPLORA POR GENERO\n===================================================== *\/\n\n.crg-v2-genres{\n  margin-top:30px;\n}\n\n.crg-v2-genre-grid{\n  display:grid;\n\n  grid-template-columns:repeat(5,1fr);\n\n  gap:10px;\n}\n\n.crg-v2-genre{\n  min-height:80px;\n\n  position:relative;\n\n  display:flex;\n  align-items:center;\n\n  gap:10px;\n\n  padding:10px 11px;\n\n  border:1px solid var(--border);\n\n  border-radius:7px;\n\n  background:#1B1D2C;\n\n  color:#fff;\n\n  text-decoration:none;\n\n  transition:.2s ease;\n}\n\n.crg-v2-genre:hover{\n  background:#20253A;\n  border-color:#31578D;\n  transform:translateY(-2px);\n}\n\n.crg-v2-genre:before{\n  content:\"\";\n\n  position:absolute;\n\n  left:0;\n  top:12px;\n  bottom:12px;\n\n  width:2px;\n\n  background:\n    linear-gradient(\n      180deg,\n      var(--cyan),\n      var(--purple)\n    );\n\n  opacity:.7;\n}\n\n.crg-v2-gicon{\n  width:32px;\n  height:32px;\n\n  flex:none;\n\n  display:flex;\n  align-items:center;\n  justify-content:center;\n\n  color:var(--cyan);\n}\n\n.crg-v2-gicon svg{\n  width:100%;\n  height:100%;\n}\n\n.crg-v2-genre:nth-child(2) .crg-v2-gicon,\n.crg-v2-genre:nth-child(5) .crg-v2-gicon{\n  color:#00CFFF;\n}\n\n.crg-v2-genre:nth-child(3) .crg-v2-gicon{\n  color:#13BFFF;\n}\n\n.crg-v2-genre:nth-child(4) .crg-v2-gicon,\n.crg-v2-genre:nth-child(7) .crg-v2-gicon{\n  color:#B43CFF;\n}\n\n.crg-v2-genre:nth-child(6) .crg-v2-gicon,\n.crg-v2-genre:nth-child(8) .crg-v2-gicon{\n  color:#A42CFF;\n}\n\n.crg-v2-genre:nth-child(9) .crg-v2-gicon{\n  color:#B13BFF;\n}\n\n.crg-v2-genre h3{\n  margin:0;\n\n  color:#fff;\n\n  font-size:12px;\n  font-weight:800;\n}\n\n.crg-v2-genre p{\n  margin:4px 0 0;\n\n  color:#8FA1C0;\n\n  font-size:8px;\n}\n\n.crg-v2-garrow{\n  margin-left:auto;\n\n  color:#75A5DD;\n\n  font-size:19px;\n}\n\n\n\/* =====================================================\n   RESPONSIVE\n===================================================== *\/\n\n@media(max-width:900px){\n\n  .gw-featured-grid{\n    grid-template-columns:repeat(2,1fr);\n  }\n\n  .crg-v2-genre-grid{\n    grid-template-columns:repeat(3,1fr);\n  }\n\n}\n\n@media(max-width:620px){\n\n  .crg-v2-wrap{\n    width:calc(100% - 24px);\n  }\n\n  .gw-featured-grid{\n    grid-template-columns:1fr;\n  }\n\n  .gw-featured-card{\n    height:320px;\n  }\n\n  .crg-v2-genre-grid{\n    grid-template-columns:repeat(2,1fr);\n  }\n\n}\n\n@media(max-width:430px){\n\n  .crg-v2-genre-grid{\n    grid-template-columns:1fr;\n  }\n\n  .crg-v2-title h2{\n    font-size:18px;\n  }\n\n}\n<\/style>\n\n\n<div class=\"crg-v2-wrap\">\n\n\n<!-- ==========================================\n     JUEGOS DESTACADOS\n========================================== -->\n\n<div class=\"crg-featured-v2\">\n\n  <div class=\"crg-v2-head\">\n\n    <div class=\"crg-v2-title\">\n\n      <div class=\"icon\">\n\n        <svg class=\"crg-svg\" viewBox=\"0 0 40 40\" fill=\"none\">\n\n          <path d=\"M10 14h20c3.1 0 5.7 2.1 6.3 5.1l1.4 7c.5 2.3-1.2 4.5-3.6 4.5-1.2 0-2.4-.6-3.1-1.7l-2.5-4H11.5l-2.5 4A3.6 3.6 0 0 1 5.9 30c-2.4 0-4.1-2.2-3.6-4.5l1.4-7C4.3 16.1 6.9 14 10 14Z\" stroke=\"currentColor\" stroke-width=\"2.4\"><\/path>\n\n          <path d=\"M12 21h6M15 18v6\" stroke=\"currentColor\" stroke-width=\"2.4\" stroke-linecap=\"round\"><\/path>\n\n          <circle cx=\"27\" cy=\"20\" r=\"1.5\" fill=\"currentColor\"><\/circle>\n\n          <circle cx=\"31\" cy=\"23\" r=\"1.5\" fill=\"currentColor\"><\/circle>\n\n        <\/svg>\n\n      <\/div>\n\n      <div>\n\n        <h2>Juegos destacados<\/h2>\n\n        <p>\n          Los mejores t\u00edtulos de la semana\n        <\/p>\n\n      <\/div>\n\n    <\/div>\n\n    <a class=\"crg-v2-more\" href=\"#\">\n      Ver todos los juegos\n      <span>\u2192<\/span>\n    <\/a>\n\n  <\/div>\n\n\n  <!-- ==========================================\n       LAS 3 CAJAS ORIGINALES\n  =========================================== -->\n\n  <div class=\"gw-featured-grid\">\n\n\n    <!-- CAJA 1 -->\n\n    <div class=\"gw-featured-card\">\n\n      <div class=\"gw-featured-bg\" style=\"background-image:url('https:\/\/images.unsplash.com\/photo-1538481199705-c710c4e965fc?auto=format&amp;fit=crop&amp;w=600&amp;q=80');\"><\/div>\n\n      <div class=\"gw-featured-overlay\"><\/div>\n\n      <div class=\"gw-featured-rank\">\n        1\n      <\/div>\n\n      <div class=\"gw-featured-badge\">\n        Nuevo\n      <\/div>\n\n      <div class=\"gw-featured-content\">\n\n        <div class=\"gw-featured-genre\">\n          Action RPG\n        <\/div>\n\n        <h3 class=\"gw-featured-title\">\n          Shadow Legends\n        <\/h3>\n\n        <div class=\"gw-featured-meta\">\n\n          <span>\n            \u2b50 4.9\n          <\/span>\n\n          <span>\n            \ud83d\udc65 2.3M\n          <\/span>\n\n        <\/div>\n\n        <p class=\"gw-featured-desc\">\n          Conquista reinos oscuros con magia ancestral y combate \u00e9pico.\n        <\/p>\n\n      <\/div>\n\n    <\/div>\n\n\n    <!-- CAJA 2 -->\n\n    <div class=\"gw-featured-card\">\n\n      <div class=\"gw-featured-bg\" style=\"background-image:url('https:\/\/images.unsplash.com\/photo-1552820728-8b83bb6b773f?auto=format&amp;fit=crop&amp;w=600&amp;q=80');\"><\/div>\n\n      <div class=\"gw-featured-overlay\"><\/div>\n\n      <div class=\"gw-featured-rank\">\n        2\n      <\/div>\n\n      <div class=\"gw-featured-badge\">\n        Trending\n      <\/div>\n\n      <div class=\"gw-featured-content\">\n\n        <div class=\"gw-featured-genre\">\n          Racing\n        <\/div>\n\n        <h3 class=\"gw-featured-title\">\n          Velocity Apex\n        <\/h3>\n\n        <div class=\"gw-featured-meta\">\n\n          <span>\n            \u2b50 4.7\n          <\/span>\n\n          <span>\n            \ud83d\udc65 1.8M\n          <\/span>\n\n        <\/div>\n\n        <p class=\"gw-featured-desc\">\n          Carreras de alta velocidad con los coches m\u00e1s exclusivos del mundo.\n        <\/p>\n\n      <\/div>\n\n    <\/div>\n\n\n    <!-- CAJA 3 -->\n\n    <div class=\"gw-featured-card\">\n\n      <div class=\"gw-featured-bg\" style=\"background-image:url('https:\/\/images.unsplash.com\/photo-1542751371-adc38448a05e?auto=format&amp;fit=crop&amp;w=600&amp;q=80');\"><\/div>\n\n      <div class=\"gw-featured-overlay\"><\/div>\n\n      <div class=\"gw-featured-rank\">\n        3\n      <\/div>\n\n      <div class=\"gw-featured-badge\">\n        Hot\n      <\/div>\n\n      <div class=\"gw-featured-content\">\n\n        <div class=\"gw-featured-genre\">\n          Cyberpunk\n        <\/div>\n\n        <h3 class=\"gw-featured-title\">\n          Neon City 2099\n        <\/h3>\n\n        <div class=\"gw-featured-meta\">\n\n          <span>\n            \u2b50 4.8\n          <\/span>\n\n          <span>\n            \ud83d\udc65 3.1M\n          <\/span>\n\n        <\/div>\n\n        <p class=\"gw-featured-desc\">\n          Futuro dist\u00f3pico donde la tecnolog\u00eda redefine la humanidad.\n        <\/p>\n\n      <\/div>\n\n    <\/div>\n\n\n  <\/div>\n\n<\/div><\/div><\/section>\n\n\n\n<!-- =========================================================\n     CRGAMES - CATEGOR\u00cdAS DE JUEGOS\n     No modifica las cajas de juegos existentes\n========================================================= -->\n\n<style>\n.crg-categories{\n    width:100%;\n    max-width:1225px;\n    margin:0 auto;\n    padding:35px 20px 45px;\n    box-sizing:border-box;\n    font-family:Inter,Arial,sans-serif;\n    color:#fff;\n}\n\n.crg-categories-header{\n    display:flex;\n    align-items:center;\n    justify-content:space-between;\n    margin-bottom:22px;\n    gap:20px;\n}\n\n.crg-categories-title{\n    display:flex;\n    align-items:center;\n    gap:12px;\n}\n\n.crg-categories-title-icon{\n    width:38px;\n    height:38px;\n    border-radius:10px;\n    display:flex;\n    align-items:center;\n    justify-content:center;\n    background:linear-gradient(135deg,#00cfff,#326dff);\n    box-shadow:0 5px 18px rgba(0,207,255,.20);\n}\n\n.crg-categories-title-icon svg{\n    width:21px;\n    height:21px;\n    fill:none;\n    stroke:#fff;\n    stroke-width:2;\n    stroke-linecap:round;\n    stroke-linejoin:round;\n}\n\n.crg-categories-title h2{\n    margin:0;\n    font-size:21px;\n    line-height:1.1;\n    font-weight:800;\n    color:#fff;\n}\n\n.crg-categories-title p{\n    margin:4px 0 0;\n    font-size:11px;\n    color:#8d95aa;\n    font-weight:500;\n}\n\n.crg-categories-view{\n    color:#00cfff;\n    font-size:11px;\n    font-weight:700;\n    text-decoration:none;\n    white-space:nowrap;\n    transition:.25s ease;\n}\n\n.crg-categories-view:hover{\n    color:#fff;\n}\n\n\/* GRID *\/\n\n.crg-categories-grid{\n    display:grid;\n    grid-template-columns:repeat(4,1fr);\n    gap:13px;\n}\n\n\/* CARD *\/\n\n.crg-category{\n    position:relative;\n    min-height:126px;\n    border-radius:13px;\n    overflow:hidden;\n    text-decoration:none;\n    color:#fff;\n    background:#222536;\n    border:1px solid rgba(255,255,255,.055);\n    box-shadow:0 8px 25px rgba(0,0,0,.16);\n    transition:\n        transform .25s ease,\n        border-color .25s ease,\n        box-shadow .25s ease;\n}\n\n.crg-category:hover{\n    transform:translateY(-4px);\n    border-color:rgba(0,207,255,.35);\n    box-shadow:\n        0 12px 30px rgba(0,0,0,.28),\n        0 0 20px rgba(0,191,255,.08);\n}\n\n\/* LUZ DE FONDO *\/\n\n.crg-category::before{\n    content:\"\";\n    position:absolute;\n    width:110px;\n    height:110px;\n    right:-35px;\n    top:-40px;\n    border-radius:50%;\n    background:var(--category-color);\n    opacity:.12;\n    filter:blur(12px);\n    transition:.3s ease;\n}\n\n.crg-category:hover::before{\n    opacity:.22;\n    transform:scale(1.25);\n}\n\n\/* ICONO *\/\n\n.crg-category-icon{\n    position:absolute;\n    left:15px;\n    top:15px;\n    width:43px;\n    height:43px;\n    border-radius:11px;\n    display:flex;\n    align-items:center;\n    justify-content:center;\n    background:var(--icon-bg);\n    border:1px solid rgba(255,255,255,.07);\n    box-shadow:0 5px 15px rgba(0,0,0,.18);\n}\n\n.crg-category-icon svg{\n    width:22px;\n    height:22px;\n    fill:none;\n    stroke:var(--category-color);\n    stroke-width:1.9;\n    stroke-linecap:round;\n    stroke-linejoin:round;\n}\n\n\/* CONTENIDO *\/\n\n.crg-category-content{\n    position:absolute;\n    left:15px;\n    right:12px;\n    bottom:14px;\n}\n\n.crg-category-name{\n    display:block;\n    font-size:14px;\n    line-height:1.2;\n    font-weight:800;\n    color:#fff;\n    margin-bottom:5px;\n}\n\n.crg-category-count{\n    display:block;\n    font-size:10px;\n    color:#8e96aa;\n    font-weight:500;\n}\n\n\/* FLECHA *\/\n\n.crg-category-arrow{\n    position:absolute;\n    right:13px;\n    bottom:14px;\n    font-size:15px;\n    color:#667087;\n    transition:.25s ease;\n}\n\n.crg-category:hover .crg-category-arrow{\n    color:var(--category-color);\n    transform:translateX(3px);\n}\n\n\/* COLORES *\/\n\n.crg-cat-action{\n    --category-color:#00cfff;\n    --icon-bg:rgba(0,207,255,.10);\n}\n\n.crg-cat-adventure{\n    --category-color:#8b5cff;\n    --icon-bg:rgba(139,92,255,.10);\n}\n\n.crg-cat-rpg{\n    --category-color:#ff4fa3;\n    --icon-bg:rgba(255,79,163,.10);\n}\n\n.crg-cat-racing{\n    --category-color:#ff7a30;\n    --icon-bg:rgba(255,122,48,.10);\n}\n\n.crg-cat-sports{\n    --category-color:#39d98a;\n    --icon-bg:rgba(57,217,138,.10);\n}\n\n.crg-cat-horror{\n    --category-color:#ff4267;\n    --icon-bg:rgba(255,66,103,.10);\n}\n\n.crg-cat-strategy{\n    --category-color:#ffc542;\n    --icon-bg:rgba(255,197,66,.10);\n}\n\n.crg-cat-arcade{\n    --category-color:#39a8ff;\n    --icon-bg:rgba(57,168,255,.10);\n}\n\n\/* RESPONSIVE *\/\n\n@media(max-width:850px){\n\n    .crg-categories-grid{\n        grid-template-columns:repeat(2,1fr);\n    }\n\n}\n\n@media(max-width:520px){\n\n    .crg-categories{\n        padding:28px 12px 35px;\n    }\n\n    .crg-categories-header{\n        align-items:flex-start;\n    }\n\n    .crg-categories-title h2{\n        font-size:18px;\n    }\n\n    .crg-categories-title p{\n        font-size:10px;\n    }\n\n    .crg-categories-view{\n        font-size:10px;\n    }\n\n    .crg-categories-grid{\n        gap:9px;\n    }\n\n    .crg-category{\n        min-height:115px;\n    }\n\n    .crg-category-icon{\n        left:12px;\n        top:12px;\n        width:39px;\n        height:39px;\n    }\n\n    .crg-category-icon svg{\n        width:20px;\n        height:20px;\n    }\n\n    .crg-category-content{\n        left:12px;\n        bottom:12px;\n    }\n\n    .crg-category-name{\n        font-size:13px;\n    }\n\n    .crg-category-count{\n        font-size:9px;\n    }\n}\n<\/style>\n\n\n<section class=\"crg-categories\">\n\n    <!-- CABECERA -->\n\n    <div class=\"crg-categories-header\">\n\n        <div class=\"crg-categories-title\">\n\n            <div class=\"crg-categories-title-icon\">\n                <svg viewBox=\"0 0 24 24\">\n                    <rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"3\"><\/rect>\n                    <path d=\"M8 12h4\"><\/path>\n                    <path d=\"M10 10v4\"><\/path>\n                    <circle cx=\"16.5\" cy=\"11\" r=\".8\" fill=\"currentColor\"><\/circle>\n                    <circle cx=\"18.5\" cy=\"13\" r=\".8\" fill=\"currentColor\"><\/circle>\n                <\/svg>\n            <\/div>\n\n            <div>\n                <h2>Explora por Categor\u00eda<\/h2>\n                <p>Encuentra tu pr\u00f3ximo juego favorito<\/p>\n            <\/div>\n\n        <\/div>\n\n        <a href=\"#\" class=\"crg-categories-view\">\n            Ver todas las categor\u00edas \u2192\n        <\/a>\n\n    <\/div>\n\n\n    <!-- CATEGOR\u00cdAS -->\n\n    <div class=\"crg-categories-grid\">\n\n\n        <!-- ACCI\u00d3N -->\n\n        <a href=\"#\" class=\"crg-category crg-cat-action\">\n\n            <div class=\"crg-category-icon\">\n                <svg viewBox=\"0 0 24 24\">\n                    <path d=\"M6 13l-2 5\"><\/path>\n                    <path d=\"M18 13l2 5\"><\/path>\n                    <path d=\"M7 8h10\"><\/path>\n                    <path d=\"M8 8l-2 3\"><\/path>\n                    <path d=\"M16 8l2 3\"><\/path>\n                    <path d=\"M9 12v4\"><\/path>\n                    <path d=\"M7 14h4\"><\/path>\n                    <circle cx=\"16\" cy=\"13\" r=\"1\"><\/circle>\n                    <circle cx=\"18\" cy=\"15\" r=\"1\"><\/circle>\n                <\/svg>\n            <\/div>\n\n            <div class=\"crg-category-content\">\n                <span class=\"crg-category-name\">Acci\u00f3n<\/span>\n                <span class=\"crg-category-count\">128 juegos<\/span>\n            <\/div>\n\n            <span class=\"crg-category-arrow\">\u203a<\/span>\n\n        <\/a>\n\n\n        <!-- AVENTURA -->\n\n        <a href=\"#\" class=\"crg-category crg-cat-adventure\">\n\n            <div class=\"crg-category-icon\">\n                <svg viewBox=\"0 0 24 24\">\n                    <path d=\"M4 19l6-14 4 9 3-5 3 10z\"><\/path>\n                    <path d=\"M9 8l2 1\"><\/path>\n                <\/svg>\n            <\/div>\n\n            <div class=\"crg-category-content\">\n                <span class=\"crg-category-name\">Aventura<\/span>\n                <span class=\"crg-category-count\">96 juegos<\/span>\n            <\/div>\n\n            <span class=\"crg-category-arrow\">\u203a<\/span>\n\n        <\/a>\n\n\n        <!-- RPG -->\n\n        <a href=\"#\" class=\"crg-category crg-cat-rpg\">\n\n            <div class=\"crg-category-icon\">\n                <svg viewBox=\"0 0 24 24\">\n                    <path d=\"M12 3l2.2 5.1L20 10l-5.8 1.9L12 17l-2.2-5.1L4 10l5.8-1.9z\"><\/path>\n                    <path d=\"M18 4v3\"><\/path>\n                    <path d=\"M16.5 5.5h3\"><\/path>\n                <\/svg>\n            <\/div>\n\n            <div class=\"crg-category-content\">\n                <span class=\"crg-category-name\">RPG<\/span>\n                <span class=\"crg-category-count\">74 juegos<\/span>\n            <\/div>\n\n            <span class=\"crg-category-arrow\">\u203a<\/span>\n\n        <\/a>\n\n\n        <!-- CARRERAS -->\n\n        <a href=\"#\" class=\"crg-category crg-cat-racing\">\n\n            <div class=\"crg-category-icon\">\n                <svg viewBox=\"0 0 24 24\">\n                    <path d=\"M5 16l2-7h10l2 7\"><\/path>\n                    <path d=\"M7 16v2\"><\/path>\n                    <path d=\"M17 16v2\"><\/path>\n                    <circle cx=\"8\" cy=\"16\" r=\"1.5\"><\/circle>\n                    <circle cx=\"16\" cy=\"16\" r=\"1.5\"><\/circle>\n                    <path d=\"M9 9l1-2h4l1 2\"><\/path>\n                <\/svg>\n            <\/div>\n\n            <div class=\"crg-category-content\">\n                <span class=\"crg-category-name\">Carreras<\/span>\n                <span class=\"crg-category-count\">52 juegos<\/span>\n            <\/div>\n\n            <span class=\"crg-category-arrow\">\u203a<\/span>\n\n        <\/a>\n\n\n        <!-- DEPORTES -->\n\n        <a href=\"#\" class=\"crg-category crg-cat-sports\">\n\n            <div class=\"crg-category-icon\">\n                <svg viewBox=\"0 0 24 24\">\n                    <circle cx=\"12\" cy=\"12\" r=\"8\"><\/circle>\n                    <path d=\"M12 4v4\"><\/path>\n                    <path d=\"M12 16v4\"><\/path>\n                    <path d=\"M4 12h4\"><\/path>\n                    <path d=\"M16 12h4\"><\/path>\n                    <path d=\"M8 8l4 4 4-4\"><\/path>\n                <\/svg>\n            <\/div>\n\n            <div class=\"crg-category-content\">\n                <span class=\"crg-category-name\">Deportes<\/span>\n                <span class=\"crg-category-count\">61 juegos<\/span>\n            <\/div>\n\n            <span class=\"crg-category-arrow\">\u203a<\/span>\n\n        <\/a>\n\n\n        <!-- TERROR -->\n\n        <a href=\"#\" class=\"crg-category crg-cat-horror\">\n\n            <div class=\"crg-category-icon\">\n                <svg viewBox=\"0 0 24 24\">\n                    <path d=\"M5 10a7 7 0 0 1 14 0v7H5z\"><\/path>\n                    <circle cx=\"9\" cy=\"12\" r=\"1\"><\/circle>\n                    <circle cx=\"15\" cy=\"12\" r=\"1\"><\/circle>\n                    <path d=\"M9 16h6\"><\/path>\n                <\/svg>\n            <\/div>\n\n            <div class=\"crg-category-content\">\n                <span class=\"crg-category-name\">Terror<\/span>\n                <span class=\"crg-category-count\">43 juegos<\/span>\n            <\/div>\n\n            <span class=\"crg-category-arrow\">\u203a<\/span>\n\n        <\/a>\n\n\n        <!-- ESTRATEGIA -->\n\n        <a href=\"#\" class=\"crg-category crg-cat-strategy\">\n\n            <div class=\"crg-category-icon\">\n                <svg viewBox=\"0 0 24 24\">\n                    <rect x=\"4\" y=\"4\" width=\"16\" height=\"16\" rx=\"2\"><\/rect>\n                    <path d=\"M8 8h3v3H8z\"><\/path>\n                    <path d=\"M13 13h3v3h-3z\"><\/path>\n                    <path d=\"M13 8h3\"><\/path>\n                    <path d=\"M8 16h3\"><\/path>\n                <\/svg>\n            <\/div>\n\n            <div class=\"crg-category-content\">\n                <span class=\"crg-category-name\">Estrategia<\/span>\n                <span class=\"crg-category-count\">38 juegos<\/span>\n            <\/div>\n\n            <span class=\"crg-category-arrow\">\u203a<\/span>\n\n        <\/a>\n\n\n        <!-- ARCADE -->\n\n        <a href=\"#\" class=\"crg-category crg-cat-arcade\">\n\n            <div class=\"crg-category-icon\">\n                <svg viewBox=\"0 0 24 24\">\n                    <rect x=\"5\" y=\"4\" width=\"14\" height=\"16\" rx=\"2\"><\/rect>\n                    <path d=\"M8 8h8\"><\/path>\n                    <circle cx=\"9\" cy=\"13\" r=\"1\"><\/circle>\n                    <circle cx=\"15\" cy=\"13\" r=\"1\"><\/circle>\n                    <path d=\"M10 17h4\"><\/path>\n                <\/svg>\n            <\/div>\n\n            <div class=\"crg-category-content\">\n                <span class=\"crg-category-name\">Arcade<\/span>\n                <span class=\"crg-category-count\">87 juegos<\/span>\n            <\/div>\n\n            <span class=\"crg-category-arrow\">\u203a<\/span>\n\n        <\/a>\n\n    <\/div>\n\n<\/section>\n\n\n\n<!-- =========================================================\n     CRGAMES - VIDEOS DESTACADOS\n     4 VIDEOS + REPRODUCTOR\n========================================================= -->\n\n<style>\n\n.crg-video-section{\n    width:100%;\n    max-width:1225px;\n    margin:0 auto;\n    padding:38px 20px 45px;\n    box-sizing:border-box;\n    font-family:Inter,Arial,sans-serif;\n    color:#fff;\n}\n\n\/* =========================\n   CABECERA\n========================= *\/\n\n.crg-video-header{\n    display:flex;\n    align-items:center;\n    justify-content:space-between;\n    margin-bottom:20px;\n    gap:15px;\n}\n\n.crg-video-title{\n    display:flex;\n    align-items:center;\n    gap:11px;\n}\n\n.crg-video-icon{\n    width:38px;\n    height:38px;\n    flex-shrink:0;\n    border-radius:10px;\n    display:flex;\n    align-items:center;\n    justify-content:center;\n    background:linear-gradient(135deg,#00cfff,#356bff);\n    box-shadow:0 5px 18px rgba(0,207,255,.20);\n}\n\n.crg-video-icon svg{\n    width:20px;\n    height:20px;\n    fill:none;\n    stroke:#fff;\n    stroke-width:2;\n    stroke-linecap:round;\n    stroke-linejoin:round;\n}\n\n.crg-video-heading h2{\n    margin:0;\n    color:#ffffff;\n    font-size:21px;\n    line-height:1.1;\n    font-weight:800;\n}\n\n.crg-video-heading p{\n    margin:4px 0 0;\n    color:#8d95aa;\n    font-size:11px;\n    font-weight:500;\n}\n\n.crg-video-all{\n    color:#00cfff;\n    text-decoration:none;\n    font-size:11px;\n    font-weight:700;\n    white-space:nowrap;\n    transition:.25s ease;\n}\n\n.crg-video-all:hover{\n    color:#ffffff;\n}\n\n\n\/* =========================\n   CONTENEDOR\n========================= *\/\n\n.crg-video-layout{\n    display:grid;\n    grid-template-columns:320px minmax(0,1fr);\n    gap:16px;\n    align-items:stretch;\n}\n\n\n\/* =========================\n   LISTA DE VIDEOS\n========================= *\/\n\n.crg-video-list{\n    display:flex;\n    flex-direction:column;\n    gap:9px;\n}\n\n\n\/* =========================\n   TARJETA DE VIDEO\n========================= *\/\n\n.crg-video-item{\n    position:relative;\n    display:flex;\n    align-items:center;\n    gap:11px;\n    min-height:84px;\n    padding:8px;\n    box-sizing:border-box;\n\n    background:#222536;\n    border:1px solid rgba(255,255,255,.055);\n    border-radius:11px;\n\n    cursor:pointer;\n    overflow:hidden;\n\n    transition:\n        transform .25s ease,\n        border-color .25s ease,\n        background .25s ease,\n        box-shadow .25s ease;\n}\n\n.crg-video-item:hover{\n    transform:translateX(3px);\n    background:#272a3b;\n    border-color:rgba(0,207,255,.30);\n}\n\n.crg-video-item.active{\n    background:linear-gradient(\n        90deg,\n        rgba(0,207,255,.13),\n        rgba(42,55,90,.42)\n    );\n\n    border-color:#00cfff;\n\n    box-shadow:\n        inset 3px 0 0 #00cfff,\n        0 5px 20px rgba(0,0,0,.18);\n}\n\n\n\/* =========================\n   MINIATURA\n========================= *\/\n\n.crg-video-thumb{\n    position:relative;\n    width:112px;\n    height:68px;\n    flex-shrink:0;\n\n    overflow:hidden;\n    border-radius:8px;\n    background:#111522;\n}\n\n.crg-video-thumb img{\n    display:block;\n    width:100%;\n    height:100%;\n    object-fit:cover;\n\n    transition:transform .3s ease;\n}\n\n.crg-video-item:hover .crg-video-thumb img{\n    transform:scale(1.07);\n}\n\n\n\/* =========================\n   BOT\u00d3N PLAY MINIATURA\n========================= *\/\n\n.crg-video-play-small{\n    position:absolute;\n    left:50%;\n    top:50%;\n\n    width:31px;\n    height:31px;\n\n    transform:translate(-50%,-50%);\n\n    display:flex;\n    align-items:center;\n    justify-content:center;\n\n    border-radius:50%;\n\n    background:rgba(0,0,0,.72);\n    border:1px solid rgba(255,255,255,.25);\n\n    transition:.25s ease;\n}\n\n.crg-video-item:hover .crg-video-play-small{\n    background:#00bfff;\n    border-color:#00bfff;\n}\n\n.crg-video-play-small::after{\n    content:\"\";\n\n    margin-left:2px;\n\n    width:0;\n    height:0;\n\n    border-top:6px solid transparent;\n    border-bottom:6px solid transparent;\n    border-left:9px solid #ffffff;\n}\n\n\n\/* =========================\n   INFORMACI\u00d3N\n========================= *\/\n\n.crg-video-info{\n    min-width:0;\n    padding-right:5px;\n}\n\n.crg-video-info h3{\n    margin:0 0 5px;\n\n    color:#ffffff;\n\n    font-size:12px;\n    line-height:1.35;\n    font-weight:800;\n\n    white-space:normal;\n}\n\n.crg-video-info span{\n    color:#858da2;\n    font-size:9px;\n    line-height:1.2;\n    font-weight:500;\n}\n\n\n\/* =========================\n   REPRODUCTOR\n========================= *\/\n\n.crg-video-player{\n    position:relative;\n\n    min-height:342px;\n\n    overflow:hidden;\n\n    background:#10131f;\n\n    border-radius:13px;\n    border:1px solid rgba(255,255,255,.07);\n\n    box-shadow:0 10px 30px rgba(0,0,0,.28);\n}\n\n.crg-video-player iframe{\n    position:absolute;\n\n    inset:0;\n\n    width:100%;\n    height:100%;\n\n    border:0;\n}\n\n\n\/* =========================\n   INFORMACI\u00d3N SOBRE VIDEO\n========================= *\/\n\n.crg-video-current{\n    position:absolute;\n\n    left:0;\n    right:0;\n    bottom:0;\n\n    z-index:5;\n\n    padding:55px 20px 17px;\n\n    background:linear-gradient(\n        to bottom,\n        transparent 0%,\n        rgba(10,12,22,.20) 20%,\n        rgba(10,12,22,.95) 100%\n    );\n\n    pointer-events:none;\n}\n\n.crg-video-current h3{\n    margin:0 0 4px;\n\n    color:#ffffff;\n\n    font-size:17px;\n    line-height:1.25;\n    font-weight:800;\n}\n\n.crg-video-current p{\n    margin:0;\n\n    color:#a0a8ba;\n\n    font-size:10px;\n    line-height:1.4;\n}\n\n\n\/* =========================\n   EFECTO L\u00cdNEA ACTIVA\n========================= *\/\n\n.crg-video-item.active::before{\n    content:\"\";\n\n    position:absolute;\n\n    left:0;\n    top:0;\n    bottom:0;\n\n    width:3px;\n\n    background:#00cfff;\n\n    box-shadow:0 0 10px rgba(0,207,255,.7);\n}\n\n\n\/* =========================\n   RESPONSIVE TABLET\n========================= *\/\n\n@media(max-width:900px){\n\n    .crg-video-layout{\n        grid-template-columns:280px minmax(0,1fr);\n    }\n\n    .crg-video-player{\n        min-height:300px;\n    }\n\n}\n\n\n\/* =========================\n   RESPONSIVE M\u00d3VIL\n========================= *\/\n\n@media(max-width:720px){\n\n    .crg-video-layout{\n        grid-template-columns:1fr;\n    }\n\n    .crg-video-player{\n        order:1;\n        min-height:400px;\n    }\n\n    .crg-video-list{\n        order:2;\n\n        display:grid;\n        grid-template-columns:repeat(2,1fr);\n        gap:9px;\n    }\n\n    .crg-video-item{\n        display:block;\n        min-height:150px;\n        padding:7px;\n    }\n\n    .crg-video-thumb{\n        width:100%;\n        height:90px;\n        margin-bottom:7px;\n    }\n\n    .crg-video-info{\n        padding:0 3px;\n    }\n\n    .crg-video-info h3{\n        font-size:10px;\n    }\n\n}\n\n\n\/* =========================\n   M\u00d3VIL PEQUE\u00d1O\n========================= *\/\n\n@media(max-width:480px){\n\n    .crg-video-section{\n        padding:28px 12px 35px;\n    }\n\n    .crg-video-header{\n        align-items:flex-start;\n    }\n\n    .crg-video-heading h2{\n        font-size:18px;\n    }\n\n    .crg-video-heading p{\n        font-size:10px;\n    }\n\n    .crg-video-all{\n        font-size:10px;\n    }\n\n    .crg-video-icon{\n        width:35px;\n        height:35px;\n    }\n\n    .crg-video-player{\n        min-height:225px;\n        border-radius:10px;\n    }\n\n    .crg-video-current{\n        padding:45px 13px 12px;\n    }\n\n    .crg-video-current h3{\n        font-size:14px;\n    }\n\n    .crg-video-current p{\n        font-size:9px;\n    }\n\n    .crg-video-list{\n        display:flex;\n        flex-direction:column;\n    }\n\n    .crg-video-item{\n        display:flex;\n        min-height:76px;\n    }\n\n    .crg-video-thumb{\n        width:105px;\n        height:62px;\n        margin:0;\n    }\n\n    .crg-video-info h3{\n        font-size:11px;\n    }\n\n}\n\n\n\/* =========================\n   OCULTAR SCROLLS INNECESARIOS\n========================= *\/\n\n.crg-video-section *{\n    box-sizing:border-box;\n}\n\n<\/style>\n\n\n<!-- =========================================================\n     HTML\n========================================================= -->\n\n<section class=\"crg-video-section\">\n\n    <!-- CABECERA -->\n\n    <div class=\"crg-video-header\">\n\n        <div class=\"crg-video-title\">\n\n            <div class=\"crg-video-icon\">\n\n                <svg viewBox=\"0 0 24 24\">\n\n                    <rect x=\"3\" y=\"5\" width=\"18\" height=\"14\" rx=\"3\">\n                    <\/rect>\n\n                    <path d=\"M10 9l5 3-5 3z\"><\/path>\n\n                <\/svg>\n\n            <\/div>\n\n\n            <div class=\"crg-video-heading\">\n\n                <h2>Videos destacados<\/h2>\n\n                <p>\n                    Descubre los mejores videos de videojuegos\n                <\/p>\n\n            <\/div>\n\n        <\/div>\n\n\n        <a href=\"#\" class=\"crg-video-all\">\n            Ver todos los videos \u2192\n        <\/a>\n\n    <\/div>\n\n\n    <!-- =====================================================\n         CONTENIDO\n    ====================================================== -->\n\n    <div class=\"crg-video-layout\">\n\n\n        <!-- =================================================\n             LISTA DE 4 VIDEOS\n        ================================================== -->\n\n        <div class=\"crg-video-list\">\n\n\n            <!-- VIDEO 1 -->\n\n            <div class=\"crg-video-item active\" data-video=\"QdBZY2fkU-0\" data-title=\"GTA VI - Official Trailer\" data-description=\"Grand Theft Auto VI - tr\u00e1iler oficial.\">\n\n                <div class=\"crg-video-thumb\">\n\n                    <img decoding=\"async\" src=\"https:\/\/img.youtube.com\/vi\/QdBZY2fkU-0\/mqdefault.jpg\" alt=\"GTA VI Official Trailer\">\n\n                    <div class=\"crg-video-play-small\"><\/div>\n\n                <\/div>\n\n\n                <div class=\"crg-video-info\">\n\n                    <h3>\n                        GTA VI &#8211; Official Trailer\n                    <\/h3>\n\n                    <span>\n                        \ud83c\udfae Grand Theft Auto VI\n                    <\/span>\n\n                <\/div>\n\n            <\/div>\n\n\n            <!-- VIDEO 2 -->\n\n            <div class=\"crg-video-item\" data-video=\"Cr5rQ1NZ0Tw\" data-title=\"Black Myth: Wukong\" data-description=\"Gameplay y acci\u00f3n de Black Myth: Wukong.\">\n\n                <div class=\"crg-video-thumb\">\n\n                    <img decoding=\"async\" src=\"https:\/\/img.youtube.com\/vi\/Cr5rQ1NZ0Tw\/mqdefault.jpg\" alt=\"Black Myth Wukong\">\n\n                    <div class=\"crg-video-play-small\"><\/div>\n\n                <\/div>\n\n\n                <div class=\"crg-video-info\">\n\n                    <h3>\n                        Black Myth: Wukong\n                    <\/h3>\n\n                    <span>\n                        \u2694\ufe0f Action RPG\n                    <\/span>\n\n                <\/div>\n\n            <\/div>\n\n\n            <!-- VIDEO 3 -->\n\n            <div class=\"crg-video-item\" data-video=\"bgqGdIoa52s\" data-title=\"Marvel's Spider-Man 2\" data-description=\"Gameplay de Marvel's Spider-Man 2.\">\n\n                <div class=\"crg-video-thumb\">\n\n                    <img decoding=\"async\" src=\"https:\/\/img.youtube.com\/vi\/bgqGdIoa52s\/mqdefault.jpg\" alt=\"Marvel Spider-Man 2\">\n\n                    <div class=\"crg-video-play-small\"><\/div>\n\n                <\/div>\n\n\n                <div class=\"crg-video-info\">\n\n                    <h3>\n                        Marvel&#8217;s Spider-Man 2\n                    <\/h3>\n\n                    <span>\n                        \ud83d\udd77\ufe0f PlayStation\n                    <\/span>\n\n                <\/div>\n\n            <\/div>\n\n\n            <!-- VIDEO 4 -->\n\n            <div class=\"crg-video-item\" data-video=\"FYH9n37B7Yw\" data-title=\"Forza Horizon 5\" data-description=\"Carreras y velocidad en Forza Horizon 5.\">\n\n                <div class=\"crg-video-thumb\">\n\n                    <img decoding=\"async\" src=\"https:\/\/img.youtube.com\/vi\/FYH9n37B7Yw\/mqdefault.jpg\" alt=\"Forza Horizon 5\">\n\n                    <div class=\"crg-video-play-small\"><\/div>\n\n                <\/div>\n\n\n                <div class=\"crg-video-info\">\n\n                    <h3>\n                        Forza Horizon 5\n                    <\/h3>\n\n                    <span>\n                        \ud83c\udfce\ufe0f Racing\n                    <\/span>\n\n                <\/div>\n\n            <\/div>\n\n\n        <\/div>\n\n\n        <!-- =================================================\n             REPRODUCTOR PRINCIPAL\n        ================================================== -->\n\n        <div class=\"crg-video-player\">\n\n            <iframe id=\"crgMainVideo\" src=\"https:\/\/www.youtube.com\/embed\/QdBZY2fkU-0?rel=0\" title=\"Videos destacados de videojuegos\" allow=\"accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share\" allowfullscreen=\"\">\n            <\/iframe>\n\n\n            <!-- INFORMACI\u00d3N DEL VIDEO -->\n\n            <div class=\"crg-video-current\">\n\n                <h3 id=\"crgVideoTitle\">\n                    GTA VI &#8211; Official Trailer\n                <\/h3>\n\n                <p id=\"crgVideoDescription\">\n                    Grand Theft Auto VI &#8211; tr\u00e1iler oficial.\n                <\/p>\n\n            <\/div>\n\n        <\/div>\n\n\n    <\/div>\n\n<\/section>\n\n\n<!-- =========================================================\n     JAVASCRIPT\n========================================================= -->\n\n<script>\n\ndocument.addEventListener(\"DOMContentLoaded\", function(){\n\n    const videos =\n        document.querySelectorAll(\".crg-video-item\");\n\n    const player =\n        document.getElementById(\"crgMainVideo\");\n\n    const title =\n        document.getElementById(\"crgVideoTitle\");\n\n    const description =\n        document.getElementById(\"crgVideoDescription\");\n\n\n    videos.forEach(function(video){\n\n        video.addEventListener(\"click\", function(){\n\n            const videoID =\n                this.getAttribute(\"data-video\");\n\n            const videoTitle =\n                this.getAttribute(\"data-title\");\n\n            const videoDescription =\n                this.getAttribute(\"data-description\");\n\n\n            \/* CAMBIAR VIDEO *\/\n\n            player.src =\n                \"https:\/\/www.youtube.com\/embed\/\" +\n                videoID +\n                \"?rel=0&autoplay=1\";\n\n\n            \/* CAMBIAR T\u00cdTULO *\/\n\n            title.textContent =\n                videoTitle;\n\n\n            \/* CAMBIAR DESCRIPCI\u00d3N *\/\n\n            description.textContent =\n                videoDescription;\n\n\n            \/* QUITAR ACTIVO *\/\n\n            videos.forEach(function(item){\n\n                item.classList.remove(\"active\");\n\n            });\n\n\n            \/* MARCAR VIDEO ACTIVO *\/\n\n            this.classList.add(\"active\");\n\n        });\n\n    });\n\n});\n\n<\/script>\n\n\n\n<style>\n\/* SEPARADOR PREMIUM CRGAMES *\/\n\n.crg-divider {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  width: 100%;\n  max-width: 1200px;\n  margin: 45px auto;\n  padding: 0 15px;\n  box-sizing: border-box;\n}\n\n.crg-divider::before {\n  content: \"\";\n  position: absolute;\n  left: 15px;\n  right: 15px;\n  height: 1px;\n  background: linear-gradient(\n    90deg,\n    transparent,\n    #452691 20%,\n    #9B7AFF 50%,\n    #452691 80%,\n    transparent\n  );\n  opacity: .85;\n}\n\n.crg-divider__center {\n  position: relative;\n  display: flex;\n  align-items: center;\n  justify-content: center;\n  gap: 5px;\n  padding: 0 18px;\n  background: #0B0C15;\n  z-index: 1;\n}\n\n.crg-divider__center span {\n  display: block;\n  width: 4px;\n  height: 4px;\n  background: #9B7AFF;\n  border-radius: 50%;\n  box-shadow: 0 0 8px rgba(155,122,255,.8);\n}\n\n.crg-divider__center span:nth-child(2) {\n  width: 7px;\n  height: 7px;\n  background: #C9C6F4;\n}\n\n.crg-divider__center span:nth-child(3) {\n  width: 4px;\n  height: 4px;\n}\n\n\/* Variante para fondos secundarios *\/\n\n.crg-divider--secondary .crg-divider__center {\n  background: #1B1D2C;\n}\n\n\/* Versi\u00f3n m\u00f3vil *\/\n\n@media(max-width: 600px) {\n  .crg-divider {\n    margin: 30px auto;\n  }\n}\n<\/style>\n\n<div class=\"crg-divider\">\n  <div class=\"crg-divider__center\">\n    <span><\/span>\n    <span><\/span>\n    <span><\/span>\n  <\/div>\n<\/div>\n","protected":false},"excerpt":{"rendered":"<p>\ud83d\udd25 Destacado de la Semana Cyber Odyssey 2077 Sum\u00e9rgete en una metr\u00f3polis futurista donde la tecnolog\u00eda y la humanidad chocan. [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"site-sidebar-layout":"default","site-content-layout":"","ast-site-content-layout":"default","site-content-style":"default","site-sidebar-style":"default","ast-global-header-display":"","ast-banner-title-visibility":"","ast-main-header-display":"","ast-hfb-above-header-display":"","ast-hfb-below-header-display":"","ast-hfb-mobile-header-display":"","site-post-title":"disabled","ast-breadcrumbs-content":"","ast-featured-img":"","footer-sml-layout":"","ast-disable-related-posts":"","theme-transparent-header-meta":"","adv-header-id-meta":"","stick-header-meta":"","header-above-stick-meta":"","header-main-stick-meta":"","header-below-stick-meta":"","astra-migrate-meta-layouts":"default","ast-page-background-enabled":"default","ast-page-background-meta":{"desktop":{"background-color":"var(--ast-global-color-5)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"ast-content-background-meta":{"desktop":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"tablet":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""},"mobile":{"background-color":"var(--ast-global-color-4)","background-image":"","background-repeat":"repeat","background-position":"center center","background-size":"auto","background-attachment":"scroll","background-type":"","background-media":"","overlay-type":"","overlay-color":"","overlay-opacity":"","overlay-gradient":""}},"footnotes":""},"class_list":["post-285","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/crgames.online\/index.php?rest_route=\/wp\/v2\/pages\/285","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/crgames.online\/index.php?rest_route=\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/crgames.online\/index.php?rest_route=\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/crgames.online\/index.php?rest_route=\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/crgames.online\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=285"}],"version-history":[{"count":15,"href":"https:\/\/crgames.online\/index.php?rest_route=\/wp\/v2\/pages\/285\/revisions"}],"predecessor-version":[{"id":323,"href":"https:\/\/crgames.online\/index.php?rest_route=\/wp\/v2\/pages\/285\/revisions\/323"}],"wp:attachment":[{"href":"https:\/\/crgames.online\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=285"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}