/* =============================
   RISINGOS — estilos propios
   Se carga DESPUÉS de styles.css
   Reusa clases del sitio (.reveal, .service-card,
   .services-grid, .planes-slider, .btn-primary, etc.)
   ============================= */

/* ---------- HERO RisingOS (mismo esqueleto que .hero, otro fondo) ---------- */

.os-hero{
background-image:
linear-gradient(
rgba(20,22,26,0.72),
rgba(20,22,26,0.8)
),
radial-gradient(circle at 30% 20%, rgba(255,106,61,0.2), transparent 60%),
url("/img/risingos/screenshots/desktop_hero.png");
background-color:#20232a;
background-size:cover;
background-position:center;
}

.os-logo{
height:96px;
margin-bottom:32px;
filter:drop-shadow(0 0 24px rgba(255,106,61,0.45));
}

@media (max-width:768px){
.os-logo{
height:72px;
}
}

.os-hero h1{
background:linear-gradient(90deg,#ffffff,#ff6a3d);
-webkit-background-clip:text;
-webkit-text-fill-color:transparent;
}

/* ---------- BADGE "Próximamente" ---------- */

.os-badge{
display:inline-block;
font-size:0.75rem;
font-weight:600;
letter-spacing:0.5px;
color:#ff6a3d;
background:rgba(255,106,61,0.12);
border:1px solid rgba(255,106,61,0.35);
padding:4px 10px;
border-radius:20px;
margin-bottom:12px;
}

/* ---------- ECOSISTEMA (variante de service-card) ---------- */

.os-ecosystem .services-grid{
grid-template-columns:repeat(auto-fit, minmax(260px, 1fr));
}

.os-ecosystem .service-card.upcoming{
opacity:0.85;
}

/* ---------- CAPTURAS: grid + lightbox ---------- */

.os-showcase{
padding:120px 20px;
background:#f7f7f9;
text-align:center;
}

.os-gallery{
max-width:1100px;
margin:50px auto 0;
display:grid;
grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
gap:24px;
}

.os-gallery-item{
position:relative;
border-radius:14px;
overflow:hidden;
cursor:pointer;
background:#20232a;
aspect-ratio:16/10;
box-shadow:0 15px 35px rgba(0,0,0,0.1);
transition:transform 0.3s ease, box-shadow 0.3s ease;
}

.os-gallery-item:hover{
transform:translateY(-6px);
box-shadow:0 20px 40px rgba(0,0,0,0.18);
}

.os-gallery-item img{
width:100%;
height:100%;
object-fit:contain;
display:block;
}

.os-gallery-caption{
position:absolute;
left:0;
bottom:0;
width:100%;
padding:10px 14px;
font-size:0.9rem;
font-weight:600;
color:#fff;
text-align:left;
background:linear-gradient(to top, rgba(0,0,0,0.65), transparent);
}

/* ---------- LIGHTBOX ---------- */

.os-lightbox{
display:none;
position:fixed;
inset:0;
z-index:999;
background:rgba(10,11,13,0.92);
align-items:center;
justify-content:center;
flex-direction:column;
padding:40px;
}

.os-lightbox.active{
display:flex;
}

.os-lightbox img{
max-width:88vw;
max-height:78vh;
object-fit:contain;
border-radius:10px;
}

.os-lightbox-caption{
color:#fff;
margin-top:18px;
font-size:1.05rem;
}

.os-lightbox-close,
.os-lightbox-prev,
.os-lightbox-next{
position:absolute;
background:rgba(255,255,255,0.08);
border:none;
color:#fff;
cursor:pointer;
border-radius:50%;
transition:background 0.2s ease;
}

.os-lightbox-close:hover,
.os-lightbox-prev:hover,
.os-lightbox-next:hover{
background:rgba(255,106,61,0.55);
}

.os-lightbox-close{
top:24px;
right:24px;
width:44px;
height:44px;
font-size:1.6rem;
line-height:1;
}

.os-lightbox-prev,
.os-lightbox-next{
top:50%;
transform:translateY(-50%);
width:52px;
height:52px;
font-size:1.3rem;
}

.os-lightbox-prev{ left:24px; }
.os-lightbox-next{ right:24px; }

/* ---------- SPECS ---------- */

.os-specs{
padding:120px 20px;
background:#ffffff;
}

.os-specs-container{
max-width:900px;
margin:0 auto;
text-align:center;
}

.os-specs-table{
width:100%;
border-collapse:collapse;
margin:50px 0 30px;
text-align:left;
box-shadow:0 15px 35px rgba(0,0,0,0.08);
border-radius:14px;
overflow:hidden;
}

.os-specs-table th,
.os-specs-table td{
padding:18px 24px;
border-bottom:1px solid #eef0f3;
}

.os-specs-table th{
background:#f7f7f9;
width:40%;
font-weight:600;
}

.os-specs-table tr:last-child th,
.os-specs-table tr:last-child td{
border-bottom:none;
}

.os-specs-note{
font-size:0.95rem;
color:#4b5563;
margin-top:10px;
}

.os-specs-note a{
color:#ff6a3d;
font-weight:600;
text-decoration:none;
}

.os-specs-note a:hover{
text-decoration:underline;
}

.os-hash{
margin-top:24px;
font-size:0.85rem;
color:#6b7280;
line-height:1.6;
}

.os-hash code{
font-family:"Courier New", monospace;
background:#f1f2f5;
padding:2px 6px;
border-radius:4px;
word-break:break-all;
}

.os-download-cta{
margin-top:40px;
}

/* ---------- COMUNIDAD (solo ícono GitHub) ---------- */

.os-community{
padding:80px 20px 120px;
background:#ffffff;
text-align:center;
}

.os-community a{
display:inline-flex;
align-items:center;
justify-content:center;
width:64px;
height:64px;
border-radius:50%;
background:#111;
color:white;
transition:transform 0.3s ease, box-shadow 0.3s ease;
}

.os-community a:hover{
transform:translateY(-4px);
box-shadow:0 12px 25px rgba(0,0,0,0.2);
}

.os-community svg{
width:30px;
height:30px;
}

/* ---------- RESPONSIVE ---------- */

@media (max-width:768px){

.os-specs-table th,
.os-specs-table td{
padding:14px 16px;
font-size:0.9rem;
}

.os-lightbox-prev,
.os-lightbox-next{
width:40px;
height:40px;
font-size:1.1rem;
}

.os-lightbox-prev{ left:10px; }
.os-lightbox-next{ right:10px; }
.os-lightbox-close{ top:10px; right:10px; }

}