/* 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 {
  /* sin z-index: un z-index aislaría el grupo y el logo animado no podría fundirse con las olas */
  position: relative; 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; }
.oculto-visual { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
/* la caja del logo tiene la proporción del SVG; el vídeo (cuadrado, con el logo al 62 % del ancho)
   se centra y se recorta: al 150 % el logo sale un poco menor que el SVG y cabe entero con margen */
.logo-caja { position: relative; display: block; width: min(400px, 100%); aspect-ratio: 986 / 731; overflow: hidden; margin: 0 0 22px; }
.logo { position: absolute; inset: 0; width: 100%; height: auto; filter: drop-shadow(0 0 28px rgba(98, 245, 217, .18)); }
.logo-animado { position: absolute; left: 50%; top: 50%; width: 150%; height: auto; transform: translate(-50%, -50%); mix-blend-mode: lighten; cursor: pointer; }
.lema { font-size: clamp(1.15rem, 2.2vw, 1.5rem); font-weight: 600; color: #fff; margin: 0 0 12px; letter-spacing: .01em; text-wrap: balance; }
/* ---------- carrusel: cinco ideas que rotan ----------
   Sin JS las diapositivas van en lista. Con JS (.en-marcha) se apilan en la misma celda,
   así la caja mide lo que la más larga y la página no salta al cambiar */
.carrusel { max-width: 50ch; margin: 18px 0 0; }
.carrusel-ventana { display: grid; gap: 14px; }
.diapositiva b {
  display: block; margin-bottom: 4px; font-size: .74rem; font-weight: 600; letter-spacing: .18em; text-transform: uppercase; color: var(--menta);
}
.diapositiva p { margin: 0; font-size: clamp(.98rem, 1.5vw, 1.08rem); font-weight: 300; line-height: 1.6; color: var(--texto); }
.en-marcha .carrusel-ventana { gap: 0; }
.en-marcha .diapositiva {
  grid-area: 1 / 1; opacity: 0; visibility: hidden; transform: translateY(6px);
  transition: opacity .6s ease, transform .6s ease, visibility 0s linear .6s;
}
.en-marcha .diapositiva.activa { opacity: 1; visibility: visible; transform: none; transition: opacity .6s ease, transform .6s ease, visibility 0s; }

.carrusel-mandos { display: flex; align-items: center; gap: 12px; margin-top: 14px; }
.carrusel-mandos[hidden] { display: none; }
.carrusel-pausa {
  flex: none; width: 26px; height: 26px; padding: 0; display: grid; place-items: center; cursor: pointer;
  border: 1px solid var(--linea-fuerte); border-radius: 50%; background: rgba(6, 17, 21, .55); color: var(--texto-suave);
}
.carrusel-pausa:hover { color: var(--menta); border-color: var(--menta); }
.carrusel-pausa svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.carrusel-pausa .i-seguir { display: none; fill: currentColor; stroke: none; }
.carrusel.parado .carrusel-pausa .i-pausa { display: none; }
.carrusel.parado .carrusel-pausa .i-seguir { display: inline; }
.carrusel-puntos { display: flex; gap: 6px; }
/* cada punto es una barra corta; la activa se rellena mientras dura la idea */
.carrusel-puntos button {
  position: relative; width: 26px; height: 18px; padding: 0; border: 0; background: none; cursor: pointer;
}
.carrusel-puntos button::before {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; height: 3px; margin-top: -1.5px; border-radius: 2px; background: var(--linea-fuerte);
}
.carrusel-puntos button::after {
  content: ""; position: absolute; left: 0; top: 50%; height: 3px; margin-top: -1.5px; width: 0; border-radius: 2px; background: var(--menta);
}
.carrusel-puntos button:hover::before { background: var(--texto-suave); }
.carrusel-puntos button[aria-current="true"]::after { width: 100%; }
.carrusel.avanzando .carrusel-puntos button[aria-current="true"]::after { animation: carrusel-barra var(--duracion, 6s) linear forwards; }
.carrusel.pausado .carrusel-puntos button[aria-current="true"]::after { animation-play-state: paused; }
@keyframes carrusel-barra { from { width: 0; } to { width: 100%; } }
@media (prefers-reduced-motion: reduce) {
  .en-marcha .diapositiva, .en-marcha .diapositiva.activa { transition: none; transform: none; }
}

.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-caja { width: min(280px, 80%); margin: 0 auto 16px; }
  .carrusel { margin: 14px auto 0; }
  .carrusel-mandos { justify-content: center; }
  .fondo::after { background: rgba(6, 17, 21, .45); }
}

/* ---------- el linaje: Frege, Russell y Wittgenstein ----------
   Los retratos ya vienen en duotono con los colores del sitio y los bordes en transparencia,
   así que emergen del fondo sin marco */
.linaje { margin-top: 26px; max-width: 460px; }
.linaje h2 { margin: 0 0 10px; font-size: .72rem; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: var(--texto-suave); }
.linaje h2 i { text-transform: none; letter-spacing: .02em; color: var(--menta); }
.linaje-retratos { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.linaje figure { margin: 0; }
.linaje img {
  display: block; width: 100%; height: auto; aspect-ratio: 3 / 4;
  filter: saturate(.9) brightness(.92); transition: filter .4s ease, transform .4s ease;
  /* además del desvanecido del propio retrato, los cuatro lados se funden con el fondo: sin bordes rectos */
  -webkit-mask-image: radial-gradient(ellipse 62% 58% at 50% 44%, #000 58%, transparent 100%);
  mask-image: radial-gradient(ellipse 62% 58% at 50% 44%, #000 58%, transparent 100%);
}
.linaje figure:hover img { filter: saturate(1) brightness(1.05); transform: translateY(-2px); }
.linaje figcaption { margin-top: -18px; position: relative; }
.linaje figcaption b { display: block; font-size: .78rem; font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--menta); }
.linaje figcaption span { display: block; margin-top: 1px; font-size: .68rem; line-height: 1.4; color: var(--texto-suave); font-weight: 300; }
.linaje figcaption span + span { margin-top: 0; font-variant-numeric: tabular-nums; color: color-mix(in srgb, var(--texto-suave) 80%, transparent); }
.linaje-creditos { margin: 10px 0 0; font-size: .62rem; line-height: 1.5; color: color-mix(in srgb, var(--texto-suave) 75%, transparent); font-weight: 300; }
.linaje-creditos a { color: inherit; text-underline-offset: 2px; }
.linaje-creditos a:hover { color: var(--menta); }
@media (prefers-reduced-motion: reduce) { .linaje img { transition: none; } .linaje figure:hover img { transform: none; } }
@media (max-width: 820px) {
  .linaje { margin: 22px auto 0; }
  .linaje-retratos { gap: 10px; }
}

.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; }
}

/* ---------- confianza: qué pasa con el correo, bajo el campo de registro ---------- */
.confianza { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0 0; font-size: .72rem; line-height: 1.5; color: var(--texto-suave); font-weight: 300; }
.confianza svg { flex: none; width: 13px; height: 13px; margin-top: 2px; fill: none; stroke: var(--menta); stroke-width: 1.4; stroke-linejoin: round; stroke-linecap: round; }
.confianza a { color: var(--menta); text-underline-offset: 2px; }
.pie a { color: var(--texto-suave); text-underline-offset: 3px; }
.pie a:hover { color: var(--menta); }