/*  ========================================
        Copyright ©2024-2025 Riot Rabbit.
        All Rights Reserved. 
    ========================================  */

/*Colores*/
:root {
  --azul-base: #0A1128;
  --azul-panel: #0D1A3D;
  --rr-golden: #E8C774;
  --dorado-apagado: #C9A24A;
}

/* Mantenemos la base de normalize y configuración inicial */
*{margin: 0; padding: 0; box-sizing: border-box;}
html{box-sizing:border-box}*,*:before,*:after{box-sizing:inherit}
html{-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%}body{margin:0}
html,body{font-family: Verdana, sans-serif; font-size: 16px; line-height: 1.5; overflow-x: hidden;}
h1,h2,h3,h4,h5,h6{ font-family:"Segoe UI",Arial,sans-serif;font-weight:400; margin:10px 0}
html::-webkit-scrollbar {display: none;} html{ -ms-overflow-style: none; scrollbar-width: none;}

.rr-grid {display: grid; gap: 1rem; width: 100%;}
        
/* Spans de filas */
.rr-row-1 {grid-row: span 1;}.rr-row-2{grid-row: span 2;}.rr-row-3{grid-row: span 3;}

 /* Layout de página con Grid Areas */
.page-layout {display: grid; min-height: 100vh; grid-template-columns: 1fr; grid-template-rows: auto 1fr auto; grid-template-areas: "header" "main" "footer";}

.rr-header-area {grid-area: header;}
.rr-main-area {grid-area: main;}
.rr-footer-area {grid-area: footer;}
.rr-sidebar-area {grid-area: sidebar;}

/* Layout con sidebar */
.rr-sidebar-layout { display: grid; min-height: 100vh; grid-template-columns: 250px 1fr; grid-template-rows: auto 1fr auto; grid-template-areas:  "header header" "sidebar main" "footer footer";}

/* Header con grid */
.header-area {grid-area: header; position: fixed; top: 0; left: 0; right: 0; z-index: 999; background: #000; box-shadow: 0 2px 5px rgba(0,0,0,0.1);}

.rr-bar-left { justify-self: start; }
.rr-bar-center { justify-self: center; }
.rr-bar-right { justify-self: end; }

/* Navegación principal con grid */
.nav-grid {display: grid; grid-template-columns: auto 1fr auto; align-items: center; padding: 0 1rem; min-height: 60px; max-width: 1200px; margin: 0 auto;}
.nav-left {justify-self: start;}
.nav-center {justify-self: center; display: grid; grid-auto-flow: column; gap: 0; align-items: center;}
.nav-right {justify-self: end; display: grid; grid-auto-flow: column; gap: 1rem; align-items: center;}

/* Botones y enlaces */
.nav-btn {background: transparent; border: none; color: white; padding: 1rem 18px; text-decoration: none; cursor: pointer; transition: all 0.3s ease; font-size: 14px; font-weight: 500; letter-spacing: 1px;}
.nav-btn:hover {background-color: #333; color: white; border-radius: 0.5rem;}
.logo-btn {font-weight: bold; font-size: 18px; letter-spacing: 2px;}

/* Dropdown con grid */
.dropdown-container { position: relative;}
.dropdown-content { position: absolute; top: 100%; right: 0; background: white; min-width: 200px; box-shadow: 0 0.5rem 1rem rgba(0,0,0,0.2); border-radius: 0.5rem; opacity: 0; visibility: hidden; transform: translateY(-10px); transition: all 0.3s ease; }
.dropdown-container:hover .dropdown-content { opacity: 1; visibility: visible; transform: translateY(0);}
.dropdown-content .nav-btn { color: #000; display: block; text-align: left;padding: 12px 1rem;}
.dropdown-content .nav-btn:hover { background-color: #f1f1f1;}

/* Redes sociales */
.social-container {display: grid; grid-auto-flow: column; gap: 12px; align-items: center;}
.rr-icon,.social-icon { width: 32px; height: 32px; background-size: contain; background-repeat: no-repeat; background-position: center; border-radius: 20%; transition: opacity 0.3s ease; text-indent: -9999px; overflow: hidden; }
.rr-icon,.social-icon:hover { opacity: 0.6; }

.social-icon.twitter {background-image: url('/assets/icon/x-twitter.svg'); background-color: #fff;}
.social-icon.mastodon {background-image: url('/assets/icon/mastodon.svg'); background-color: #fff;}
.social-icon.itch-io {background-image: url('/assets/icon/itch-io.svg'); background-color: #fff;}
.social-icon.patreon {background-image: url('/assets/icon/patreon.svg'); background-color: #fff;}
.social-icon.youtube {background-image: url('/assets/icon/youtube.svg'); background-color: #fff;}
.social-icon.twitch {background-image: url('/assets/icon/twitch.svg'); background-color: #fff;}
.social-icon.reddit {background-image: url('/assets/icon/reddit.svg'); background-color: #fff;}

.rr-icon.volume {background-image: url('/assets/icon/volume.svg'); background-color: #fff;}

/* Menú móvil */
.mobile-menu {display: none; position: fixed; top: 60px; left: 0; right: 0; background: #000; z-index: 998; padding-top: 20px 0;}
.mobile-menu.show {display: block;}
.mobile-nav-grid {display: grid; gap: 0;}
.mobile-social {display: grid; grid-auto-flow: column; gap: 1rem; justify-content: center; padding: 20px; border-top: 1px solid #333; margin-top: 20px;}
.mobile-padding{padding-left: 2rem;}

/* Main content con grid */
.main-area {grid-area: main; margin-top: 60px;}
.section {
  padding: 3rem 1rem;
  background-image:
    radial-gradient(50% 50% at 50% 50%, #D4E4F099 7%, #22457300 100%),
    radial-gradient(70% 70% at 100% 1%, #39668CFF 7%, #22457300 100%),
    radial-gradient(70% 70% at 1% 1%, #5C4D8C4D 7%, #22457300 100%),
    radial-gradient(70% 70% at 1% 100%, #39668CFF 7%, #22457300 100%),
    radial-gradient(70% 70% at 100% 100%, #5C4D8C33 7%, #22457300 100%),
    linear-gradient(125deg, #224573FF 0%, #224573FF 100%);
  background-attachment: fixed;
}

/* Hero section */
.hero-section {position: relative; height: 60vh; min-height: 400px; display: grid; place-items: center; overflow: hidden; }
.hero-image {position: absolute; top: 0; left: 0; width: 100%; height: 100%; object-fit: cover; z-index: -1; }
.hero-content {background: rgba(0,0,0,0.3); color: white; padding: 2rem; border-radius: 0.5rem; text-align: center; max-width: 800px; backdrop-filter: blur(10px);}

/* Content sections con grid */
.video-container{max-width: 1000px; margin: 0 auto; text-align: center;}
.small-container{max-width: 800px; margin: 0 auto; text-align: center;}
.general-container{display: grid; gap: 2rem; max-width: 1200px; min-height: 800px; margin: 0 auto;}
.wide-container{display: grid; gap: 2rem; max-width: 1400px; min-height: 800px; margin: 0 auto;}

/* Reproductor personalizado */
.custom-player { position: relative; width: 100%; max-width: 960px; max-height: 540px; background: #000; border-radius: 0.5rem; overflow: hidden; margin: 0 auto;}     
.custom-video { width: 100%; min-height: auto; display: block;}
.custom-controls { position: absolute; bottom: 0; left: 0; right: 0; background: linear-gradient(transparent, rgba(0,0,0,0.7)); padding: 15px; display: flex; align-items: center; gap: 10px; opacity: 0; transition: opacity 0.3s ease;}
.custom-player:hover .custom-controls { opacity: 1;}

.play-btn { background: #ff4757; border: none; color: white; padding: 0.5rem 20px; border-radius: 4px; cursor: pointer; font-size: 24px; transition: background-color 0.3s ease;}
.play-btn:hover { background: #ff3742;}

.progress-container { flex: 1; height: 6px; background: rgba(255,255,255,0.3); border-radius: 3px; cursor: pointer; position: relative;}
.progress-bar { height: 100%; background: #ff4757; border-radius: 3px; width: 0%; transition: width 0.1s ease;}
.time-display { color: white; font-size: 12px; min-width: 80px; text-align: center;}

.volume-container { display: flex; align-items: center; gap: 5px;}
.volume-slider { width: 60px;}
        
.fullscreen-btn { background: none; border: none; color: white; cursor: pointer; font-size: 1rem; padding: 5px;}

/* Botón de play centrado */
.center-play-btn { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0, 0, 0, 0.7); border: none; border-radius: 50%; width: 80px; height: 80px; 
cursor: pointer; display: flex; align-items: center; justify-content: center; transition: all 0.3s ease; backdrop-filter: blur(10px); box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);}       
.center-play-btn:hover { background: rgba(255, 71, 87, 0.8); transform: translate(-50%, -50%) scale(1.1); box-shadow: 0 6px 25px rgba(255, 71, 87, 0.4);}
.center-play-btn svg { width: 32px; height: 32px; fill: white; margin-left: 4px;}
.center-play-btn.hidden { opacity: 0; pointer-events: none;}

/* FOOTER CON GRID */
.footer-area {grid-area: footer; background: #000; color: white; padding: 2rem 1rem; text-align: center;}
.footer-content {display: grid; gap: 1rem; max-width: 800px; margin: 0 auto;}
.footer-social {display: grid; grid-auto-flow: column; gap: 1rem; justify-content: center; margin-bottom: 1rem; }

/* Hamburger menu */
.hamburger {display: none; background: none; border: none; color: white; font-size: 1.5rem; cursor: pointer; padding: 10px;}

.title-large {font-size: 2rem; margin-bottom: 1rem; letter-spacing: 3px;}
.title-regular {font-size: 1.5rem; margin-bottom: 1rem; letter-spacing: 3px;}
.title-small {font-size: 1.3rem; margin-bottom: 0.5rem; letter-spacing: 2px; font-weight: 500;}
.subtitle {font-style: italic; opacity: 0.8; margin-bottom: 1.5rem;}
.text-justify {  text-align: justify; text-justify: inter-word; text-align-last: left; hyphens: auto; -webkit-hyphens: auto; -moz-hyphens: auto; word-spacing: normal; letter-spacing: 0.01em; line-height: 1.6;}
.text-center {text-align: center;}

.text-size-15{font-size: 15px;}

.arrow-down { display: inline-block; margin-left: 0.5rem; border: solid currentColor; border-width: 0 2px 2px 0; padding: 3px; transform: rotate(45deg);}

/* Botones y enlaces */
.rr-btn {border: none; color: white; padding: 1rem 18px; border-radius: 0.5rem; text-decoration: none; cursor: pointer; transition: all 0.3s ease; font-size: 14px; font-weight: 500; letter-spacing: 1px;}
.rr-btn:hover {color: white; border-radius: 0.5rem;}

/*Grid Cards*/
.cards-grid {display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); grid-auto-rows: 250px; gap: 20px; margin-bottom: 40px;}
.card {border-radius: 0.6rem; border: 0.3rem solid var(--dorado-apagado); padding: 2rem; box-shadow: 0 8px 32px rgba(0,0,0,0.1); transition: all 0.3s ease; display: flex; flex-direction: column; justify-content: center; position: relative; overflow: hidden;}

.card-tall {grid-row: span 2;}
.card-wide {grid-column: span 2;}
.card-large {grid-column: span 2; grid-row: span 2;}
.card-Xlarge {grid-column: span 2; grid-row: span 3;}

.card-product { width: 1000px; height: 600px; margin: auto; background: white; border-radius: 0.5rem; box-shadow: 0 20px 60px rgba(0,0,0,0.2); overflow: hidden; display: grid; grid-template-columns: 400px 1fr; transition: all 0.3s ease;}
.card-image-box{ width: 400px; height: 600px; position: relative; overflow: hidden; }
.card-image{width: 100%; height: 100%; object-fit: cover; transition: transform 0.3s ease;}
.card-information { padding: 20px; display: flex; flex-direction: column; justify-content: space-between; height: 600px;}
.card-tech-specs {background: #f8f9fa; border-radius: 0.5rem; padding: 0.5rem 1.5rem; margin-bottom: 15px;}
.card-specs-grid {display: grid;grid-template-columns: repeat(2, 1fr);gap: 12px;}
.card-spec-item {display: flex; justify-content: space-between; padding: 0.5rem 0; border-bottom: 1px solid #e9ecef;}
.card-synopsis {background: #fff; border-radius: 0.5rem; padding: 1.5rem; margin-bottom: 15px; border: 2px solid #f1f3f4; flex-grow: 1;}


/* Utilidades de padding*/
.rr-padding-16{padding:1rem 0.5rem!important;}
.rr-padding-32{padding:2rem 0.5rem!important;}
.rr-padding-64{padding:3rem 0.5rem!important;}

/* Utilidades de alineación para grid */
.rr-grid-center {place-items: center;}
.rr-grid-start {place-items: start;}
.rr-grid-end {place-items: end;}
.rr-grid-stretch {place-items: stretch;}
        
/* Gaps personalizados */
.rr-gap-small {gap: 0.5rem;}
.rr-gap-medium {gap: 1rem;}
.rr-gap-large {gap: 2rem;}

.about-social{display: flex; flex-wrap: wrap; max-width: 300px; gap: 1rem; justify-content: center; margin:auto; }

/* Fix para mantener compatibilidad */
.clearfix::after {content: ""; display: table;clear: both;}

/* RESPONSIVE GRID BREAKPOINTS */
       
/* Mobile first */
@media (max-width: 600px) {
    .rr-grid-sm-1 { grid-template-columns: 1fr; }
    .rr-grid-sm-2 { grid-template-columns: repeat(2, 1fr); }
                
    .rr-sidebar-layout {grid-template-columns: 1fr; grid-template-areas: "header" "main" "sidebar" "footer";}    
    .rr-bar-grid {grid-template-columns: 1fr; text-align: center; gap: 0.5rem;}
                
    .rr-nav-grid { grid-auto-flow: row; justify-content: stretch; }
}
        
/* Tablet */
@media (max-width: 992px) {

    .custom-controls { padding: 10px; gap: 0.5rem;}       
    .time-display { min-width: 60px; font-size: 11px;}   
    .volume-container { display: none;}
    .social-icon{height: 40px; width: 40px;}

    .play-btn { padding: 0.5rem 1rem; border-radius: 4px; font-size: 18px;}         
    .nav-center,.nav-right .social-container {display: none;}
    .hamburger {display: block;}
    .nav-grid {grid-template-columns: 1fr auto; padding: 0 1rem;}

    .hero-section {height: 50vh; min-height: 300px;}
    .hero-content {padding: 1.5rem; border-radius: 0px;}

    .section {padding: 1rem 0rem;}
    .small-container{padding: 1.5rem;}
    .rr-hide-small{display:none!important}
    .social-container {display: none;}
    .about-social{max-width: 300px;}

    .rr-display-container { height: 400px;}
    .mobile-menu.show {display: block;}

    .cards-grid { grid-template-columns: 1fr; grid-auto-rows: 130px;}
    .card {grid-column: span 1; grid-row: span 2;}
    .card-large {grid-column: span 1; grid-row: span 4;}
    .card-Xlarge { grid-column: span 1; grid-row: span 6;}
    
    .card-product{width: 100%; max-width: 1000px; height: auto; grid-template-columns: 1fr;grid-template-rows: 500px auto;}
    .card-image-box { width: 100%; height: 500px;}
    .card-information { height: auto; padding: 1rem;}
    .card-specs-grid { grid-template-columns: 1fr;}
    .card-tech-specs,.card-synopsis {padding: 20px;}
}
        
/* Desktop */
@media (min-width: 993px) {
    
    .rr-hide-large{display:none!important}
    .rr-hide-medium{display:none!important}
    .mobile-menu.show {display: none;}
    .about-social{max-width: 100%;}
}

/*Colors:*/
.rr-white{color:#000!important;background-color:#ffffff!important}
.rr-black{color:#fff!important;background-color:#000!important}
.rr-golden{color:#fff!important;background-color:#E8C774!important}
.rr-light-grey{color:#000!important;background-color:#f1f1f1!important}
.rr-dark-grey{color:#000!important;background-color:#909090!important}
.rr-light-blue{color:#fff!important;background-color:#132552!important}
.rr-medium-blue{color:#fff!important;background-color:#0D1A3D!important}
.rr-dark-blue{color:#000!important;background-color:#0A1128!important} 
.rr-bermillion{color:#fff!important;background-color:#E62E00!important}
.rr-bermillion:hover{color:#fff!important;background-color:#A63012!important}