/* Estilos compartidos: Explora por niveles · Explora mundo celular · Explora temas · Sobre este proyecto */
:root{
  --bg:#030A1F;
  --panel:rgba(6,14,38,0.86);
  --cyan:#4DE8D4;
  --cyan-dim:rgba(77,232,212,0.12);
  --text:#F2F5F7;
  --soft:#C9D4EA;
  --muted:#8A98B6;
  --off:#66708A;
  --line:rgba(140,170,255,0.16);
  --violet:#8B6CFF;
  --blue:#3FA2FF;
  --pink:#FF4F8B;
}
*{box-sizing:border-box;}
body{
  margin:0;
  background:var(--bg);
  color:var(--text);
  font-family:'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
  min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
.page{
  position:relative;
  max-width:900px;
  margin:0 auto;
  padding:clamp(96px, 30%, 270px) clamp(12px, 3.5vw, 24px) clamp(90px, 26%, 230px);
  min-height:100vh;
  overflow:hidden;
}
/* Franjas decorativas (red de moléculas / ADN) arriba y abajo */
.page::before, .page::after{
  content:"";
  position:absolute;
  left:0; right:0;
  background-repeat:no-repeat;
  background-size:100% auto;
  pointer-events:none;
  z-index:0;
}
.page::before{
  top:0;
  aspect-ratio:848/365;
  background-image:url('img/fondo-arriba.jpg');
  -webkit-mask-image:linear-gradient(#000 55%, transparent);
  mask-image:linear-gradient(#000 55%, transparent);
}
.page::after{
  bottom:0;
  aspect-ratio:848/293;
  background-image:url('img/fondo-abajo.jpg');
  -webkit-mask-image:linear-gradient(transparent, #000 45%);
  mask-image:linear-gradient(transparent, #000 45%);
}
/* Fondo común de las pantallas de menú (niveles, mundo celular, órganos, tejidos) */
.menu-fondo .page{
  background:url('img/fondos/fondo_menu.webp') center / cover no-repeat;
}
/* Capa oscura semitransparente: solo para que el texto se lea sobre la decoración */
.menu-fondo .page::before{
  top:0; bottom:0;
  aspect-ratio:auto;
  background:rgba(3,10,31,0.45);
  -webkit-mask-image:none;
  mask-image:none;
}
.menu-fondo .page::after{ content:none; }
.shell{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:190px minmax(0,1fr);
  gap:clamp(14px, 3vw, 30px);
  align-items:stretch;
}

/* ---- Menú lateral ---- */
.side{
  display:flex;
  flex-direction:column;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:18px;
  padding:26px 12px 14px;
  backdrop-filter:blur(6px);
}
.brand{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:10px;
  text-align:center;
  font-weight:600;
  font-size:14px;
  line-height:1.2;
  letter-spacing:0.02em;
  color:var(--text);
  text-decoration:none;
  margin-bottom:44px;
}
.brand svg{ width:38px; height:38px; color:var(--cyan); }
.menu{ display:flex; flex-direction:column; gap:8px; }
.menu-item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:11px 10px;
  border-radius:12px;
  font-size:13.5px;
  font-weight:500;
  color:var(--text);
  text-decoration:none;
  border:1px solid transparent;
}
.menu-item svg{ width:22px; height:22px; flex-shrink:0; }
a.menu-item:hover{ background:var(--cyan-dim); }
.menu-item.active{ background:var(--cyan-dim); color:var(--cyan); }
/* Buscar: inactivo a propósito, no "roto" */
.menu-item.off{
  align-items:flex-start;
  color:var(--off);
  border:1px dashed rgba(140,150,180,0.28);
  background:rgba(255,255,255,0.02);
  cursor:default;
}
.menu-item.off small{
  display:block;
  font-size:11px;
  font-weight:400;
  line-height:1.35;
  margin-top:3px;
  color:var(--off);
}
.trust{
  margin-top:auto;
  border:1px solid var(--line);
  border-radius:12px;
  padding:14px 12px;
  font-size:12px;
  line-height:1.5;
  color:var(--soft);
  background:rgba(4,10,28,0.6);
}
.trust svg{ width:20px; height:20px; color:var(--cyan); display:block; margin-bottom:8px; }
.trust p{ margin:0 0 10px; }
.trust p:last-child{ margin:0; }
.side .trust{ margin-top:40px; }

/* ---- Contenido ---- */
.main h1{ font-size:clamp(26px, 6.4vw, 40px); font-weight:800; line-height:1.1; margin:6px 0 8px; }
.sub{ color:var(--soft); font-size:clamp(14px, 3.6vw, 17px); line-height:1.45; margin:0 0 16px; }
.question{ font-size:clamp(16px, 4.2vw, 22px); font-weight:700; margin:0 0 18px; }
.chip{
  display:inline-flex;
  align-items:center;
  gap:9px;
  border:1px solid rgba(77,232,212,0.55);
  background:var(--cyan-dim);
  color:var(--text);
  font-size:14px;
  font-weight:500;
  padding:9px 18px;
  border-radius:24px;
  text-decoration:none;
  margin:0 0 20px;
}
.chip svg{ width:18px; height:18px; color:var(--cyan); }
.chip:hover{ border-color:var(--cyan); }

/* Siempre 2 columnas, también en móvil estrecho */
.grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:clamp(10px, 3vw, 22px);
}
.card{
  --tone:var(--blue);
  position:relative;
  display:flex;
  flex-direction:column;
  border:1px solid var(--tone);
  border-radius:16px;
  overflow:hidden;
  color:var(--text);
  text-decoration:none;
  background:#050A2A;
  box-shadow:0 0 18px -8px var(--tone);
  transition:transform .15s ease, box-shadow .15s ease;
}
.card.violet{ --tone:var(--violet); }
.card.pink{ --tone:var(--pink); }
a.card:hover{ transform:translateY(-3px); box-shadow:0 0 26px -6px var(--tone); }
/* Ilustración 3:4: nunca se recorta por arriba; el tercio inferior (liso) queda bajo el texto */
.card-art{
  display:block;
  width:100%;
  height:auto;
  aspect-ratio:3/4;
  object-fit:cover;
  object-position:top center;
}
/* Degradado oscuro en código, sobre la imagen, para el título y el texto */
.card-body{
  position:relative;
  margin-top:-52%;
  padding:16% clamp(10px, 3vw, 20px) clamp(12px, 3vw, 18px);
  background:linear-gradient(180deg, rgba(5,10,42,0) 0, rgba(5,10,42,0.82) 26%, #050A2A 58%);
  display:flex;
  flex-direction:column;
  flex:1;
}
.card h2{
  font-size:clamp(15px, 4.3vw, 25px);
  font-weight:800;
  line-height:1.12;
  letter-spacing:0.01em;
  text-transform:uppercase;
  margin:0 0 6px;
  text-shadow:0 2px 10px rgba(0,0,10,0.8);
  overflow-wrap:break-word;
}
.card p{
  font-size:clamp(12.5px, 3.3vw, 17px);
  line-height:1.35;
  color:var(--soft);
  margin:0 0 12px;
  flex:1;
}
.card .level{ font-size:11px; font-weight:600; letter-spacing:0.05em; text-transform:uppercase; color:var(--cyan); margin:0 0 4px; flex:none; }
.go{
  width:clamp(32px, 8vw, 44px);
  height:clamp(32px, 8vw, 44px);
  border-radius:50%;
  background:rgba(120,130,255,0.22);
  border:1px solid rgba(255,255,255,0.12);
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:clamp(15px, 4vw, 20px);
}
/* Niveles aún sin contenido */
.card.soon{ cursor:default; }
.card.soon .card-art{ filter:saturate(0.55) brightness(0.8); }
.card.soon h2, .card.soon p{ opacity:0.72; }
.soon-tag{
  align-self:flex-start;
  font-size:11.5px;
  font-weight:600;
  color:var(--soft);
  border:1px solid rgba(255,255,255,0.2);
  border-radius:20px;
  padding:5px 11px;
}

.banner{
  display:flex;
  align-items:center;
  gap:16px;
  margin-top:clamp(12px, 3vw, 22px);
  padding:14px 18px;
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:14px;
}
.banner strong{ display:flex; align-items:center; gap:10px; color:var(--cyan); font-size:15px; font-weight:600; flex:1; }
.banner strong svg{ width:24px; height:24px; flex-shrink:0; }
.banner span{ flex:1; font-size:13px; line-height:1.45; color:var(--soft); border-left:1px solid var(--line); padding-left:16px; }

/* ---- Sobre este proyecto ---- */
.about{ position:relative; z-index:1; max-width:640px; margin:0 auto; }
.back-link{ display:inline-flex; align-items:center; gap:4px; font-size:14px; font-weight:600; color:var(--cyan); text-decoration:none; margin-bottom:18px; }
.back-link:hover{ text-decoration:underline; }
.about-head{ display:flex; align-items:center; gap:14px; margin-bottom:22px; }
.about-head svg{ width:44px; height:44px; color:var(--cyan); flex-shrink:0; }
.about-head h1{ font-size:clamp(22px, 5.6vw, 30px); font-weight:800; letter-spacing:0.03em; margin:0; }
.about-card{
  background:var(--panel);
  border:1px solid var(--line);
  border-radius:16px;
  padding:20px 22px;
  margin-bottom:14px;
  backdrop-filter:blur(6px);
}
.about-card h2{ font-size:17px; font-weight:700; color:var(--cyan); margin:0 0 10px; }
.about-card p{ font-size:15.5px; line-height:1.6; color:var(--soft); margin:0 0 10px; }
.about-card p:last-child{ margin-bottom:0; }
.about-card ul{ margin:0 0 12px; padding-left:20px; }
.about-card li{ font-size:15.5px; line-height:1.6; color:var(--soft); margin-bottom:8px; }
.about-card strong{ color:var(--text); }
.about-mail{ text-align:center; font-size:16px; font-weight:600; margin:22px 0 0; user-select:all; }

/* ---- Móvil: el menú lateral pasa arriba; las tarjetas siguen en 2 columnas ---- */
@media (max-width:719px){
  .shell{ display:flex; flex-direction:column; gap:14px; }
  .side{ display:contents; }
  .brand{ flex-direction:row; justify-content:flex-start; text-align:left; margin:0; font-size:13px; }
  .brand br{ display:none; }
  .brand svg{ width:28px; height:28px; }
  .menu{ display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); gap:8px; }
  .menu-item{ background:var(--panel); border-color:var(--line); font-size:13px; padding:10px; }
  .menu-item.off{ grid-column:1 / -1; order:3; align-items:center; }
  .menu-item.off small{ display:inline; margin:0 0 0 6px; }
  .side .trust{ order:5; margin-top:0; display:grid; grid-template-columns:auto 1fr; column-gap:10px; }
  .trust svg{ grid-row:span 2; margin:0; }
  .trust p{ margin:0; }
  .banner{ flex-direction:column; align-items:flex-start; gap:8px; }
  .banner span{ border-left:0; padding-left:0; }
}