@import url('https://fonts.googleapis.com/css2?family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&family=Nunito:ital,wght@0,200..1000;1,200..1000&display=swap');

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

/* --------- BASE --------- */
body {
  background: #FFF6EB;
  font-family: "Nunito Sans", sans-serif;
  cursor: url("svg/cohete.svg") 40 40, auto;   /* cursor cohete */
}

h1, h2 {
  font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-style: normal;
  color: #4F0E01;
}

p {
  font-family: "Nunito Sans", sans-serif;
  font-weight: 400;
  font-style: normal;
  color: #4F0E01;
}

/* cursor cohete con fuego en elementos clickeables */
a,
button,
.btn-viajemos,
nav a {
  cursor: url("svg/cohetef.svg") 40 40, pointer;
}

/* --------- HEADER --------- */

header {
  background-color: rgba(255,246,235,0.9);
  padding: 6px 0;
  box-shadow: 0 2px 5px rgba(0,0,0,0.08);
  position: sticky;
  top: 0;
  z-index: 1000;
}

.header-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.logo {
  color: #4F0E01;
  font-size: 26px;
  font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
  font-weight: 800;
  text-decoration: none;
  display: flex;
  align-items: center;
  gap: 8px;
}

.logo-img {
  height: 55px;
  width: auto;
  padding: 10px;
  transition: transform 0.4s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

.logo:hover .logo-img {
  transform: translateY(-10px);
}

/* Navegación */
nav ul {
  list-style: none;
  display: flex;
  gap: 26px;
}

nav a {
  color: #4F0E01;
  font-size: 16px;
  text-decoration: none;
  position: relative;
  padding-bottom: 2px;
}

nav a::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: -2px;
  width: 0;
  height: 2px;
  background: #C52000;
  transition: width 0.25s;
}

nav a:hover::after,
nav a.active::after {
  width: 100%;
}

/* Responsive header */
@media (max-width: 768px) {
  .header-container {
    flex-direction: column;
    gap: 10px;
  }

  nav ul {
    gap: 18px;
  }
}

/* --------- MANCHA SUPERIOR CON CHAMPI --------- */

.esquina {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;        /* detrás del contenido principal */
  pointer-events: none;
}

/* Mancha roja */
.esquina img {
  display: block;
  width: clamp(260px, 28vw, 520px);
  height: auto;
}

/* ---------- HERO CON GRID ---------- */

.hero-section {
  position: relative;
  padding: 120px 20px 0;              /* espacio bajo el header y arriba del footer */
}

/* Grilla principal: 12 columnas x 6 filas (tipo tutorial) */
.hero-grid {
  max-width: 1200px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: repeat(12, 1fr);
  grid-auto-rows: minmax(60px, auto);
  gap: 16px;
}

/*ver la grilla mientras ajusto
.hero-grid {
  background-image:
    linear-gradient(to right, rgba(0,0,0,.05) 1px, transparent 1px),
    linear-gradient(to bottom, rgba(0,0,0,.05) 1px, transparent 1px);
  background-size: calc(100%/12) 100%, 100% calc(100%/6);
}
*/


/* --- Globo ¡HOLA VISITANTES! --- */
.hero-dialog {
  grid-column: 3 / 9;   /* columnas 3 a 10 */
  grid-row: 1 / 4;       /* filas 2 y 3 */
  align-self: start;
}

/* Contenido del globo (ya lo tenías) */
.bubble-svg {
  position: relative;
  width: 100%;
  max-width: 900px; 
  aspect-ratio: 663 / 256;
  margin-left: 20px;
  background-image: url("svg/dialogo.svg");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: center;
}

.bubble-svg h1 {
  position: absolute;
  top: 5%;
  left: 50%;
  transform: translateX(-50%);
  margin: 0;
  font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-size: clamp(26px, 3.2vw, 50px);
  color: #612210;
  white-space: nowrap;
}

.bubble-svg p {
  position: absolute;
  top: 50%;
  left: 45%;
  transform: translateX(-50%);
  margin: 0;
  width: 70%;
  font-size: clamp(14px, 1.6vw, 24px);
  line-height: 1.4;
  color: #612210;
  text-align: center;
}

/* --- Mancha roja con texto (derecha) --- */
.hero-blob {
  grid-column: 8 / 10;   /* 8 a 12 (5 columnas) */
  grid-row: 2 / 4;       /* filas 3,4,5,6 */
  align-self: center;
  margin-left: 90px;
  /*justify-self: end;*/
}

.mancha-texto {
  position: relative;
  width: clamp(300px, 70vw, 500px);  /* Más pequeño */
  aspect-ratio: 693 / 680;
  background-image: url("svg/mancha-roja.svg");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

.mancha-texto p {
  position: absolute;
  top: 50%;              /* Ajustado para centrar en la mancha grande */
  left: 55%;
  transform: translate(-50%, -50%);
  width: 50%;            /* Más estrecho */
  color: #FFF6EB;
  text-align: center;
  line-height: 1.4;
  font-size: clamp(13px, 1.4vw, 22px);
  font-weight: 500;
}

/* Responsive */
@media (max-width: 700px) {
  .hero-blob {
    grid-column: 1 / -1;
    justify-self: center;
    margin-right: 0;
  }
  
  .mancha-texto {
    width: clamp(300px, 85vw, 500px);
  }
  
  .mancha-texto p {
    width: 38%;
    font-size: clamp(12px, 3vw, 16px);
  }
}


/* --- Botón Viajemos + cohete (abajo izquierda) --- */
.hero-cta {
  grid-column: 2 / 6;   /* 3 a 6 */
  grid-row: 3 / 5;      /* filas 5 y 6 */
  align-self: start;
  margin-bottom: 20px;
  margin-top: 80px;
}

/* Botón + caminito (ya los tenías) */
.viajemos-wrapper {
  position: relative;
  align-self: flex-start;
}

.viajemos-trail {
  position: absolute;
  /*left: -10px;*/
  bottom: -50px;
  width: 220px;
  pointer-events: none;
}

.btn-viajemos {
  display: inline-block;
  background-color: #E1B48A;
  border: 3px solid #5C2E1A;
  border-radius: 999px;
  padding: 10px 70px;
  font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
  font-weight: 900;
  font-size: 35px;
  color: #4F0E01;
  box-shadow: 0 4px 0 #5C2E1A;
  text-decoration: none;
  transition: transform 0.1s, box-shadow 0.1s, background-color 0.3s, color 0.3s;
}

.btn-viajemos:hover {
  background-color: #C52000;
  color: #FFF6EB;
}

.btn-viajemos:active {
  transform: translateY(2px);
  box-shadow: 0 2px 0 #5C2E1A;
}

/* --- Responsive: grilla apilada --- */
@media (max-width: 900px) {
  .hero-grid {
    grid-template-columns: 1fr;
    grid-template-rows: auto;
  }

  .hero-dialog,
  .hero-blob,
  .hero-cta {
    grid-column: 1 / -1;
    grid-row: auto;
  }

  .hero-blob {
    justify-self: flex-start;
    margin-top: 20px;
  }

  .mancha-texto {
    width: clamp(260px, 80%, 420px);
  }
}


/* --------- SECCIONES GENERALES --------- */

.section {
  padding: 60px 100px;
}

.section-inner {
  max-width: 1100px;
  margin: 0 auto;
  text-align: center;
}


.section h1,
.section h2 {
  margin-bottom: 16px;
}

/* Sobre mi */
.about-page p {
  max-width: 720px;
  margin-bottom: 10px;
  line-height: 1.6;
}

/* --------- MUNDITOS (camino + planetas) --------- */

.munditos-page .universe-intro {
  max-width: 2000px;
}

.mundos-wrapper {
  position: relative;
  width: 120%;
  left: 50%;
  transform: translateX(-50%);   
  margin-top: 100px;
  aspect-ratio: 2294 / 1064;  
  background-image: url("svg/sistema.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;   
}


/* Ajustes por porcentaje, se escalan con el contenedor */
.planet-experimental { top: 10%; left: 13%; }
.planet-grafico      { top: 45%; right: 10%; }
.planet-industrial   { bottom: 0%; left: 0%; }
.planet-pedidos      { bottom: 55%; right: 23%; }
.planet-home         { top: 33%; left: 42%; } 

.planet-link:hover {
  transform: translateY(-6px) scale(1.03);
  filter: drop-shadow(0 0 10px rgba(0,0,0,0.25));
}

/* === TOOLTIP DE PLANETAS CON BARRIDO LATERAL === */

.planet-link {
  position: absolute;
  display: block;
  width: 250px;
  transition: transform 0.2s, filter 0.2s;
  z-index: 5;
}

.planet-link img {
  width: 100%;
  height: auto;
  display: block;

}

/* Tooltip con animación de barrido */
.planet-link::after {
  z-index: -1;
  content: attr(data-name);
  position: absolute;
  top: 50%;
  left: 60%;                  
  transform: translateY(-50%);  
  padding: 10px 15px 10px 90px;
  text-align: right;
  font-family: "Nunito Sans", sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #FFF6EB;
  background: rgba(0,0,0,0.75);
  border-radius: 20px;
  white-space: nowrap;
  
  opacity: 0;
  max-width: 0;
  overflow: hidden;
  
  pointer-events: none;
  transition: opacity 0.3s ease, max-width 0.8s ease;
}

/* Mostrar tooltip con barrido en hover */
.planet-link:hover::after {
  opacity: 1;
  max-width: 300px;  /* ancho máximo cuando se despliega */
}

.planet-experimental:hover::after {
  background: #3CB043;
}

.planet-grafico:hover::after {
  background: #D64545;
}

.planet-industrial:hover::after {
  background: #F4A72C;
  color: #4F0E01;
}

.planet-pedidos:hover::after {
  background: #2563EB;
}

.planet-home{
	width: 15%; 
}
.planet-home:hover::after {
  background: #4F0E01;
}

.planet-link:hover {
  transform: translateY(-6px) scale(1.03);
  filter: drop-shadow(0 0 10px rgba(0,0,0,0.25));
}

/* Responsive: cambiar posición del tooltip en móviles */
@media (max-width: 768px) {
  .planet-link::after {
    top: -45px;              /* arriba del planeta en móviles */
    left: 50%;
    transform: translateX(-50%);
    margin-left: 0;
    max-width: 0;
  }
  
  .planet-link:hover::after {
    max-width: 200px;
  }
}

/* Páginas internas ocultas inicialmente */
.planet-page {
  display: none;
  padding: 60px 20px;
  max-width: 1920px; 
  margin: 0 auto;
  text-align: center;
  color: #4F0E01;
}

.planet-page.active {
  display: block;
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(20px); }
  to { opacity: 1; transform: translateY(0); }
}

.back-btn {
  margin-top: 20px;
  background: #C52000;
  color: #FFF6EB;
  border: none;
  border-radius: 12px;
  padding: 12px 25px;
  font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  cursor: pointer;
  border-bottom: 4px solid #4F0E01;
}

.back-btn:hover {
  background: #4F0E01;
}

/* Caja para el contenido encima del fondo */
#page-experimental .planet-content {
  max-width: 850px;
  background: rgba(255, 246, 235, 0.9); /* tu crema con transparencia */
  border-radius: 24px;
  padding: 2px 32px;
  backdrop-filter: blur(4px);
}

/* Contenedor de proyectos dentro del planeta */
.planet-projects {
  margin-top: 40px;
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
}

/* Botón que envuelve la imagen del proyecto */
.project-link {
  background: none;
  border: none;
  padding: 0;
  text-align: center;
  cursor: url("svg/cohetef.svg") 40 40, pointer; /* respeta tu cursor especial */
}

/* Imagen del proyecto */
.project-link img {
  width: 280px;       /* ajusta el tamaño que quieras */
  height: auto;
  transition: transform 0.2s ease, filter 0.2s ease;
  filter: drop-shadow(0 4px 0 rgba(0,0,0,0.25));
}

/* “Salto” en hover */
.project-link:hover img {
  transform: translateY(-10px) scale(1.05);
  filter: drop-shadow(0 12px 18px rgba(0,0,0,0.35));
}

/* Página interna del planeta experimental */
#page-experimental {
  min-height: 110vh;
  padding: 120px 60px 60px;
  background-image: url("img/fondo-ex.png");
  background-size: cover;
  background-position: center bottom;   
  background-repeat: no-repeat;
  display: none;
}

/* Contenedor de proyectos dentro del planeta */
.planet-projects {
  margin-top: 60px;
  display: flex;
  justify-content: center;
  gap: 40px;
  flex-wrap: wrap;
  padding-bottom: 50px;
}

/* Botón que envuelve la imagen del proyecto */
.project-link {
  background: none;
  border: none;
  padding: 0;
  text-align: center;
  cursor: url("svg/cohetef.svg") 40 40, pointer;
  position: relative;
  /*transform: translateX(-200px);  */
}

.project-link[data-project="olerium"] {
  transform: translateX(-200px);
}

.project-link[data-project="boltris"] {
  transform: translate(150px, -100px);
}

/* Imagen del proyecto */
.project-link img {
  width: 200px;
  height: auto;
  transition: transform 0.3s ease, filter 0.3s ease;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
}

/* Efecto hover en la imagen */
.project-link:hover img {
  transform: translateY(-10px) scale(1.05);
  filter: drop-shadow(0 12px 20px rgba(0,0,0,0.4));
}


/* Botón "Volver al Universo" en planetas */
.planet-page .back-btn {
  position: fixed;           /* O absolute */
  bottom: 40px;             /* Distancia desde abajo */
  right: 100px;              /* Distancia desde la derecha */
  z-index: 100;             /* Encima de todo */
}
/* ===== PÁGINAS DE PROYECTOS (subpáginas) ===== */
.project-page {
  display: none;
  padding: 100px 40px 60px;
  max-width: 1200px;
  margin: 0 auto;
  text-align: center;
  color: #4F0E01;
  min-height: 80vh;
}

.project-page h2 {
  font-size: clamp(28px, 4vw, 42px);
  margin-bottom: 20px;
  color: #4F0E01;
}

.project-page p {
  font-size: clamp(16px, 2vw, 20px);
  max-width: 800px;
  margin: 0 auto 40px;
  line-height: 1.6;
}

/* Responsive para proyectos */
@media (max-width: 768px) {
  .planet-projects {
    margin-top: -100px;
  }
  
  .project-link img {
    width: 160px;
  }
  
  #page-experimental .back-btn {
    margin-top: 60px;
  }
  
  .project-page {
    padding: 80px 20px 40px;
  }
}

#proj-olerium {
min-height: 100vh; 
width: 100%; 
max-width: none; 
padding: 120px 60px 60px; 
background-image: url("img/olerium2.png"); 
background-position: -100px 0px; 
background-repeat: no-repeat; 
display: none;
}


.titulo-badge{
  /*display: inline-block;*/
  background: rgba(255,246,235,0.7);
  border: 3px solid #4F0E01;   /* tu café oscuro */
  color: #4F0E01;
  padding: 10px 40px;
  border-radius: 100px;        /* forma de cápsula */
  font-family: "Nunito", sans-serif;
  font-weight: 800;
  font-size: 36px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.15);
  position: absolute;
  top: 80px;
  left: 50px;
}

h3 {
  background: rgba(255,246,235,0.7);
  border: 3px solid #4F0E01;   /* tu café oscuro */
  color: #4F0E01;
  border-radius: 100px;
  padding: 5px 5px;
  font-family: "Nunito", sans-serif;
  font-weight: 400;
  font-size: 28px;
  position: absolute;
  left: 40px;
}

.descripcion{
  max-width: 600px;     /* Controla el ancho del texto */
  margin-left: 50%;     /* Lo empuja hacia la derecha */
  text-align: left;
}


/* Botón en la página de Olerium */
#proj-olerium .back-btn {
  position: fixed;           /* O absolute */
  bottom: 40px;             /* Distancia desde abajo */
  right: 100px;              /* Distancia desde la derecha */
  z-index: 100;             /* Encima de todo */
}

#proj-boltris {
min-height: 100vh; 
width: 100%; 
max-width: none; 
padding: 120px 60px 60px; 
background-image: url("img/boltris2.png");
background-size: 46%; 
background-position: left top; 
background-repeat: no-repeat; 
display: none;
}


.titulo-badge{
  /*display: inline-block;*/
  background: rgba(255,246,235,0.7);
  border: 3px solid #4F0E01;   /* tu café oscuro */
  color: #4F0E01;
  padding: 10px 40px;
  border-radius: 100px;        /* forma de cápsula */
  font-family: "Nunito", sans-serif;
  font-weight: 800;
  font-size: 36px;
  box-shadow: 0 4px 6px rgba(0,0,0,0.15);
  position: absolute;
  top: 80px;
  left: 50px;
}

h3 {
  background: rgba(255,246,235,0.7);
  border: 3px solid #4F0E01;   /* tu café oscuro */
  color: #4F0E01;
  border-radius: 100px;
  padding: 5px 5px;
  font-family: "Nunito", sans-serif;
  font-weight: 400;
  font-size: 28px;
  position: absolute;
  left: 40px;
}

#proj-boltris .back-btn {
  position: fixed;           /* O absolute */
  bottom: 40px;             /* Distancia desde abajo */
  right: 100px;              /* Distancia desde la derecha */
  z-index: 100;             /* Encima de todo */
}

#page-grafico {
  min-height: 165vh;
  width: 100%;
  padding: 50px 60px 60px;
  background-image: url("img/fondo-gr.png");
  background-size: cover;
  background-position: center bottom;   
  background-repeat: no-repeat;
  display: none;
}

#page-industrial {
  min-height: 120vh;
  width: 100%;
  padding: 50px 60px 60px;
  background-image: url("img/fondo-t.png");
  background-size: cover;
  background-position: center bottom;   
  background-repeat: no-repeat;
  display: none;
}

.project-link {
  background: none;
  border: none;
  padding: 0;
  text-align: center;
  cursor: url("svg/cohetef.svg") 40 40, pointer;
  position: relative;
  /*transform: translateX(-200px);  */
}

.project-link[data-project="kachow"] {
  transform: translate(-20px, 200px);
}

.project-link[data-project="lampara"] {
  transform: translate(-20px, 150px);
}

/* Imagen del proyecto */
.project-link img {
  width: 250px;
  height: auto;
  transition: transform 0.3s ease, filter 0.3s ease;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
}

/* Efecto hover en la imagen */
.project-link:hover img {
  transform: translateY(-10px) scale(1.05);
  filter: drop-shadow(0 12px 20px rgba(0,0,0,0.4));
}

#proj-kachow {
min-height: 90vh; 
width: 100%; 
max-width: none; 
padding: 120px 60px 60px; 
background-image: url("img/kachow2.png"); 
background-position: -50px 0px; 
background-repeat: no-repeat; 
display: none;
}

#proj-kachow .back-btn {
  position: fixed;           /* O absolute */
  bottom: 40px;             /* Distancia desde abajo */
  right: 100px;              /* Distancia desde la derecha */
  z-index: 100;             /* Encima de todo */
}


h3 {
  background: rgba(255,246,235,0.7);
  border: 3px solid #4F0E01;   /* tu café oscuro */
  color: #4F0E01;
  border-radius: 100px;
  padding: 5px 5px;
  font-family: "Nunito", sans-serif;
  font-weight: 400;
  font-size: 28px;
  position: absolute;
  left: 40px;
}

.descripcion{
  max-width: 600px;     /* Controla el ancho del texto */
  margin-left: 50%;     /* Lo empuja hacia la derecha */
  text-align: left;
}

#proj-lampara {
min-height: 80vh; 
width: 100%; 
max-width: none; 
padding: 120px 60px 60px; 
background-image: url("img/lampara2.png"); 
background-position: -50px 0px; 
background-repeat: no-repeat; 
display: none;
}

#proj-lampara .back-btn {
  position: fixed;           /* O absolute */
  bottom: 40px;             /* Distancia desde abajo */
  right: 100px;              /* Distancia desde la derecha */
  z-index: 100;             /* Encima de todo */
}

h3 {
  background: rgba(255,246,235,0.7);
  border: 3px solid #4F0E01;   /* tu café oscuro */
  color: #4F0E01;
  border-radius: 100px;
  padding: 5px 5px;
  font-family: "Nunito", sans-serif;
  font-weight: 400;
  font-size: 28px;
  position: absolute;
  left: 40px;
}

.descripcion{
  max-width: 600px;     /* Controla el ancho del texto */
  margin-left: 50%;     /* Lo empuja hacia la derecha */
  text-align: left;
}

#page-pedidos {
  min-height: 140vh;
  width: 100%;
  padding: 50px 60px 60px;
  background-image: url("img/fondo-p.png");
  background-size: cover;
  background-position: center bottom;   
  background-repeat: no-repeat;
  display: none;
}

.project-link {
  background: none;
  border: none;
  padding: 0;
  text-align: center;
  cursor: url("svg/cohetef.svg") 40 40, pointer;
  position: relative;
  /*transform: translateX(-200px);  */
}

.project-link[data-project="bolsa"] {
  transform: translate(-150px, 250px);
}

.project-link[data-project="cartas"] {
  transform: translate(45px, 300px);
}

/* Imagen del proyecto */
.project-link img {
  width: 250px;
  height: auto;
  transition: transform 0.3s ease, filter 0.3s ease;
  filter: drop-shadow(0 4px 8px rgba(0,0,0,0.3));
}

/* Efecto hover en la imagen */
.project-link:hover img {
  transform: translateY(-10px) scale(1.05);
  filter: drop-shadow(0 12px 20px rgba(0,0,0,0.4));
}

#proj-bolsa {
min-height: 100vh; 
width: 100%; 
max-width: none; 
padding: 120px 60px 60px; 
background-image: url("img/bolsa.png"); 
background-position: -50px 0px; 
background-repeat: no-repeat; 
display: none;
}

#proj-bolsa .back-btn {
  position: fixed;           /* O absolute */
  bottom: 40px;             /* Distancia desde abajo */
  right: 100px;              /* Distancia desde la derecha */
  z-index: 100;             /* Encima de todo */
}


h3 {
  background: rgba(255,246,235,0.7);
  border: 3px solid #4F0E01;   /* tu café oscuro */
  color: #4F0E01;
  border-radius: 100px;
  padding: 5px 5px;
  font-family: "Nunito", sans-serif;
  font-weight: 400;
  font-size: 28px;
  position: absolute;
  left: 40px;
}

.descripcion{
  max-width: 600px;     /* Controla el ancho del texto */
  margin-left: 50%;     /* Lo empuja hacia la derecha */
  text-align: left;
}

#proj-cartas {
min-height: 120vh; 
width: 100%; 
max-width: none; 
padding: 120px 60px 60px; 
background-image: url("img/cartas.png"); 
background-position: -160px 0px; 
background-repeat: no-repeat; 
display: none;
}

#proj-cartas .back-btn {
  position: fixed;           /* O absolute */
  bottom: 40px;             /* Distancia desde abajo */
  right: 100px;              /* Distancia desde la derecha */
  z-index: 100;             /* Encima de todo */
}


h3 {
  background: rgba(255,246,235,0.7);
  border: 3px solid #4F0E01;   /* tu café oscuro */
  color: #4F0E01;
  border-radius: 100px;
  padding: 5px 5px;
  font-family: "Nunito", sans-serif;
  font-weight: 400;
  font-size: 28px;
  position: absolute;
  left: 40px;
}

.descripcion{
  max-width: 600px;     /* Controla el ancho del texto */
  margin-left: 50%;     /* Lo empuja hacia la derecha */
  text-align: left;
}




/* --------- FOOTER / CONTACTO --------- */

.footer {
  background-color: rgba(255,246,235,0.9);
  padding: 30px 20px;
  text-align: center;
  box-shadow: 0 -2px 5px rgba(0,0,0,0.08);
  margin-top: 0;
}

.footer .contenedor {
  max-width: 1200px;
  margin: 0 auto;
}

.footer small {
  color: #4F0E01;
  font-size: 14px;
}

.footer .social {
  color: #4F0E01;
  text-decoration: none;
}

.footer .social:hover {
  color: #C52000;
}

/*intento de animacion preliminar*/

/* Overlay que cubre toda la página */
#page-loader {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: #FFF6EB;
  z-index: 9999;
  display: flex;
  justify-content: center;
  align-items: center;
  opacity: 1;
  transition: opacity 0.5s ease, visibility 5s ease;
}

#page-loader.hidden {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.loader-animation {
  position: relative;
  width: 250px;
  height: 250px;
}

/* Champi saltando */
.loader-champi {
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translateX(-50%);
  width: 80px;
  height: auto;
  animation: champiJump 1.2s ease-in-out infinite;
}

@keyframes champiJump {
  0%, 100% {
    transform: translateX(-50%) translateY(0) rotate(0deg);
  }
  50% {
    transform: translateX(-50%) translateY(-35px) rotate(0deg);
  }
}

/* Cohete orbitando */
.loader-cohete {
  position: absolute;
  width: 45px;
  height: auto;
  top: 50%;
  left: 50%;
  animation: coheteOrbit 1.8s linear infinite;
  transform-origin: 0 0;
}

@keyframes coheteOrbit {
  0% {
    transform: rotate(0deg) translateX(90px) rotate(0deg);
  }
  100% {
    transform: rotate(360deg) translateX(90px) rotate(-360deg);
  }
}

/* Estrelitas parpadeantes */
.loader-star {
  position: absolute;
  width: 12px;
  height: 12px;
  background: #C52000;
  clip-path: polygon(50% 0%, 61% 35%, 98% 35%, 68% 57%, 79% 91%, 50% 70%, 21% 91%, 32% 57%, 2% 35%, 39% 35%);
  animation: starTwinkle 1.5s ease-in-out infinite;
}

.loader-star:nth-child(1) {
  top: 15%;
  left: 10%;
  animation-delay: 0s;
}

.loader-star:nth-child(2) {
  top: 25%;
  right: 12%;
  animation-delay: 0.4s;
}

.loader-star:nth-child(3) {
  bottom: 20%;
  left: 12%;
  animation-delay: 0.8s;
}

.loader-star:nth-child(4) {
  bottom: 30%;
  right: 8%;
  animation-delay: 1.2s;
}

@keyframes starTwinkle {
  0%, 100% {
    opacity: 0.3;
    transform: scale(0.8);
  }
  50% {
    opacity: 1;
    transform: scale(1.2);
  }
}

/* Texto cargando */
.loader-text {
  position: absolute;
  bottom: -10px;
  left: 50%;
  transform: translateX(-50%);
  font-family: "Nunito", sans-serif;
  font-optical-sizing: auto;
  font-weight: 700;
  font-size: 16px;
  color: #4F0E01;
  white-space: nowrap;
}

.loader-text::after {
  content: '';
  animation: loaderDots 1.5s steps(4, end) infinite;
}

@keyframes loaderDots {
  0%, 20% { content: ''; }
  40% { content: '.'; }
  60% { content: '..'; }
  80%, 100% { content: '...'; }
}

/* Responsive */
@media (max-width: 768px) {
  .loader-animation {
    width: 200px;
    height: 200px;
  }
  
  .loader-champi {
    width: 60px;
    bottom: 25px;
  }
  
  .loader-cohete {
    width: 35px;
  }
  
  @keyframes coheteOrbit {
    0% {
      transform: rotate(0deg) translateX(70px) rotate(0deg);
    }
    100% {
      transform: rotate(360deg) translateX(70px) rotate(-360deg);
    }
  }
  
  .loader-text {
    font-size: 14px;
  }
}

.back-btn,
.planet-page .back-btn {
  cursor: url("svg/cohetef.svg") 40 40, pointer;
}