/* RUIM 2026 definición de los estilos principales */
:root{
	--navy:#071a2b;
	--navy2:#0d2b43;
	--blue:#177ba8;
	--cyan:#29a8c9;
	--gold:#c9a646;
	--gold2:#e2c66d;
	--white:#fff;
	--off:#f7f9fb;
	--gray:#61717e;
	--line:#dfe6eb;
	--text:#17232d;
	--shadow:0 18px 45px rgba(7,26,43,.10);
	--shadow2:0 28px 70px rgba(7,26,43,.20);
	--radius:18px;
}

*{
	box-sizing:border-box;
	margin:0;
	padding:0}
	
html{
	scroll-behavior:smooth;
	scroll-padding-top:88px
	}
	
body{
	font-family:Outfit,sans-serif;
	color:var(--text);
	background:var(--off);
	line-height:1.7;
	overflow-x:hidden;
	}
a{
	text-decoration:none;
	color:inherit
	}
button{
	font:inherit
	}
code{
	font-family:ui-monospace,monospace;
	font-size:.85em;
	}
	
.container{
	width:min(1180px,calc(100% - 40px));
	margin:auto;
	}

.section{position:relative;
	min-height:100vh;
	padding:80px 0 85px; 
/*	scroll-margin-top: 160px; */
	}

.section-light{
	background:var(--off)}.section-dark{background:var(--navy);
	color:#fff}.light-text{color:rgba(255,255,255,.62)
	}
	
.site-header{
	position:fixed;
	top:0;
	left:0;
	width:100%;
	z-index:1000;
	transition:.3s
	}
.site-header.scrolled{
	background:rgba(7,26,43,.94);
	backdrop-filter:blur(16px);
	box-shadow:0 8px 30px rgba(0,0,0,.15)
	}
	
.navbar{
	height:82px;
	width:min(1280px,calc(100% - 40px));
	margin:auto;
	display:flex;
	align-items:center;
	justify-content:space-between;
	position: sticky;
    top: 0;
    z-index: 1000;
	}
	
.brand{
	display:flex;
	align-items:center;
	gap:11px;
	color:#fff
	}
.brand-mark{
	width:44px;
	height:44px;
	border:1.5px solid var(--gold);
	border-radius:50%;
	display:grid;
	place-items:center;
	font:800 10px Montserrat;
	letter-spacing:1px
	}
.brand-copy{
	display:flex;
	flex-direction:column;
	line-height:1.15
	}
.brand-copy strong{
	font:700 14px Montserrat;
	letter-spacing:1px
	}
.brand-copy small{
	font-size:9px;
	color:rgba(255,255,255,.5);
	margin-top:4px
	}

.nav-menu{
	display:flex;
	align-items:center;
	gap:2px;
	list-style:none
	}
.nav-link{
	position:relative;
	display:block;
	padding:10px 10px;
	color:rgba(255,255,255,.72);
	font-size:11px;
	font-weight:600
	}
.nav-link:after{
	content:"";
	position:absolute;
	left:10px;
	right:10px;
	bottom:3px;
	height:2px;
	background:var(--gold);
	transform:scaleX(0);
	transition:.25s
	}
.nav-link:hover,.nav-link.active{
	color:#fff
	}
.nav-link:hover:after,.nav-link.active:after{
	transform:scaleX(1)
	}
.nav-cta{
	border:1px solid rgba(201,166,70,.6);
	border-radius:7px;
	margin-left:6px
	}
.nav-cta:after{
	display:none
	}

.menu-toggle{
	display:none;
	background:none;
	border:1px solid rgba(255,255,255,.2);
	border-radius:9px;
	padding:10px;
	cursor:pointer
	}
.menu-toggle span{
	display:block;
	width:23px;
	height:2px;
	background:#fff;
	margin:4px;
	transition:.3s
	}
	
.hero{
	min-height:100svh;
	display:flex;
	align-items:center;
	padding:145px 0 100px;
	overflow:hidden
	}
.hero:before{
	content:"";
	position:absolute;
	inset:0;
	background:radial-gradient(circle at 75% 25%,rgba(41,168,201,.18),transparent 32%),linear-gradient(125deg,#061725,#0b405a 58%,#071a2b)
	}
.hero-grid{
	position:absolute;
	inset:0;
	opacity:.13;
	background-image:linear-gradient(rgba(255,255,255,.08) 1px,transparent 1px),linear-gradient(90deg,rgba(255,255,255,.08) 1px,transparent 1px);
	background-size:70px 70px;
	mask-image:linear-gradient(to right,transparent,black,transparent)
	}
	
.crystal{
	position:absolute;
	width:240px;
	height:240px;
	border:1px solid rgba(201,166,70,.18);
	transform:rotate(45deg);
	border-radius:28px
	}
.crystal-a{
	right:-80px;
	top:22%
	}
.crystal-b{
	left:-120px;
	bottom:8%;
	width:320px;height:320px;border-color:rgba(41,168,201,.12)}
.hero-inner{
	position:relative;
	z-index:2;
	display:grid;
	grid-template-columns:minmax(0,1.35fr) minmax(300px,.65fr);
	gap:70px;
	align-items:center
	}

.eyebrow{
	display:inline-block;
	font:700 10px Montserrat;
	letter-spacing:2.5px;
	color:var(--blue);
	margin-bottom:9px
	}
.eyebrow.gold{
	color:var(--gold2)
	}

.edition{
	font:600 12px Montserrat;
	letter-spacing:4px;
	color:var(--gold2);
	margin:15px 0 10px
	}
	
.hero h1{
	font:800 clamp(3.5rem,7.4vw,7rem)/.93 Montserrat;
	letter-spacing:-4px
	}
.hero h1 em{
	font-style:normal;
	color:var(--gold2)
	}
.hero-lead{
	max-width:640px;
	color:rgba(255,255,255,.68);
	font-size:18px;
	margin:25px 0 30px
	}
.hero-actions,.button-row{
	display:flex;
	flex-wrap:wrap;
	gap:11px
	}
	
.btn{
	display:inline-flex;
	align-items:center;
	justify-content:center;
	gap:9px;
	padding:13px 20px;
	border-radius:8px;
	font:700 11px Montserrat;
	transition:.3s
	}
.btn-gold{
	background:var(--gold);
	color:var(--navy)
	}
.btn-gold:hover{
	background:var(--gold2);
	transform:translateY(-3px);
	box-shadow:0 12px 30px rgba(201,166,70,.22)
	}
.btn-ghost{
	border:1px solid rgba(255,255,255,.35);
	color:#fff
	}
.btn-ghost:hover{
	background:#fff;
	color:var(--navy);
	transform:translateY(-3px)
	}
.btn.large{
	padding:16px 26px;
	font-size:12px
	}

.event-meta{
	display:flex;
	flex-wrap:wrap;
	gap:30px;
	margin-top:35px
	}
.event-meta>div{
	display:flex;
	gap:10px;
	align-items:center
	}
.event-meta i{
	color:var(--gold);
	font-size:19px
	}
.event-meta span{
	display:flex;
	flex-direction:column
	}
.event-meta small{
	font:700 8px Montserrat;
	letter-spacing:2px;
	color:rgba(255,255,255,.4)
	}
.event-meta strong{
	font-size:13px;
	font-weight:500
	}
	
.countdown-card{
	padding:27px;
	border:1px solid rgba(255,255,255,.14);
	background:rgba(255,255,255,.04);
	backdrop-filter:blur(12px);
	border-radius:20px;
	box-shadow:var(--shadow2)
	}
.countdown{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:8px;
	margin:25px 0
	}
.countdown div{
	text-align:center;
	padding:14px 4px;
	border:1px solid rgba(255,255,255,.08);
	background:rgba(255,255,255,.03);
	border-radius:10px
	}
.countdown strong{
	display:block;
	font:700 clamp(1.5rem,3vw,2.2rem) Montserrat;
	color:#fff
	}
.countdown span{
	font-size:9px;
	color:rgba(255,255,255,.4);
	text-transform:uppercase;
	letter-spacing:1px
	}
.countdown-card p{
	font-size:11px;
	color:rgba(255,255,255,.42)
	}

.scroll-cue{
	position:absolute;
	bottom:25px;
	left:50%;
	transform:translateX(-50%);
	z-index:2;
	display:flex;
	flex-direction:column;
	align-items:center;
	gap:6px;
	font:600 8px Montserrat;
	letter-spacing:2px;
	color:rgba(255,255,255,.4)
	}
.scroll-cue i{
	color:var(--gold)
	}

.section-heading{
	display:flex;
	gap:22px;
	align-items:flex-start;
	margin-bottom:32px
	}
.section-heading.light h2{
	color:#fff
	}
.section-index{
	font:700 12px Montserrat;
	color:var(--gold);
	padding-top:5px
	}
.section-heading h2{
	font:800 clamp(2rem,4vw,3.5rem)/1.05 Montserrat;
	letter-spacing:-1.5px
	}
.section-lead{
	max-width:760px;
	margin:-8px 0 35px;
	font-size:15px
	}

.about-grid{
	display:grid;
	grid-template-columns:1.05fr .95fr;
	gap:70px;
	align-items:start
	}
.about-main .lead{
	font-size:21px;
	line-height:1.55;
	margin-bottom:20px
	}
.about-main p:not(.lead){
	color:var(--gray);
	margin-bottom:18px
	}
	
.note{
	padding:16px 18px;
	border-left:3px solid var(--gold);
	background:#fff;
	box-shadow:var(--shadow);
	font-size:12px
	}
.note i{
	color:var(--gold);
	margin-right:8px
	}
	
.about-cards{
	display:grid;
	grid-template-columns:repeat(2,1fr);
	gap:16px
	}

.info-card{
	position:relative;
	padding:26px;
	background:#fff;
	border:1px solid var(--line);
	border-radius:var(--radius);
	box-shadow:0 5px 20px rgba(7,26,43,.03);
	transition:.3s
	}
.info-card:hover{
	transform:translateY(-5px);
	box-shadow:var(--shadow)
	}
.info-card:last-child{
	grid-column:1/-1
	}
.info-card i{
	color:var(--blue);
	font-size:22px;
	margin-bottom:16px
	}
.info-card h3{
	font:700 16px Montserrat;
	margin-bottom:7px
	}
.info-card p{
	font-size:12px;
	color:var(--gray)
	}
	
.card-number{
	position:absolute;
	right:16px;
	top:14px;
	font:700 9px Montserrat;
	color:#cfd8de
	}
	
.speaker-grid{
	display:grid;
	grid-template-columns:repeat(4,1fr);
	gap:18px
	}
.speaker-card{
	background:#0d2b43;
	border:1px solid rgba(255,255,255,.09);
	border-radius:16px;
	overflow:hidden;
	transition:.3s
	}
.speaker-card:hover{
	transform:translateY(-7px);
	border-color:rgba(201,166,70,.5);
	box-shadow:var(--shadow2)
	}
.speaker-photo{
	aspect-ratio:4/4.5;
	background:linear-gradient(145deg,#17394e,#0a2538);
	display:grid;
	place-items:center;
	overflow:hidden
	}
.speaker-photo img{
	width:100%;
	height:100%;
	object-fit:cover
	}
.speaker-placeholder{
	font:700 42px Montserrat;
	color:rgba(255,255,255,.15)
	}
.speaker-info{
	padding:19px
	}
.speaker-info .tag{
	font:700 8px Montserrat;
	letter-spacing:1.5px;
	color:var(--gold2)
	}
.speaker-info h3{
	font:700 15px Montserrat;
	line-height:1.3;
	margin:7px 0
	}
.speaker-info p{
	font-size:11px;
	color:rgba(255,255,255,.5);
	min-height:35px
	}
.speaker-info a{
	display:inline-flex;
	gap:7px;
	margin-top:14px;
	color:var(--gold2);
	font-size:10px;
	font-weight:700
	}
.section-toolbar{
	display:flex;
	justify-content:space-between;
	gap:20px;
	align-items:center;
	margin-bottom:28px
	}
.section-toolbar p{
	color:var(--gray);
	font-size:14px
	}
	
.text-link{
	color:var(--blue);
	font-size:11px;
	font-weight:700;
	display:inline-flex;
	align-items:center;
	gap:7px;
	white-space:nowrap
	}
	
.day-tabs{
	display:flex;
	gap:8px;
	margin-bottom:20px;
	flex-wrap:wrap
	}
.day-tab{
	border:1px solid var(--line);
	background:#fff;
	border-radius:50px;
	padding:9px 15px;
	font:700 10px Montserrat;
	color:var(--gray);
	cursor:pointer
	}
.day-tab.active,.day-tab:hover{
	background:var(--navy);
	color:#fff;
	border-color:var(--navy)
	}
	
.program-list{
	border-left:1px solid var(--line);
	margin-left:26px
	}
.program-item{
	position:relative;
	display:grid;
	grid-template-columns:120px 1fr;
	gap:25px;
	padding:20px 20px 20px 35px;
	border-bottom:1px solid var(--line);
	transition:.25s
	}
.program-item:before{
	content:"";
	position:absolute;
	left:-5px;
	top:28px;
	width:9px;
	height:9px;
	border-radius:50%;
	background:#ccd5da;
	border:2px solid var(--off)
	}
.program-item:hover{
	background:#fff;
	box-shadow:var(--shadow)
	}
.program-item:hover:before{
	background:var(--gold)
	}
.program-time{
	font:700 12px Montserrat
	}
.program-content .type{
	font:700 8px Montserrat;
	letter-spacing:1.5px;
	color:var(--blue)
	}
.program-content h3{
	font:700 15px Montserrat;
	line-height:1.4;
	margin:4px 0
	}
.program-content p{
	font-size:12px;
	color:var(--gray)
	}
.program-content small{
	font-size:10px;
	color:#9aa7af
	}
	
.program-item.break{
	background:rgba(201,166,70,.05)
	}
.program-item.featured{
	border-left:3px solid var(--gold)
	}
	
.poster-session-grid{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:20px
	}
	
.session-card{
	padding:27px;
	background:#0d2b43;
	border:1px solid rgba(255,255,255,.1);
	border-radius:18px;
	transition:.3s
	}
.session-card:hover{
	transform:translateY(-6px);
	border-color:rgba(201,166,70,.5)
	}
.session-card .session-code{
	font:700 10px Montserrat;
	color:var(--gold2);
	letter-spacing:2px
	}
.session-card h3{
	font:700 20px Montserrat;
	margin:8px 0
	}
.session-card p{
	font-size:12px;
	color:rgba(255,255,255,.5);
	margin-bottom:20px
	}
.session-card a{
	font-size:11px;
	font-weight:700;
	color:var(--gold2)
	}
	
.course-grid{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:20px
	}

.course-card{
	padding:30px;
	background:#fff;
	border:1px solid var(--line);
	border-radius:18px;
	box-shadow:0 5px 20px rgba(7,26,43,.03);
	transition:.3s
	}
.course-card:hover{
	transform:translateY(-6px);
	box-shadow:var(--shadow)
	}
.course-card i{
	font-size:24px;
	color:var(--blue);
	margin-bottom:18px
	}
.course-card .tag{
	font:700 8px Montserrat;
	letter-spacing:1.5px;
	color:var(--blue)
	}
.course-card h3{
	font:700 18px Montserrat;
	line-height:1.35;
	margin:7px 0 10px
	}
.course-card p{
	font-size:12px;
	color:var(--gray)
	}
.course-card a{
	display:inline-flex;
	margin-top:18px;
	color:var(--blue);
	font-size:11px;
	font-weight:700
	}
	
.poster-layout{
	display:grid;
	grid-template-columns:
	minmax(300px,.8fr) minmax(300px,1fr);
	gap:70px;
	align-items:center
	}
.poster-frame{
	padding:14px;
	background:#0d2b43;
	border-radius:12px;
	box-shadow:var(--shadow2)
	}
.poster-placeholder{
	aspect-ratio:3/4;
	display:grid;
	place-items:center;
	align-content:center;
	gap:8px;
	text-align:center;
	background:linear-gradient(145deg,#17394e,#0a2538);
	color:rgba(255,255,255,.5)
	}
.poster-placeholder i{
	font-size:50px;
	color:var(--gold)
	}
.poster-placeholder strong{
	font:700 18px Montserrat;
	color:#fff
	}
.poster-placeholder span{
	font-size:10px
	}
.poster-copy h3{
	font:800 clamp(2rem,4vw,3.4rem)/1.05 Montserrat;
	margin-bottom:18px
	}
.poster-copy p{
	color:rgba(255,255,255,.6);
	max-width:550px;
	margin-bottom:15px
	}
	
.registration-hero{
	display:flex;
	align-items:center;
	justify-content:space-between;
	gap:30px;
	padding:35px;
	background:#fff;
	border:1px solid var(--line);
	border-radius:20px;
	box-shadow:var(--shadow);
	margin-bottom:25px
	}
.registration-hero h3{
	font:800 clamp(2rem,4vw,3.3rem) Montserrat;
	line-height:1.05;
	margin:6px 0 10px
	}
.registration-hero p{
	color:var(--gray);
	max-width:650px;
	font-size:13px
	}
.registration-grid{
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:18px
	}
.registration-card{
	padding:28px;
	background:#fff;
	border:1px solid var(--line);
	border-radius:17px;
	transition:.3s
	}
.registration-card:hover{
	transform:translateY(-5px);
	box-shadow:var(--shadow)
	}
.registration-card i{
	font-size:23px;
	color:var(--blue);
	margin-bottom:15px
	}
.registration-card h3{
	font:700 17px Montserrat;
	margin-bottom:8px
	}
.registration-card p{
	font-size:12px;
	color:var(--gray);
	margin-bottom:18px
	}
.registration-card a{
	font-size:11px;
	color:var(--blue);
	font-weight:700
	}

.contact-section{
	background:var(--navy);
	color:#fff;
	overflow:hidden
	}
.contact-pattern{
	position:absolute;
	inset:0;
	background:radial-gradient(circle at 80% 20%,rgba(41,168,201,.16),transparent 32%),radial-gradient(circle at 20% 80%,rgba(201,166,70,.09),transparent 30%)
	}
.contact-grid{
	position:relative;
	display:grid;
	grid-template-columns:1fr 1fr;
	gap:60px;
	align-items:center;
	margin:45px 0
	}
.contact-grid h3{
	font:800 clamp(2rem,4vw,3.5rem)/1.05 Montserrat
	}
.contact-grid p{
	color:rgba(255,255,255,.58);
	max-width:520px;
	margin-top:15px
	}

.email-card{
	padding:30px;
	border:1px solid rgba(255,255,255,.13);
	border-radius:16px;
	background:rgba(255,255,255,.035);
	transition:.3s
	}
.email-card:hover{
	border-color:var(--gold);
	transform:translateY(-5px)
	}
.email-card small{
	display:block;
	font:700 8px Montserrat;
	letter-spacing:2px;
	color:rgba(255,255,255,.35)
	}
.email-card strong{
	display:block;
	font:700 clamp(1.3rem,3vw,2rem) Montserrat;
	color:var(--gold2);
	margin-top:6px
	}
.email-card i{
	float:right;
	color:var(--gold);
	margin-top:-25px
	}

.institution-grid{
	position:relative;
	display:grid;
	grid-template-columns:repeat(3,1fr);
	gap:20px;
	padding-top:30px;
	border-top:1px solid rgba(255,255,255,.1)
	}
.institution-grid>div{
	display:grid;
	grid-template-columns:auto 1fr;
	column-gap:12px
	}
.institution-grid i{
	grid-row:span 2;
	color:var(--gold);
	margin-top:4px
	}
.institution-grid strong{
	font-size:11px
	}
.institution-grid span{
	font-size:9px;
	color:rgba(255,255,255,.4)
	}
	
.back-top{
	display:flex;
	justify-content:center;
	margin-top:65px
	}
.back-top a{
	display:inline-flex;
	gap:8px;align-items:center;
	padding:9px 15px;
	border:1px solid var(--line);
	border-radius:50px;
	font-size:10px;
	color:var(--gray);
	transition:.3s
	}
.back-top a:hover{
	border-color:var(--gold);
	transform:translateY(-2px)
	}
.back-top.dark a{
	border-color:rgba(255,255,255,.15);
	color:rgba(255,255,255,.55)
	}
.back-top.dark a:hover{
	border-color:var(--gold);
	color:#fff
	}
	
.footer{
	background:#04111d;
	color:#fff;
	padding:40px 0
	}
.footer-grid{
	display:grid;
	grid-template-columns:1.1fr 1.5fr 1fr;
	gap:35px;
	align-items:center
	}
.footer nav{
	display:flex;
	flex-wrap:wrap;
	gap:10px 18px
	}
.footer nav a{
	font-size:10px;
	color:rgba(255,255,255,.45)
	}
.footer nav a:hover{
	color:var(--gold)
	}
.footer p{
	text-align:right;
	font-size:9px;
	color:rgba(255,255,255,.3)
	}
	
.floating-top{
	position:fixed;
	right:18px;
	bottom:18px;
	width:42px;
	height:42px;
	display:grid;
	place-items:center;
	border-radius:50%;
	background:var(--gold);
	color:var(--navy);
	z-index:900;
	opacity:0;
	visibility:hidden;
	transform:translateY(10px);
	transition:.3s;
	box-shadow:0 10px 30px rgba(0,0,0,.22)
	}
.floating-top.visible{
	opacity:1;
	visibility:visible;
	transform:none
	}
.floating-top:hover{
	transform:translateY(-3px)
	}

@media (prefers-reduced-motion:reduce){
	html{scroll-behavior:auto}*{animation-duration:.01ms!important;
	transition-duration:.01ms!important}
	}
@media (max-width: 768px) {
    .ruim-banner {
        width: 100%;
    }
    .ruim-banner img {
        width: 100%;
        height: auto;
        max-width: none;
    }
}

/* =====================================================
   BANNER PRINCIPAL RUIM 2026
   Imagen original: 1600 x 396 px
   ===================================================== */

.ruim-banner {
    width: 100%;
    margin: 0;
    padding: 0;
    background: #071d3a;
    overflow: hidden;
    line-height: 0;
	}
.ruim-banner img {
    display: block;
    width: 100%;
    height: auto;
    max-width: 1600px;
    margin: 0 auto;
	}
	
/* Banner Superior Fijo y Ajustable */
.banner-container {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	height: 150px; /* Aquí se ajusta la altura del banner */
	z-index: 1000;
	background-color: #333;
	overflow: hidden;
}

.banner-container img {
	width: 100%;
	height: 100%;
	object-fit: cover; /* Asegura que la imagen se adapte sin deformarse */
	display: block;
}