/* Portada de FiloCode: logo, acceso y fondo de olas. Misma paleta que el Intérprete. */
:root {
  --fondo: #061115;
  --panel: rgba(6, 17, 21, .74);
  --linea: rgba(98, 245, 217, .16);
  --linea-fuerte: rgba(98, 245, 217, .38);
  --menta: #62f5d9;
  --fosforo: #5cf29a;
  --texto: #d7e6dc;
  --texto-suave: #8aa69a;
  --rojo: #ff5c6c;
  --oro: #e8c46a;
  --mono: "JetBrains Mono", "Fira Code", "Cascadia Code", Consolas, "Courier New", monospace;
}
* { box-sizing: border-box; }
[hidden] { display: none !important; }
html, body { margin: 0; min-height: 100%; }
body {
  font-family: var(--mono); color: var(--texto); background: var(--fondo);
  min-height: 100vh; display: flex; flex-direction: column;
}
::selection { background: rgba(98, 245, 217, .3); }

/* el fondo: degradado de reserva debajo del lienzo de Vanta */
.fondo {
  position: fixed; inset: 0; z-index: 0;
  background:
    radial-gradient(ellipse at 30% 35%, rgba(98, 245, 217, .10), transparent 55%),
    radial-gradient(ellipse at 80% 90%, rgba(72, 237, 187, .08), transparent 50%),
    var(--fondo);
}
/* velo encima de las olas para que el texto se lea siempre */
.fondo::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, rgba(6,17,21,.7), rgba(6,17,21,.25) 55%, rgba(6,17,21,.5)); pointer-events: none; }

.portada {
  position: relative; z-index: 1; flex: 1;
  display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(320px, 420px); gap: clamp(28px, 6vw, 96px);
  align-items: center; width: min(1180px, 100%); margin: 0 auto; padding: clamp(24px, 5vw, 64px) clamp(16px, 4vw, 48px);
}

.presentacion h1 { margin: 0; line-height: 0; }
.logo { width: min(400px, 100%); height: auto; margin: 0 0 22px; filter: drop-shadow(0 0 28px rgba(98, 245, 217, .18)); }
.lema { font-size: clamp(1.15rem, 2.2vw, 1.5rem); font-weight: 600; color: #fff; margin: 0 0 12px; letter-spacing: .01em; }
.descripcion { max-width: 48ch; color: var(--texto-suave); font-weight: 300; line-height: 1.65; margin: 0; }
.descripcion b { color: var(--menta); font-weight: 400; }

.acceso {
  background: var(--panel); border: 1px solid var(--linea-fuerte); border-radius: 10px;
  padding: 22px 24px 24px; box-shadow: 0 30px 80px rgba(0, 0, 0, .55);
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}

.pestanas { display: grid; grid-template-columns: 1fr 1fr; border-bottom: 1px solid var(--linea); margin-bottom: 16px; }
.pestanas button {
  font: inherit; font-size: .9rem; background: none; border: 0; color: var(--texto-suave);
  padding: 10px 0 12px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px;
}
.pestanas button[aria-selected="true"] { color: #fff; border-bottom-color: var(--menta); font-weight: 600; }
.pestanas button:hover { color: var(--texto); }

form { display: flex; flex-direction: column; margin: 0; }
label { font-size: .76rem; color: var(--texto-suave); margin: 12px 0 5px; }
input {
  font: inherit; font-size: .92rem; padding: 10px 12px; border-radius: 4px;
  border: 1px solid var(--linea-fuerte); background: rgba(0, 0, 0, .38); color: var(--texto);
}
input:focus { outline: 1px solid var(--menta); border-color: var(--menta); }
input::placeholder { color: rgba(138, 166, 154, .6); }

.boton {
  display: block; text-align: center; text-decoration: none; cursor: pointer;
  font: inherit; font-size: .9rem; padding: 11px 14px; border-radius: 4px; margin-top: 12px;
  border: 1px solid var(--linea-fuerte); background: transparent; color: var(--texto);
  transition: background .2s, border-color .2s;
}
.boton:hover { background: rgba(98, 245, 217, .08); border-color: var(--menta); }
.boton.primario { background: var(--menta); color: var(--fondo); border-color: var(--menta); font-weight: 600; margin-top: 16px; }
.boton.primario:hover { background: #8ff9e6; }
.boton:disabled { opacity: .5; cursor: progress; }
.boton.libre { text-align: left; border-left: 3px solid var(--fosforo); background: rgba(0, 0, 0, .3); padding: 13px 16px; }
.boton.libre small { display: block; color: var(--texto-suave); font-size: .74rem; font-weight: 300; margin-top: 4px; line-height: 1.45; }
:focus-visible { outline: 1px solid var(--menta); outline-offset: 2px; }

.enlace { font: inherit; font-size: .76rem; background: none; border: 0; padding: 0; margin-top: 12px; color: var(--oro); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; align-self: flex-start; }
.enlace:hover { color: #f3d98f; }
.error { color: var(--rojo); font-size: .8rem; line-height: 1.4; margin: 10px 0 0; min-height: 1.1em; }
.error:empty { min-height: 0; margin: 0; }
.nota { color: var(--texto-suave); font-size: .76rem; font-weight: 300; line-height: 1.5; margin: 12px 0 0; }
.mensaje { border: 1px solid var(--linea-fuerte); border-left: 3px solid var(--menta); background: rgba(98, 245, 217, .07); padding: 10px 12px; border-radius: 4px; font-size: .84rem; line-height: 1.5; margin: 16px 0 0; }

.separador { display: flex; align-items: center; gap: 12px; color: var(--texto-suave); font-size: .78rem; margin: 20px 0 6px; }
.separador::before, .separador::after { content: ""; flex: 1; border-top: 1px solid var(--linea); }

.saludo { margin: 4px 0 6px; font-size: 1rem; }
.saludo b { color: var(--menta); }

.pie {
  position: relative; z-index: 1; display: flex; gap: 12px; justify-content: center;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); font-size: .72rem; letter-spacing: .06em; color: var(--texto-suave);
}
.pie b { color: var(--texto); font-weight: 600; }

@media (max-width: 820px) {
  .portada { grid-template-columns: 1fr; gap: 8px; align-content: start; }
  .presentacion { text-align: center; }
  .logo { width: min(280px, 80%); margin: 0 auto 16px; }
  .descripcion { margin: 0 auto; }
  .fondo::after { background: rgba(6, 17, 21, .45); }
}

.a-biblioteca {
  display: inline-block; margin-top: 24px; padding: 10px 16px; border-radius: 4px; text-decoration: none;
  border: 1px solid var(--linea-fuerte); color: var(--menta); background: rgba(6, 17, 21, .55); font-size: .9rem;
  transition: background .2s, border-color .2s;
}
.a-biblioteca:hover { background: rgba(98, 245, 217, .1); border-color: var(--menta); }
.nota-biblioteca { margin: 8px 0 0; font-size: .72rem; color: var(--texto-suave); font-weight: 300; }

/* ---------- compartir ---------- */
.compartir { margin-top: 28px; border-top: 1px solid var(--linea); padding-top: 16px; }
.compartir h2 {
  margin: 0 0 10px; font-size: .72rem; font-weight: 400; color: var(--texto-suave);
  text-transform: uppercase; letter-spacing: .14em;
}
.compartir-botones { display: flex; flex-wrap: wrap; gap: 8px; }
.compartir-botones a, .compartir-botones button {
  font: inherit; font-size: .76rem; padding: 6px 12px; border-radius: 999px; cursor: pointer; text-decoration: none;
  border: 1px solid var(--linea-fuerte); background: rgba(6, 17, 21, .55); color: var(--texto);
  transition: background .2s, border-color .2s, color .2s;
}
.compartir-botones a:hover, .compartir-botones button:hover { background: rgba(98, 245, 217, .12); border-color: var(--menta); color: #fff; }
.compartir-botones #compartir-nativo { border-color: var(--menta); color: var(--menta); }
.compartir-aviso { margin: 10px 0 0; font-size: .74rem; color: var(--menta); }
@media (max-width: 820px) {
  .compartir { text-align: left; }
  .compartir-botones { justify-content: center; }
  .compartir h2 { text-align: center; }
}