redesign screen-1 and screen-2, add pub status API and FAQ

- add hero video to screen-1 with local Dune Rise font replacing Google Fonts
- screen-2: replace cards with interactive FAQ accordion (6 questions + 5 nested)
- add SSB pub node status monitor with live API polling
- add Flask API (/api/status/ssb, /api/status/ecoind) proxied via nginx
- full responsive CSS rewrite (1024px, 768px, 480px breakpoints)
- strip all accent marks for Dune Rise font compatibility

Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>

api/server.py

@@ -0,0 +1,48 @@
+#!/usr/bin/env python3
+"""0asis.net pub status API"""
+import subprocess, json
+from flask import Flask, jsonify
+
+app = Flask(__name__)
+
+@app.route("/api/status/ssb")
+def ssb_status():
+    try:
+        out = subprocess.run(["ss", "-tlnp"], capture_output=True, text=True, timeout=3)
+        ssb_up = ":8008" in out.stdout
+        peers = None
+        feeds = None
+        if ssb_up:
+            try:
+                st = subprocess.run(
+                    ["ssb-server", "status"],
+                    capture_output=True, text=True, timeout=5
+                )
+                lines = st.stderr + st.stdout
+                # strip sodium warning lines
+                clean = "\n".join(l for l in lines.splitlines() if not l.startswith("error loading") and not l.startswith("Require") and not l.startswith("falling") and not l.startswith("-"))
+                d = json.loads(clean)
+                since = d.get("sync", {}).get("since", -1)
+                gossip = d.get("gossip", {})
+                peers = len([v for v in gossip.values() if isinstance(v, dict) and v.get("connected")])
+                feeds = since if since >= 0 else "syncing"
+            except Exception:
+                pass
+        return jsonify(status="online" if ssb_up else "offline", peers=peers, feeds=feeds)
+    except Exception:
+        pass
+    return jsonify(status="offline", peers=None, feeds=None)
+
+@app.route("/api/status/ecoind")
+def ecoind_status():
+    try:
+        out = subprocess.run(["ecoind", "getinfo"], capture_output=True, text=True, timeout=5)
+        if out.returncode == 0:
+            d = json.loads(out.stdout)
+            return jsonify(status="online", blocks=d.get("blocks"), connections=d.get("connections"))
+    except Exception:
+        pass
+    return jsonify(status="offline", blocks="---", connections="---")
+
+if __name__ == "__main__":
+    app.run(host="127.0.0.1", port=3001)

index.html

@@ -16,15 +16,16 @@
       <img src="images/oasis-logo.webp" alt="OASIS Logo" class="logo">
       <h1 class="main-title">OASIS</h1>
     </div>
-    <div class="intro-block">
+    <div class="hero-video-wrap">
-      <h2>YOUR FREEDOM, OUR FUTURE</h2>
+      <video class="hero-video" autoplay muted loop playsinline>
+        <source src="oasis_web.mp4" type="video/mp4">
+      </video>
     </div>
+
     <div class="buttons">
       <a href="https://oasis-project.pub/#about" class="btn_main">Overview</a>
       <a href="https://oasis-project.pub/#technologies" class="btn_main">Technologies</a>
       <a href="https://oasis-project.pub/#community" class="btn_main">Community</a>
-    </div>
-    <div class="buttons">
       <a href="https://code.03c8.net/KrakensLab/oasis/src/master/install.sh" class="btn_main">Download</a>
       <a href="https://solarnethub.com" class="btn_main">Solarnethub</a>
     </div>
@@ -34,54 +35,150 @@
   <!-- About -->
   <section class="screen screen-2" id="about">
     <div class="content">
-      <h2>ULTIMATE SOCIAL NETWORK</h2>
+      <h2 class="screen2-title">0asis.net <span class="screen2-subtitle">→ oasis desde cero</span></h2>
-      <p>It may sound radical, we are just passionate</p>
-      <div class="buttons">
-        <a href="subdirectorios/overview.html" class="btn">OVERVIEW & RESEARCH</a>
-      </div>
-    </div>
 
-    <div class="content" style="margin-top:2rem;">
+      <div class="faq-section">
-      <h2>STARS IN THE SHADE</h2>
+
-      <div class="card-group">
+        <div class="faq-item">
-        <div class="card">
+          <button class="faq-q" onclick="toggleFaq(this)">
-          <h3>OWN YOUR DATA</h3>
+            ¿QUE PUEDO HACER EN OASIS? <span class="faq-arrow">▼</span>
-          <p>Your data is key for you. You will have your data sovereignly stored and encrypted.</p>
+          </button>
-          <div class="extra-info">
+          <div class="faq-a">OASIS es una plataforma completa con mas de 40 aplicaciones integradas: publicas en tu feed, envias mensajes, participas en foros y eventos, gestionas proyectos colectivos, votas propuestas, compras y vendes en el marketplace, creas y consumes contenido multimedia. Todo desde un mismo lugar, sin publicidad, sin algoritmos que manipulen lo que ves y sin que nadie venda tus datos.</div>
-            <p>Oasis cares data in a truly secure, efficient, respectful and custom network, where you can also publish on the internet.</p>
+        </div>
-            <img src="images/your_data_our_future_candado.webp" alt="Encrypted logo" class="code-image" />
+
-            <p>OASIS reclaims autonomy. It reconnects people through resilient technologies, bypassing gatekeepers, and enabling a new era of decentralized empowerment — for everyone.</p>
+        <div class="faq-item">
+          <button class="faq-q" onclick="toggleFaq(this)">
+            ¿COMO ENTRO? ¿QUE ES UN PUB? <span class="faq-arrow">▼</span>
+          </button>
+          <div class="faq-a">Un PUB es la puerta de entrada a OASIS. Es un servidor comunitario siempre encendido — como una plaza publica — que conecta a los nuevos usuarios con la red. Este servidor, 0asis.net, es uno de esos PUBs. Para unirte, instala OASIS y acepta un invite de este PUB. En segundos estaras sincronizando feeds con la comunidad federada. No necesitas cuenta, no hay registro centralizado.</div>
+        </div>
+
+        <div class="faq-item">
+          <button class="faq-q" onclick="toggleFaq(this)">
+            ¿PUEDO CREAR MI PROPIA COMUNIDAD? <span class="faq-arrow">▼</span>
+          </button>
+          <div class="faq-a">Si. Cualquiera puede levantar su propio PUB y convertirlo en el centro de su comunidad. Dentro de OASIS puedes crear Tribus — espacios colectivos con gobernanza propia, foros, proyectos y economia compartida. No dependes de ninguna plataforma externa para organizarte: las reglas, los miembros y las decisiones las pone la propia comunidad.</div>
+        </div>
+
+        <div class="faq-item">
+          <button class="faq-q" onclick="toggleFaq(this)">
+            ¿LOS DATOS SON REALMENTE MIOS? <span class="faq-arrow">▼</span>
+          </button>
+          <div class="faq-a">Completamente. Tu identidad y tu contenido se almacenan en tu propio dispositivo, cifrados. No existe un servidor central que los controle. Si un nodo cae, la red continua. Si decides irte, te llevas todo contigo. Nadie puede borrarte, silenciarte ni venderte: ni una empresa, ni un gobierno, ni los propios desarrolladores de OASIS.</div>
+        </div>
+
+        <div class="faq-item">
+          <button class="faq-q" onclick="toggleFaq(this)">
+            ¿TIENE ECONOMIA PROPIA? <span class="faq-arrow">▼</span>
+          </button>
+          <div class="faq-a">Si. OASIS integra ECOIN, su token comunitario, con el que puedes participar en el marketplace, acceder a servicios, recompensar contribuciones y co-gobernar la red. Hay modulos de banca, UBI (renta basica universal), mercado de trabajo y contratos inteligentes — todo dentro del ecosistema, sin depender de intermediarios financieros externos.</div>
+        </div>
+
+        <div class="faq-item">
+          <button class="faq-q" onclick="toggleFaq(this)">
+            ¿PUEDO VERLO ANTES DE INSTALAR NADA? <span class="faq-arrow">▼</span>
+          </button>
+          <div class="faq-a">Si. Hay una demo publica en <a href="https://demo.oasis-project.pub" target="_blank" style="color:var(--orange-neon)">demo.oasis-project.pub</a> donde puedes explorar todos los modulos — feeds, gobernanza, economia, media — directamente desde el navegador, sin instalar nada. Es la forma mas rapida de hacerte una idea de lo que OASIS puede hacer por ti y tu comunidad.</div>
+        </div>
+
+        <div class="faq-item faq-item-parent">
+          <button class="faq-q" onclick="toggleFaq(this)">
+            ¿QUE MAS PUEDO HACER? <span class="faq-arrow">▼</span>
+          </button>
+          <div class="faq-a faq-a-nested">
+            <div class="faq-section faq-nested">
+
+              <div class="faq-item faq-item-sub">
+                <button class="faq-q faq-q-sub" onclick="toggleFaqSub(this)">
+                  ¿COMO CREO UNA TRIBU? <span class="faq-arrow">▼</span>
+                </button>
+                <div class="faq-a">Una Tribu es tu comunidad dentro de OASIS: tiene su propio foro, proyectos, economia y gobernanza. Para crearla, entra en el modulo <strong>Tribes</strong>, elige nombre, describe su proposito y define las reglas de acceso — abierta o por invitacion. Desde ese momento puedes invitar miembros, lanzar propuestas de voto, gestionar un fondo comun con ECOIN y organizar eventos propios.</div>
+              </div>
+
+              <div class="faq-item faq-item-sub">
+                <button class="faq-q faq-q-sub" onclick="toggleFaqSub(this)">
+                  ¿COMO PUEDO ENCONTRAR TRABAJO? <span class="faq-arrow">▼</span>
+                </button>
+                <div class="faq-a">OASIS tiene un modulo de <strong>Jobs</strong>. Puedes publicar tu perfil profesional, explorar ofertas de trabajo publicadas por tribus y proyectos, ofrecer servicios y contratar a otros miembros. Los pagos se gestionan en ECOIN directamente, sin intermediarios. Un mercado de trabajo horizontal donde el valor circula entre personas.</div>
+              </div>
+
+              <div class="faq-item faq-item-sub">
+                <button class="faq-q faq-q-sub" onclick="toggleFaqSub(this)">
+                  ¿COMO PUBLICO UN BLOG? <span class="faq-arrow">▼</span>
+                </button>
+                <div class="faq-a">Desde el modulo <strong>Media</strong> puedes redactar entradas de blog con texto, imagenes y video, asignarles etiquetas y publicarlas en tu feed personal o en la tribu que elijas. Tu contenido queda en tu nodo — nadie puede borrarlo ni censurarlo. Si otros nodos te replican, tu blog vivira en la red aunque apagues tu dispositivo.</div>
+              </div>
+
+              <div class="faq-item faq-item-sub">
+                <button class="faq-q faq-q-sub" onclick="toggleFaqSub(this)">
+                  ¿COMO CREO MI PROPIA TIENDA? <span class="faq-arrow">▼</span>
+                </button>
+                <div class="faq-a">El modulo <strong>Market</strong> te permite abrir tu tienda en minutos: sube productos o servicios, fija precio en ECOIN, gestiona pedidos y cobros. Sin comisiones de plataforma, sin algoritmo que decida quien te ve. Tambien puedes usar contratos inteligentes para garantizar transacciones entre partes que no se conocen.</div>
+              </div>
+
+              <div class="faq-item faq-item-sub">
+                <button class="faq-q faq-q-sub" onclick="toggleFaqSub(this)">
+                  ¿QUE OTROS MODULOS HAY? <span class="faq-arrow">▼</span>
+                </button>
+                <div class="faq-a">Votar en el <strong>Parlamento</strong>, cobrar <strong>UBI</strong> (renta basica), gestionar tu <strong>CV</strong> y cartera digital, subir audio y video, organizar eventos, resolver conflictos en el <strong>Court</strong>, contribuir a proyectos open source con recompensas en ECOIN... mas de 40 modulos en total. Exploralos en <a href="https://demo.oasis-project.pub" target="_blank" style="color:var(--orange-neon)">demo.oasis-project.pub</a>.</div>
+              </div>
+
+            </div>
           </div>
         </div>
-        <div class="card">
+
-          <h3>Deeply GrassRoots</h3>
+      </div>
-          <p>OASIS is the long-term, deeply cared idea of a collective mind.</p>
+
-          <div class="extra-info">
+      <div class="buttons" style="margin-top:2.5rem;">
-            <img src="images/deeply_grasroots_placa.webp" alt="Encrypted logo" class="code-image" />
+        <a href="subdirectorios/overview.html" class="btn-overview">OVERVIEW &amp; RESEARCH</a>
-            <p>Oasis founders and maintainers feel and will feel the freedom pulse for a long time. The ideation and implementation of the infrastructure carries thought and poetry. We are pleased to feature tools that guide ecological and personal maintenance and development.</p>
+      </div>
+
+      <div class="pub-terminal" style="margin-top:2.5rem;">
+      <div class="term-header">
+        <span class="term-prompt">⟁</span> 0ASIS PUB :: N0DE STATUS M0NIT0R
+      </div>
+      <div class="term-grid">
+        <div class="term-card">
+          <div class="term-card-head">
+            <span class="term-svc">⟁ SSB PUB</span>
+            <div class="term-indicator">
+              <div class="term-dot checking" id="ssb-dot"></div>
+              <span class="term-status checking" id="ssb-status">CH3CKING...</span>
+            </div>
           </div>
+          <div class="term-row">P0RT <span>8008</span></div>
+          <div class="term-row">N3TW0RK <span>0ASIS F3D</span></div>
+          <div class="term-row" id="ssb-feeds">F33DS <span>---</span></div>
+          <div class="term-row" id="ssb-peers">P33RS <span>---</span></div>
         </div>
-        <div class="card">
+        <div class="term-card">
-          <h3>Integral Sovereignity</h3>
+          <div class="term-card-head">
-          <p>We care about thriving all important and basic territories of your digital life.</p>
+            <span class="term-svc">₿ 3C0IND</span>
-          <div class="extra-info">
+            <div class="term-indicator">
-            <img src="images/asamblea.webp" alt="Encrypted logo" class="code-image" />
+              <div class="term-dot checking" id="eco-dot"></div>
-            <p>OASIS cares about thriving all important and basic territories of your digital life. <br />OASIS offers features that guide ecological, economical, social and personal development. </p>
+              <span class="term-status checking" id="eco-status">CH3CKING...</span>
-	  </div>
+            </div>
-        </div>
-        <div class="card">
-          <h3>Open Community</h3>
-          <p>Watch us hands-on, evolve us in our forums, thrive with us, fork us.</p>
-          <div class="extra-info">
-            <img src="images/open_community_asambleas.webp" alt="Encrypted logo" class="code-image" />
-            <p>As a distributed project, we focus on evolving decentralization dynamics for the project’s caretaking. Dive in and discover new management sparks.</p>
           </div>
+          <div class="term-row">P0RT <span>7408</span></div>
+          <div class="term-row">N3TW0RK <span>3C0IN MAIN</span></div>
+          <div class="term-row" id="eco-blocks">BL0CKS <span>---</span></div>
+          <div class="term-row" id="eco-conns">C0NNS <span>---</span></div>
         </div>
       </div>
+      <div class="term-pubinfo">
+        <div class="term-pubinfo-line">
+          <span class="term-label">PUB KEY</span>
+          <span class="term-val">@Tpv8GV08SDKuYmlkNVw+wRK9AXDTS/mwxJ29qsL00rc=.ed25519</span>
+        </div>
+        <div class="term-pubinfo-line">
+          <span class="term-label">CONNECT</span>
+          <span class="term-val">net:0asis.net:8008~shs:zTmidAb7t+tKi7W93FIHbOvlbd936x6G/vm8e8Td//A=</span>
+        </div>
+      </div>
+      <div class="term-lastcheck" id="term-lastcheck">LAST CH3CK: ---</div>
+      </div>
     </div>
 
-  </section>
-
   </section>
   <!-- Technologies -->
   <section class="screen screen-3" id="technologies">
@@ -107,9 +204,9 @@
 
         <!-- 2) DECENTRALIZED & FEDERATED -->
         <div class="card">
-          <h3>DECENTRALIZED &amp; FEDERATED</h3>
+          <h3>DISTRIBUTED &amp; FEDERATED</h3>
           <div class="extra-info">
-            <p>There is no central point of failure. Data replication is social: it follows trust, not hierarchy.</p>
+            <p>Data replication is social: it follows trust, not hierarchy.</p>
             <img src="images/imagotipo_decentralization_simple.png" alt="Decentralized logo" class="code-image" />
             <p>PUBs act as community mirrors with HTTPS frontends, making content accessible from the clearnet while preserving protocol integrity.</p>
             <img src="images/imagotipo_decentralized.png" alt="Federated logo" class="code-image" />
@@ -192,5 +289,62 @@
 
   </footer>
 
+<script>
+function toggleFaq(btn) {
+  const item = btn.closest('.faq-item');
+  const isOpen = item.classList.contains('open');
+  document.querySelectorAll('.faq-section > .faq-item.open').forEach(el => el.classList.remove('open'));
+  if (!isOpen) item.classList.add('open');
+}
+
+function toggleFaqSub(btn) {
+  const item = btn.closest('.faq-item-sub');
+  const isOpen = item.classList.contains('open');
+  item.closest('.faq-nested').querySelectorAll('.faq-item-sub.open').forEach(el => el.classList.remove('open'));
+  if (!isOpen) item.classList.add('open');
+}
+
+async function checkPubStatus() {
+  document.getElementById('term-lastcheck').textContent =
+    'LAST CH3CK: ' + new Date().toLocaleTimeString('en-US', {hour12: false});
+
+  try {
+    const r = await fetch('/api/status/ssb');
+    if (r.ok) {
+      const d = await r.json();
+      setTerm('ssb', d.status);
+      if (d.feeds !== undefined)
+        document.getElementById('ssb-feeds').innerHTML = 'F33DS <span>' + d.feeds + '</span>';
+      if (d.peers !== undefined)
+        document.getElementById('ssb-peers').innerHTML = 'P33RS <span>' + (d.peers ?? 'N/A') + '</span>';
+    } else { setTerm('ssb', 'offline'); }
+  } catch(e) { setTerm('ssb', 'offline'); }
+
+  try {
+    const r = await fetch('/api/status/ecoind');
+    if (r.ok) {
+      const d = await r.json();
+      setTerm('eco', d.status);
+      if (d.blocks !== undefined)
+        document.getElementById('eco-blocks').innerHTML = 'BL0CKS <span>' + d.blocks + '</span>';
+      if (d.connections !== undefined)
+        document.getElementById('eco-conns').innerHTML = 'C0NNS <span>' + d.connections + '</span>';
+    } else { setTerm('eco', 'offline'); }
+  } catch(e) { setTerm('eco', 'offline'); }
+}
+
+function setTerm(id, state) {
+  const dot = document.getElementById(id + '-dot');
+  const txt = document.getElementById(id + '-status');
+  dot.className = 'term-dot ' + state;
+  txt.className = 'term-status ' + state;
+  txt.textContent = state === 'online' ? '0NLIN3' : '0FFLIN3';
+}
+
+document.addEventListener('DOMContentLoaded', () => {
+  checkPubStatus();
+  setInterval(checkPubStatus, 30000);
+});
+</script>
 </body>
 </html>

styles.css

@@ -1,12 +1,19 @@
-@import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@600&family=Rajdhani:wght@400;700&display=swap');
+@font-face {
+  font-family: "Dune Rise";
+  src: url("/fonts/Dune_Rise.otf") format("opentype"),
+       url("/fonts/Dune_Rise.ttf") format("truetype");
+  font-weight: normal;
+  font-style: normal;
+  font-display: swap;
+}
 
 :root {
   --orange-neon: #FF5E00;
   --yellow: #FFD700;
   --black: #000000;
   --highlight: #FF8C00;
-  --font-body: 'Rajdhani', sans-serif;
+  --font-body: "Dune Rise", sans-serif;
-  --font-display: 'Orbitron', sans-serif;
+  --font-display: "Dune Rise", sans-serif;
 }
 
 * {
@@ -127,16 +134,16 @@ body {
 /* === Tagline justo debajo y centrado === */
 .screen-1 .intro-block {
   position: relative;
-  margin-top: 8rem;      /* separa del header */
+  margin-top: 0;
   display: flex;
   justify-content: center;
 }
 
 .screen-1 .intro-block h2 {
-  font-size: 3rem;       /* más grande */
+  font-size: 2.2rem;
-  color: #42FF00;        /* verde puro */
+  color: #42FF00;
   text-shadow: 0 0 6px #42FF00;
-  margin-top: 14rem;
+  margin-top: 7rem;
   text-align: center;
 }
 
@@ -185,7 +192,8 @@ body {
   text-decoration: none;
   transition: all 0.3s ease;
   justify-content: center;
-  font-size: 2em;
+  font-size: 1.6rem;
+  padding: 0.5rem 1.4rem;
 }
 
 
@@ -379,217 +387,436 @@ body {
   border-top: 1px solid var(--orange-neon);
 }
 
+/* === Hero video (screen-1) === */
+.hero-video-wrap {
+  width: 100%;
+  max-width: 980px;
+  margin: 9rem auto 0;
+  border: 2px solid var(--orange-neon);
+  box-shadow: 0 0 20px rgba(255, 94, 0, 0.4);
+  border-radius: 6px;
+  overflow: hidden;
+}
+.hero-video {
+  width: 100%;
+  display: block;
+}
+
+/* === Screen-2 title === */
+.screen2-title {
+  font-size: 3rem;
+  color: var(--orange-neon);
+  font-family: var(--font-display);
+  margin-bottom: 1.5rem;
+  text-shadow: 0 0 8px var(--orange-neon);
+}
+.screen2-subtitle {
+  font-size: 1.4rem;
+  color: var(--yellow);
+  text-shadow: none;
+  letter-spacing: 0.05em;
+}
+.btn-sm {
+  font-size: 0.85rem !important;
+  padding: 0.4rem 1rem;
+}
+.btn-overview {
+  display: inline-block;
+  background: var(--yellow);
+  color: #000;
+  font-family: var(--font-display);
+  font-size: 2rem;
+  font-weight: bold;
+  padding: 1rem 3rem;
+  border: 3px solid var(--yellow);
+  border-radius: 6px;
+  text-decoration: none;
+  letter-spacing: 0.08em;
+  box-shadow: 0 0 20px rgba(255, 215, 0, 0.4);
+  transition: all 0.3s ease;
+}
+.btn-overview:hover {
+  background: transparent;
+  color: var(--yellow);
+  box-shadow: 0 0 35px rgba(255, 215, 0, 0.7);
+  transform: scale(1.04);
+}
+
+/* === FAQ Accordion (screen-2) === */
+.faq-section {
+  margin-top: 2rem;
+  display: flex;
+  flex-direction: column;
+  gap: 0.8rem;
+}
+.faq-item {
+  border: 1px solid var(--orange-neon);
+  border-radius: 6px;
+  overflow: hidden;
+}
+.faq-q {
+  width: 100%;
+  background: rgba(255, 94, 0, 0.08);
+  border: none;
+  color: var(--yellow);
+  font-family: var(--font-display);
+  font-size: 1.1rem;
+  text-align: left;
+  padding: 1rem 1.4rem;
+  cursor: pointer;
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  transition: background 0.3s;
+  letter-spacing: 0.05em;
+}
+.faq-q:hover {
+  background: rgba(255, 94, 0, 0.18);
+}
+.faq-q .faq-arrow {
+  color: var(--orange-neon);
+  font-size: 1.2rem;
+  transition: transform 0.3s;
+  flex-shrink: 0;
+}
+.faq-item.open .faq-arrow {
+  transform: rotate(180deg);
+}
+.faq-a {
+  max-height: 0;
+  overflow: hidden;
+  transition: max-height 0.4s ease, padding 0.3s ease;
+  padding: 0 1.4rem;
+  color: rgba(255, 215, 0, 0.8);
+  font-family: var(--font-body);
+  font-size: 0.95rem;
+  line-height: 1.7;
+  background: rgba(0, 0, 0, 0.5);
+}
+.faq-item.open > .faq-a {
+  max-height: 1200px;
+  padding: 1rem 1.4rem;
+}
+
+/* Nested FAQ */
+.faq-a-nested {
+  padding: 0.5rem 0 !important;
+  background: transparent;
+}
+.faq-nested {
+  margin-top: 0;
+  gap: 0.5rem;
+}
+.faq-item-sub {
+  border-color: rgba(255, 94, 0, 0.3);
+}
+.faq-q-sub {
+  font-size: 0.9rem;
+  background: rgba(255, 94, 0, 0.04);
+  padding: 0.7rem 1rem;
+}
+.faq-item-sub.open > .faq-a {
+  max-height: 400px;
+  padding: 0.8rem 1rem;
+}
+
+/* === Pub terminal panel (screen-2) === */
+@font-face {
+  font-family: "JetBrains Mono";
+  font-style: normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("/fonts/JetBrainsMono-Regular.woff2") format("woff2");
+}
+@font-face {
+  font-family: "JetBrains Mono";
+  font-style: normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url("/fonts/JetBrainsMono-Bold.woff2") format("woff2");
+}
+
+.pub-terminal {
+  font-family: "JetBrains Mono", "Courier New", monospace;
+  font-size: 1rem;
+  border: 2px solid var(--orange-neon);
+  box-shadow: 0 0 25px rgba(255, 94, 0, 0.2);
+  position: relative;
+  overflow: hidden;
+}
+.pub-terminal::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  pointer-events: none;
+  background: repeating-linear-gradient(0deg, rgba(0,0,0,0.08), rgba(0,0,0,0.08) 1px, transparent 1px, transparent 2px);
+  z-index: 0;
+}
+.pub-terminal > * { position: relative; z-index: 1; }
+
+.term-header {
+  color: var(--orange-neon);
+  text-align: center;
+  font-size: 1.1rem;
+  letter-spacing: 0.2em;
+  margin-bottom: 1.5rem;
+  text-shadow: 0 0 10px var(--orange-neon);
+  border-bottom: 1px solid rgba(255, 94, 0, 0.3);
+  padding-bottom: 1rem;
+}
+.term-prompt { color: var(--yellow); margin-right: 0.5rem; }
+
+.term-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1.2rem;
+  margin-bottom: 1.5rem;
+}
+.term-card {
+  border: 1px solid rgba(255, 94, 0, 0.4);
+  padding: 1rem 1.2rem;
+  background: rgba(0, 0, 0, 0.6);
+  border-radius: 4px;
+  transition: border-color 0.3s, box-shadow 0.3s;
+}
+.term-card:hover {
+  border-color: var(--orange-neon);
+  box-shadow: 0 0 12px rgba(255, 94, 0, 0.3);
+}
+.term-card-head {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  margin-bottom: 0.8rem;
+  padding-bottom: 0.8rem;
+  border-bottom: 1px dashed rgba(255, 94, 0, 0.3);
+}
+.term-svc { color: var(--yellow); font-weight: bold; font-size: 0.95rem; }
+.term-indicator { display: flex; align-items: center; gap: 6px; }
+.term-dot { width: 10px; height: 10px; border-radius: 50%; }
+.term-dot.online  { background: #42FF00; box-shadow: 0 0 8px #42FF00; animation: pulse-dot 2s infinite; }
+.term-dot.offline { background: #ff3333; box-shadow: 0 0 8px #ff3333; }
+.term-dot.checking{ background: var(--yellow); box-shadow: 0 0 8px var(--yellow); animation: pulse-dot 1s infinite; }
+@keyframes pulse-dot { 0%,100%{opacity:1} 50%{opacity:0.5} }
+
+.term-status { font-size: 0.75rem; letter-spacing: 0.1em; text-transform: uppercase; }
+.term-status.online  { color: #42FF00; }
+.term-status.offline { color: #ff3333; }
+.term-status.checking{ color: var(--yellow); }
+
+.term-row {
+  display: flex;
+  justify-content: space-between;
+  font-size: 0.85rem;
+  color: rgba(255, 215, 0, 0.6);
+  margin: 0.3rem 0;
+}
+.term-row span { color: var(--orange-neon); font-weight: bold; }
+
+.term-pubinfo {
+  border: 1px dashed rgba(255, 94, 0, 0.3);
+  padding: 0.8rem 1rem;
+  margin-bottom: 1rem;
+  background: rgba(0,0,0,0.4);
+  border-radius: 4px;
+  word-break: break-all;
+}
+.term-pubinfo-line {
+  display: flex;
+  gap: 1rem;
+  font-size: 0.78rem;
+  margin: 0.3rem 0;
+  flex-wrap: wrap;
+}
+.term-label { color: var(--orange-neon); min-width: 80px; flex-shrink: 0; }
+.term-val   { color: rgba(255, 215, 0, 0.7); font-family: "JetBrains Mono", monospace; }
+
+.term-lastcheck {
+  text-align: center;
+  font-size: 0.75rem;
+  color: rgba(255, 215, 0, 0.4);
+  padding-top: 0.5rem;
+  border-top: 1px solid rgba(255, 94, 0, 0.15);
+}
+
+/* ===== TABLET GRANDE (≤1024px) ===== */
+@media (max-width: 1024px) {
+  .screen-1 .header .logo {
+    left: 3rem;
+    top: 2rem;
+    height: 110px;
+  }
+  .screen-1 .header .main-title {
+    font-size: 7rem;
+  }
+  .hero-video-wrap {
+    margin-top: 6rem;
+    max-width: 720px;
+  }
+  .content {
+    font-size: 1.4rem;
+    padding: 2rem 1.5rem;
+  }
+  .btn_main {
+    font-size: 1.2rem;
+  }
+  .btn-overview {
+    font-size: 1.5rem;
+    padding: 0.8rem 2rem;
+  }
+}
+
+/* ===== TABLET / MÓVIL LANDSCAPE (≤768px) ===== */
 @media (max-width: 768px) {
-  .header .main-title {
+  /* Fix background fixed — no funciona bien en iOS */
-    font-size: 5rem;
+  .screen {
-    font-family: var(--font-display);
+    background-attachment: scroll;
-    color: var(--orange-neon);
+    padding: 2.5rem 1.2rem;
-    text-shadow: 0 0 10px var(--orange-neon);
   }
 
-  .buttons {
+  /* Header screen-1: apilado vertical centrado */
-    margin-top: 2rem;
+  .screen-1 .header {
-    display: flex;
-    gap: 1.5rem;
-    flex-wrap: wrap;
-    text-align: center;
-    justify-content: center;
-  }
-
-  .main-nav ul {
-    flex-direction: row;
-    flex-wrap: wrap;
-    gap: 1rem;
-    justify-content: center;
-  }
-
-  .main-nav a {
-    font-size: 0.8rem;
-  }
-
-  .intro-block {
     position: absolute;
-    bottom: 30%;
+    top: 1.2rem;
-    text-align: center;
+    left: 0; right: 0;
-  }
-
-  .logo-title-wrap {
     flex-direction: column;
-    margin-bottom: 8rem;
+    align-items: center;
-    alighn: center;
+    gap: 0;
+  }
+  .screen-1 .header .logo {
+    position: relative;
+    left: auto; top: auto;
+    height: 65px;
+    margin: 0 auto;
+  }
+  .screen-1 .header .main-title,
+  .header .main-title {
+    font-size: 4.5rem;
+    margin-top: 0.4rem;
+  }
+  .screen-1 .intro-block h2 {
+    font-size: 1.3rem;
+    margin-top: 2.5rem;
   }
 
-  .card-group {
+  .hero-video-wrap {
-    flex-direction: column;
+    margin-top: 1.8rem;
-  }
-
-  .card-group .card {
-    flex: 1 1 100%;
     max-width: 100%;
   }
 
-  .card .btn {
+  .buttons {
-    display: block;
+    gap: 0.7rem;
-    text-align: center;
-  }
-  .card .buttons {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-wrap: wrap;
-    text-align: center;
-    gap: 1rem;
     margin-top: 1rem;
+    margin-bottom: 1rem;
+  }
+  .btn_main {
+    font-size: 0.95rem;
+    padding: 0.4rem 0.9rem;
   }
 
-  .header .logo {
+  .content {
-    height: 60px;
-  }
-
-  .content h2 {
-    font-size: 2rem;
-    text-align: center;
-  }
-
-  .card h3 {
-    font-size: 1.2rem;
-  }
-
-  .card p {
     font-size: 1rem;
+    padding: 1.5rem 1rem;
+  }
+  .content h2 { font-size: 1.7rem; }
+
+  .screen2-title { font-size: 1.8rem; }
+  .screen2-subtitle { font-size: 0.95rem; }
+
+  .btn-overview {
+    font-size: 1.1rem;
+    padding: 0.7rem 1.5rem;
+    width: 100%;
+    text-align: center;
+    box-sizing: border-box;
   }
 
- .card .extra-info {
+  .faq-q {
-    max-height: 0;
+    font-size: 0.85rem;
-    overflow: hidden;
+    padding: 0.8rem 1rem;
-    opacity: 0;
+  }
-    visibility: hidden;
+  .faq-a { font-size: 0.85rem; }
+
+  .term-grid { grid-template-columns: 1fr; }
+  .term-header { font-size: 0.9rem; letter-spacing: 0.1em; }
+
+  .card-group { flex-direction: column; }
+  .card-group .card { flex: 1 1 100%; max-width: 100%; }
+  .card h3 { font-size: 1.1rem; }
+  .card p  { font-size: 0.9rem; }
+  .card .btn { display: block; text-align: center; }
+  .card .buttons { justify-content: center; gap: 0.8rem; margin-top: 0.8rem; }
+  .card .extra-info {
+    max-height: 0; overflow: hidden; opacity: 0; visibility: hidden;
     margin-top: 0;
     transition: max-height 0.4s ease, opacity 0.4s ease, margin-top 0.4s ease;
   }
-
   .card.expanded .extra-info,
   .card:hover .extra-info {
-    max-height: 750px;
+    max-height: 750px; opacity: 1; visibility: visible; margin-top: 1rem;
-    opacity: 1;
-    visibility: visible;
-    margin-top: 1rem;
   }
 }
 
+/* ===== MÓVIL PORTRAIT (≤480px) ===== */
 @media (max-width: 480px) {
-  /* stack title → logo (instead of column-reverse) */
+  .screen { padding: 1.5rem 0.8rem; }
-  .header {
-    flex-direction: column;
-    align-items: center;
-    top: 4rem;               /* pull the whole header down */
-  }
 
-  /* much smaller heading */
+  .screen-1 .header .logo {
+    height: 50px;
+  }
+  .screen-1 .header .main-title,
   .header .main-title {
-    font-size: 5rem !important;   /* force it */
+    font-size: 3rem !important;
-    margin: 2rem 0;             /* some breathing room */
+    margin-top: 0.3rem;
     line-height: 1.1;
   }
-
+  .screen-1 .intro-block h2 {
-  /* Logo centrado y separado del título */
-  .header .logo {
-    order: 2;
-    margin: 5rem -2rem ; /* arriba, auto (centra), abajo */
-    height: 100px;             /* ajusta a tu gusto */
-    display: block;           /* para que margin-auto centre bien */
-  }
-
-
-
-  .main-nav ul {
-    gap: 0.5rem;
-  }
-
-  .main-nav a {
-    font-size: 0.7rem;
-  }
-
-  .intro-block {
-    position: absolute;
-    bottom: 30%;
-    text-align: center;
-  }
-
-  .intro-text h2 {
-    font-size: 1.5rem;
-    text-align: left;
-  }
-
-  .intro-text span {
-    font-size: 1.6rem;
-  }
-
-  .btn {
-    font-size: 1.2rem;
-    justify-content: center;
-  }
-
-  .buttons {
-    margin-top: 2rem;
-    display: flex;
-    gap: 1.5rem;
-    flex-wrap: wrap;
-    text-align: center;
-    justify-content: center;
-  }
-
-  .card h3 {
     font-size: 1rem;
+    margin-top: 1.8rem;
   }
 
-  .card-group {
+  .hero-video-wrap { margin-top: 1.2rem; }
-    flex-direction: column;
+
+  .buttons { gap: 0.5rem; margin-top: 0.8rem; margin-bottom: 0.8rem; }
+  .btn_main {
+    font-size: 0.8rem;
+    padding: 0.35rem 0.7rem;
   }
 
-  .card-group .card {
+  .content { font-size: 0.9rem; padding: 1rem 0.8rem; }
-    flex: 1 1 100%;
+  .content h2 { font-size: 1.3rem; }
-    max-width: 100%;
-  }
 
-  .card p {
+  .screen2-title { font-size: 1.4rem; }
-    font-size: 0.9rem;
+  .screen2-subtitle { font-size: 0.8rem; display: block; margin-top: 0.3rem; }
-  }
 
-  .card .btn {
+  .btn-overview {
-    display: block;
+    font-size: 0.95rem;
-    text-align: center;
+    padding: 0.6rem 1rem;
-  }
+    width: 100%;
-  .card .buttons {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    flex-wrap: wrap;
-    text-align: center;
-    gap: 1rem;
-    margin-top: 1rem;
-  }
-
-  .content h2 {
-    font-size: 1.4rem;
     text-align: center;
   }
 
+  .faq-q { font-size: 0.78rem; padding: 0.7rem 0.8rem; }
+  .faq-a { font-size: 0.8rem; line-height: 1.6; }
+
+  .term-header { font-size: 0.8rem; }
+  .term-svc { font-size: 0.8rem; }
+  .term-row { font-size: 0.75rem; }
+  .term-pubinfo-line { font-size: 0.7rem; }
+
+  .card h3 { font-size: 1rem; }
+  .card p  { font-size: 0.85rem; }
+  .card-group { flex-direction: column; }
+  .card-group .card { flex: 1 1 100%; max-width: 100%; }
+  .card .btn { display: block; text-align: center; }
+  .card .buttons { justify-content: center; gap: 0.7rem; margin-top: 0.8rem; }
   .card .extra-info {
-    max-height: 0;
+    max-height: 0; overflow: hidden; opacity: 0; visibility: hidden; margin-top: 0;
-    overflow: hidden;
-    opacity: 0;
-    visibility: hidden;
-    margin-top: 0;
     transition: max-height 0.4s ease, opacity 0.4s ease;
   }
-
   .card:hover .extra-info,
   .card.expanded .extra-info {
-    max-height: 750px;
+    max-height: 750px; opacity: 1; visibility: visible; margin-top: 1rem;
-    opacity: 1;
-    visibility: visible;
-    margin-top: 1rem;
   }
 }