/*
	index.css
	Origen general: estilos base estructurales de la portada principal.
	Nota: los efectos visuales/animaciones viven en assets/css/effects.css.
*/

/* Origen: base visual global definida para la landing principal. */
body{margin:0;font-family:'Orbitron',sans-serif;background:#05040c;color:white;overflow-x:hidden;overflow-y:auto;min-height:100vh;display:block;}

/* HEADER - Origen: cabecera fija que contiene el logo animado (logo.css / logo.js). */
header{position:fixed;top:0;left:0;right:0;display:flex;justify-content:center;align-items:center;padding:30px 40px 20px;z-index:10;}
.top-logo{display:flex;justify-content:center;align-items:center;}

/* HERO - Origen: bloque central del index. */
.hero{position:absolute;top:44%;left:50%;transform:translate(-50%,-50%);width:100%;display:flex;justify-content:center;align-items:center;text-align:center;padding:40px 20px;overflow:hidden;min-height:auto;}
.hero-content{max-width:800px;position:relative;z-index:2;}
.hero h1{font-size:64px;margin-bottom:18px;line-height:1.02;}
.hero p{font-size:1.2rem;color:#cbd5e1;margin-bottom:0;}

/* MENU CARDS - Origen: navegacion principal por tarjetas expandibles del menu. */
.menu-cards{position:absolute;bottom:18px;left:50%;transform:translateX(-50%);display:flex;flex-direction:row;flex-wrap:nowrap;justify-content:center;align-items:flex-end;gap:18px;padding:0 20px 18px;max-width:1400px;margin:0 auto;width:100%;overflow-x:auto;scrollbar-width:none;}
.menu-cards::-webkit-scrollbar{display:none;}
.menu-card{background:rgba(4,16,36,0.82);border:1px solid rgba(0,200,255,0.32);border-radius:28px;padding:18px 18px 16px;backdrop-filter:blur(24px);box-shadow:0 20px 60px rgba(0,80,150,0.24), inset 0 0 0.5px rgba(255,255,255,0.08);color:white;transition:width 0.45s ease,transform 0.45s ease,box-shadow 0.45s ease,background 0.45s ease;display:flex;flex-direction:column;align-items:flex-start;text-align:left;position:relative;width:150px;min-height:120px;overflow:hidden;}
.menu-card::before{content:'';position:absolute;inset:0;border-radius:28px;padding:1px;background:linear-gradient(180deg,rgba(0,255,255,0.28),rgba(0,160,255,0.15));mask:linear-gradient(#fff 0 0);
pointer-events:none;}
.menu-card::after{content:'';position:absolute;inset:0;border-radius:28px;box-shadow:0 0 40px rgba(0,210,255,0.18), inset 0 0 25px rgba(0,210,255,0.06);opacity:0;transition:opacity 0.45s ease;pointer-events:none;}
.menu-card:hover,.menu-card.expanded{width:320px;transform:translateY(-6px);box-shadow:0 26px 90px rgba(0,95,175,0.28), inset 0 0 1px rgba(255,255,255,0.06);background:rgba(2,12,28,0.92);}
.menu-card:hover::after,.menu-card.expanded::after{opacity:1;}
.card-header{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;width:100%;z-index:1;}
.card-icon{width:56px;height:56px;display:flex;align-items:center;justify-content:center;border-radius:18px;background:rgba(2,50,95,0.55);box-shadow:0 0 18px rgba(0,220,255,0.22), inset 0 0 0.5px rgba(255,255,255,0.12);border:1px solid rgba(0,210,255,0.38);overflow:hidden;}
.card-icon img{width:30px;height:30px;object-fit:contain;filter:drop-shadow(0 0 4px rgba(0,220,255,0.45));}
.menu-card h3{margin:0;font-size:1rem;color:#e8f9ff;text-shadow:0 0 14px rgba(0,210,255,0.16);line-height:1.2;text-align:center;}
.submenu{opacity:0;max-height:0;overflow:hidden;transition:max-height 0.45s ease,opacity 0.45s ease,padding 0.45s ease,margin-top 0.45s ease;width:100%;margin-top:0;padding:0;}
.menu-card:hover .submenu,.menu-card.expanded .submenu{opacity:1;max-height:260px;padding-top:16px;margin-top:10px;}
.submenu a{display:block;color:#c7e8ff;text-decoration:none;padding:9px 0 8px 18px;font-size:0.95rem;position:relative;}
.submenu a::before{content:'';position:absolute;left:4px;top:50%;transform:translateY(-50%);width:6px;height:6px;border-radius:2px;background:#40c7ff;}
.submenu a:hover{color:#7dd3fc;}

/* RESPONSIVE INDEX - Tablet */
@media (max-width:1024px){
	header{padding:22px 24px 14px;}
	.hero{top:42%;padding:26px 16px;}
	.hero-content{max-width:680px;}
	.menu-cards{gap:14px;padding:0 14px 14px;}
	.menu-card{width:140px;min-height:114px;padding:16px 14px 14px;}
	.menu-card:hover,.menu-card.expanded{width:280px;}
	.submenu a{font-size:.9rem;padding:8px 0 8px 16px;}
}

/* RESPONSIVE INDEX - Mobile */
@media (max-width:768px){
	header{padding:16px 12px 10px;}
	.hero{position:relative;top:auto;left:auto;transform:none;padding:124px 14px 14px;}
	.hero-content{max-width:100%;}
	.menu-cards{position:relative;left:auto;bottom:auto;transform:none;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;padding:8px 12px 18px;align-items:start;justify-content:stretch;max-width:100%;overflow:visible;}
	.menu-card{width:auto;min-width:0;min-height:96px;padding:14px 12px 12px;border-radius:20px;}
	.menu-card::before,.menu-card::after{border-radius:20px;}
	.menu-card:hover,.menu-card.expanded{width:auto;transform:translateY(-1px);}
	.card-icon{width:50px;height:50px;border-radius:14px;}
	.card-icon img{width:26px;height:26px;}
	.menu-card h3{font-size:.95rem;}
	.menu-card:hover .submenu,.menu-card.expanded .submenu{max-height:320px;padding-top:12px;margin-top:8px;}
	.submenu a{font-size:.88rem;padding:8px 0 7px 15px;}
}

/* RESPONSIVE INDEX - Small Mobile */
@media (max-width:480px){
	.hero{padding-top:110px;}
	.menu-cards{grid-template-columns:1fr;padding:6px 10px 16px;}
	.menu-card{padding:12px 12px 10px;}
}