:root {
    --primary-green: #2AF598;
    --secondary-blue: #009EFD;
    --accent-pink: #F85B78;
    --bg-dark-1: #1D2671;
    --bg-dark-2: #0d1137;
    --text-light: #F5F5F5;
    --text-dark: #333;
    --glass-bg: rgba(255, 255, 255, 0.05);
    --glass-border: rgba(255, 255, 255, 0.15);
    --header-height: 70px;
}

* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

html {
    scroll-behavior: smooth;
}

body {
    font-family: 'Poppins', sans-serif;
    color: var(--text-light);
    background-color: var(--bg-dark-2);
    text-shadow: 0 1px 3px rgba(0, 0, 0, 0.4);
    overflow-x: hidden;
}

/* --- Contenedor Parallax y Capas --- */
#parallax-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

#stars-background {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at bottom, var(--bg-dark-1) 0%, var(--bg-dark-2) 100%);
    z-index: -2;
}

#particles-foreground {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-image: 
        radial-gradient(circle at center, rgba(42, 245, 152, 0.1) 1px, transparent 1px),
        radial-gradient(circle at center, rgba(0, 158, 253, 0.1) 1px, transparent 1px);
    background-size: 50px 50px, 80px 80px;
    animation: float 20s linear infinite;
    z-index: -1;
}

@keyframes float {
    from { transform: translateY(0); }
    to { transform: translateY(-100vh); }
}

/* --- Header y Navegación --- */
header {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    z-index: 1000;
    background: rgba(34, 100, 241, 0);
    backdrop-filter: blur(10px);
  
}

nav {
    display: flex;
    justify-content: space-between;
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 2rem;
    height: var(--header-height);
}

nav h1 {
  font-size: 1.8rem;
  font-weight: 700;
  color: var(--primary-green);
  text-shadow: 0 2px 5px rgba(0,0,0,0.5);
  transition: 0.5s ease;
}

nav h1:hover {
    transform: scale(1.1);
}

/* Contenedor del menú */
nav ul {
  list-style: none;
  display: flex;
  gap: 2rem;
}

/* Enlaces base */
nav a {
  position: relative;
  text-decoration: none;
  color: var(--text-light);
  font-weight: 600;
  transition: color 0.3s ease;
  padding: 8px 0;
}

/* Color al pasar el cursor */
nav a:hover {
  color: var(--primary-green);
  transform: scale(1.1);
}

/* === Línea inferior animada === */
nav a::after {
  content: "";
  position: absolute;
  left: 50%; /* empieza desde el centro */
  bottom: 0;
  width: 0;
  height: 2px;
  background-color: var(--primary-green);
  transition: all 0.3s ease;
  transform: translateX(-50%);
}

/* Al pasar el cursor, la línea se expande hacia los lados */
nav a:hover::after {
  width: 100%;
}


/* --- Contenido Principal y Secciones --- */
main {
    position: relative;
    z-index: 1;
}

section {
    max-width: 1200px;
    margin: 0 auto;
    padding: 3rem 2rem;
}

/* --- Escena de Inicio Renovada --- */
#inicio {
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: var(--header-height);
}

.hero-scene {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    gap: 2rem;
}

.hero-text {
    flex-basis: 50%;
    text-align: left;
}

.hero-text h2 {
    font-size: 3.5rem;
    text-align: left;
    margin-bottom: 1rem;
    line-height: 1.2;
    animation: text-focus-in 1s cubic-bezier(0.550, 0.085, 0.680, 0.530) both;
}

@keyframes text-focus-in {
  0% { filter: blur(12px); opacity: 0; }
  100% { filter: blur(0px); opacity: 1; }


}

.hero-subtitle {
    font-size: 1.2rem;
    margin-bottom: 2rem;
    max-width: 500px;
}

/* === Botón principal con borde blanco y relleno animado verde === */
.cta-button, .btn, button {
  position: relative;
  display: inline-block;
  background:  #089111; /* verde base */
  color: white;
  padding: 0.8rem 2rem;
  border: 2px solid #fff; /* borde blanco fijo */
  border-radius: 50px;
  text-decoration: none;
  font-weight: 600;
  font-family: 'Poppins', sans-serif;
  cursor: pointer;
  overflow: hidden;
  margin-top: 1rem;
  text-shadow: none;
  z-index: 0;
  transition: transform 0.3s ease, box-shadow 0.3s ease, color 0.3s ease;
}

/* Capa de relleno (verde lima subiendo desde abajo) */
.cta-button::before,
.btn::before,
button::before {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 100%;
  height: 0%;
  background: linear-gradient(to top, #2AF598, #00ff73); /* verde lima */
  transition: height 0.5s ease-in-out;
  border-radius: inherit;
  z-index: -1; /* debajo del texto y borde */
}

/* Al pasar el cursor, el relleno sube */
.cta-button:hover::before,
.btn:hover::before,
button:hover::before {
  height: 100%;
}

/* Texto visible siempre */
.cta-button,
.btn,
button {
  position: relative;
  z-index: 1;
}

/* Efecto al pasar el cursor (brillo + escala) */
.cta-button:hover,
.btn:hover,
button:hover {
  transform: scale(1.05);
  box-shadow: 0 0 25px rgba(42, 245, 152, 0.45);
  color: #0d1137; /* texto oscuro para contraste cuando se rellena */
}


.globe-container {
    flex-basis: 50%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.globe {
    /* --- CAMBIO: Globo devuelto a su tamaño original --- */
    width: 250px;
    height: 250px;
    border-radius: 50%;
    position: relative;
    background-image: url('https://www.solarsystemscope.com/textures/download/2k_earth_daymap.jpg');
    background-size: cover;
    box-shadow: inset 0 0 30px rgba(0,0,0,0.8), 0 0 60px -10px var(--secondary-blue);
    animation: rotate-globe 40s linear infinite;
}

@keyframes rotate-globe {
    from { background-position-x: 0px; }
    /* --- CAMBIO: Ajustado a nuevo tamaño del globo --- */
    to { background-position-x: -500px; }
}

.globe::before, .globe::after {
    content: '';
    position: absolute;
    border-radius: 50%;
    background-color: transparent;
    border: 2px solid var(--primary-green);
    animation: wave-pulse 4s infinite;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.globe::before {
    box-shadow: 0 0 10px 0px var(--primary-green);
}

.globe::after {
    box-shadow: 0 0 15px 0px var(--primary-green);
    animation-delay: 2s;
}

@keyframes wave-pulse {
    0% {
        width: 0;
        height: 0;
        opacity: 0.5;
    }
    100% {
        /* --- CAMBIO: Onda ajustada al globo más grande --- */
        width: 350px; 
        height: 350px;
        opacity: 0;
    }
}

.satellite-orbit {
    /* --- Órbita se mantiene pequeña como se pidió --- */
    width: 330px;
    height: 330px;
    border: 2px dashed rgba(255, 255, 255, 0.2);
    border-radius: 50%;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    animation: spin 20s linear infinite;
}

.satellite {
    position: absolute;
    /* --- Satélite se mantiene pequeño como se pidió --- */
    top: -30px; 
    left: 50%;
    transform: translateX(-50%);
    animation: maintain-orientation 20s linear infinite;
    width: 60px;
    height: 60px;
}

@keyframes spin {
    from { transform: rotate(0deg); }
    to { transform: rotate(360deg); }
}

@keyframes maintain-orientation {
    from { transform: rotate(0deg); }
    to { transform: rotate(-360deg); }
}

/* --- Estilos de Tarjetas (Glassmorphism) --- */
.card, .chart-container, .history-item {
    background: var(--glass-bg);
    backdrop-filter: blur(5px);
    border: 1px solid var(--glass-border);
    border-radius: 15px;
    padding: 2rem;
    box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.2);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.card:hover, .chart-container:hover, .history-item:hover {
    transform: translateY(-5px);
    box-shadow: 0 12px 40px 0 rgba(0, 0, 0, 0.3);
}

/* --- Resto de estilos --- */
h2 { font-size: 2.5rem; text-align: center; margin-bottom: 2rem; }
#map-container { height: 60vh; border-radius: 15px; border: 1px solid var(--glass-border); box-shadow: 0 8px 32px 0 rgba(0, 0, 0, 0.3); }
#details-card-content h3 { color: var(--primary-green); margin-bottom: 1rem; }
#details-card-content p { line-height: 1.8; margin-bottom: 0.5rem; }
.chart-container { margin-top: 2rem; height: 400px; }
#history-list { display: grid; gap: 1.5rem; }
.history-item { cursor: pointer; }
.history-item h4 { color: var(--primary-green); margin-bottom: 0.5rem; }
.card-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 2rem; }
.mission-card h4, .tool-card h4 { color: var(--primary-green); margin-bottom: 1rem; }
.mission-card p, .tool-card p { margin-bottom: 1.5rem; }
footer { text-align: center; padding: 2rem; margin-top: 2rem; background: rgba(0,0,0,0.2); }

@keyframes move-background {
  from {
		-webkit-transform: translate3d(0px, 0px, 0px);
	}
	to { 
		-webkit-transform: translate3d(1000px, 0px, 0px);
	}
}
@-webkit-keyframes move-background {
  from {
		-webkit-transform: translate3d(0px, 0px, 0px);
	}
	to { 
		-webkit-transform: translate3d(1000px, 0px, 0px);
	}
}

@-moz-keyframes move-background {    
	from {
		-webkit-transform: translate3d(0px, 0px, 0px);
	}
	to { 
		-webkit-transform: translate3d(1000px, 0px, 0px);
	}
}

    @-webkit-keyframes move-background {
	from {
		-webkit-transform: translate3d(0px, 0px, 0px);
	}
	to { 
		-webkit-transform: translate3d(1000px, 0px, 0px);
	}
}

.background-container{
	position: fixed;
	top: 0;
	left:0;
	bottom: 0;
	right: 0;
}

.stars {
 background: black url(https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/stars.png) repeat;
 position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	display: block;
  	z-index: 0;
}

.twinkling{
	width:10000px;
	height: 100%;
	background: transparent url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/1231630/twinkling.png") repeat;
	background-size: 1000px 1000px;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    z-index: 2;
    
    -moz-animation:move-background 70s linear infinite;
  -ms-animation:move-background 70s linear infinite;
  -o-animation:move-background 70s linear infinite;
  -webkit-animation:move-background 70s linear infinite;
  animation:move-background 70s linear infinite;

}


/* === Logo INTECAP fijo en la esquina inferior derecha === */
.logo-intecap {
  position: fixed;
  bottom: 20px;     /* separación desde el borde inferior */
  right: 25px;      /* separación desde el borde derecho */
  width: 120px;     /* ajusta según el tamaño que quieras */
  height: auto;
  opacity: 0.9;
  z-index: 2000;    /* para que quede encima de todo */
  transition: transform 0.3s ease, opacity 0.3s ease;
}

/* Pequeña animación al pasar el cursor */
.logo-intecap:hover {
  transform: scale(1.05);
  opacity: 1;
}