<!DOCTYPE html>
<html lang="es">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="medico.eth — La Identidad Digital Descentralizada de la Medicina. Acceso exclusivo para titulares de subdominios.">
<meta property="og:title" content="medico.eth — Identidad Descentralizada + Área Exclusiva">
<meta property="og:type" content="website">
<meta property="og:url" content="https://medico.eth.limo">
<title>medico.eth — Identidad Digital Descentralizada de la Medicina</title>
<style>
  @import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800;900&display=swap');
  :root {
    --primary: #0a1628; --secondary: #1a2a4a; --accent: #00d4aa; --accent2: #7c3aed; --accent3: #f59e0b;
    --glass: rgba(255,255,255,0.03); --glass-border: rgba(255,255,255,0.06);
    --text: #e2e8f0; --text-dim: #8892a8;
    --gradient-1: linear-gradient(135deg, #00d4aa 0%, #7c3aed 50%, #f59e0b 100%);
    --gradient-2: linear-gradient(90deg, #00d4aa, #7c3aed);
    --gradient-3: linear-gradient(135deg, #0a1628 0%, #1a2a4a 100%);
  }
  * { margin:0; padding:0; box-sizing:border-box; }
  html { scroll-behavior: smooth; scrollbar-width:thin; scrollbar-color:var(--accent) var(--primary); }
  body {
    font-family:'Inter',-apple-system,sans-serif; background:var(--primary); color:var(--text);
    overflow-x:hidden; line-height:1.6;
  }
  .bg-grid {
    position:fixed; inset:0; pointer-events:none; z-index:0;
    background-image:linear-gradient(rgba(0,212,170,0.03) 1px,transparent 1px),linear-gradient(90deg,rgba(0,212,170,0.03) 1px,transparent 1px);
    background-size:60px 60px;
  }
  .bg-glow {
    position:fixed; border-radius:50%; filter:blur(120px); opacity:0.12; pointer-events:none; z-index:0;
  }
  .bg-glow-1{width:600px;height:600px;top:-200px;right:-200px;background:var(--accent)}
  .bg-glow-2{width:500px;height:500px;bottom:-150px;left:-150px;background:var(--accent2)}
  .grain {
    position:fixed; inset:0; pointer-events:none; z-index:0; opacity:0.025;
    background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
    background-size:256px 256px;
  }

  /* NAV */
  nav {
    position:fixed; top:0; left:0; right:0; z-index:100;
    backdrop-filter:blur(20px); background:rgba(10,22,40,0.8);
    border-bottom:1px solid var(--glass-border); transition:all 0.3s;
  }
  nav.scrolled{background:rgba(10,22,40,0.95);border-bottom-color:rgba(0,212,170,0.1)}
  .nav-inner{max-width:1280px;margin:0 auto;padding:16px 40px;display:flex;align-items:center;justify-content:space-between}
  .nav-logo{display:flex;align-items:center;gap:12px;text-decoration:none}
  .nav-logo-icon{width:40px;height:40px;border-radius:12px;background:var(--gradient-2);display:flex;align-items:center;justify-content:center;font-weight:900;font-size:18px;color:var(--primary)}
  .nav-logo-text{font-size:20px;font-weight:700;color:var(--text)}
  .nav-logo-text span{color:var(--accent)}
  .nav-links{display:flex;gap:32px;list-style:none;align-items:center}
  .nav-links a{color:var(--text-dim);text-decoration:none;font-size:14px;font-weight:500;transition:color 0.3s;position:relative}
  .nav-links a::after{content:'';position:absolute;bottom:-4px;left:0;width:0;height:2px;background:var(--gradient-2);transition:width 0.3s}
  .nav-links a:hover{color:var(--text)}
  .nav-links a:hover::after{width:100%}
  .nav-cta{background:var(--gradient-2);color:var(--primary)!important;padding:10px 24px;border-radius:50px;font-weight:600!important;transition:all 0.3s!important}
  .nav-cta:hover{transform:translateY(-2px);box-shadow:0 8px 30px rgba(0,212,170,0.3)}
  .nav-cta::after{display:none!important}
  .login-btn {
    background:rgba(0,212,170,0.1);color:var(--accent)!important;padding:10px 20px;border-radius:50px;
    font-weight:600!important;font-size:13px!important;border:1px solid rgba(0,212,170,0.2);transition:all 0.3s!important;cursor:pointer
  }
  .login-btn:hover{background:rgba(0,212,170,0.15);transform:translateY(-2px)}

  /* HERO */
  .hero{position:relative;z-index:1;min-height:100vh;display:flex;align-items:center;justify-content:center;padding:120px 40px 80px}
  .hero-content{max-width:1100px;text-align:center}
  .hero-badge{display:inline-flex;align-items:center;gap:8px;padding:8px 20px;border-radius:50px;background:rgba(0,212,170,0.1);border:1px solid rgba(0,212,170,0.2);font-size:13px;font-weight:500;color:var(--accent);margin-bottom:32px;animation:fadeInDown 0.8s ease}
  .hero-badge .dot{width:8px;height:8px;border-radius:50%;background:var(--accent);animation:pulse-dot 2s infinite}
  @keyframes pulse-dot{0%,100%{opacity:1;box-shadow:0 0 0 0 rgba(0,212,170,0.5)}50%{opacity:0.7;box-shadow:0 0 0 8px rgba(0,212,170,0)}}
  .hero h1{font-size:clamp(3rem,8vw,6rem);font-weight:900;line-height:1.05;margin-bottom:24px;animation:fadeInUp 0.8s ease 0.1s both}
  .hero h1 .gradient-text{background:var(--gradient-1);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}
  .hero h1 .typewriter{display:inline-block;position:relative}
  .hero h1 .typewriter::after{content:'|';animation:blink 1s step-end infinite;color:var(--accent);font-weight:300}
  @keyframes blink{50%{opacity:0}}
  .hero-sub{font-size:clamp(1.05rem,2vw,1.3rem);color:var(--text-dim);max-width:750px;margin:0 auto 40px;line-height:1.7;animation:fadeInUp 0.8s ease 0.2s both}
  .hero-buttons{display:flex;gap:16px;justify-content:center;flex-wrap:wrap;animation:fadeInUp 0.8s ease 0.3s both}
  .btn-primary{display:inline-flex;align-items:center;gap:8px;padding:16px 36px;border-radius:50px;background:var(--gradient-2);color:var(--primary);font-weight:600;font-size:16px;text-decoration:none;transition:all 0.3s;border:none;cursor:pointer}
  .btn-primary:hover{transform:translateY(-3px);box-shadow:0 12px 40px rgba(0,212,170,0.35)}
  .btn-secondary{display:inline-flex;align-items:center;gap:8px;padding:16px 36px;border-radius:50px;background:transparent;color:var(--text);font-weight:500;font-size:16px;text-decoration:none;transition:all 0.3s;border:1px solid rgba(255,255,255,0.15)}
  .btn-secondary:hover{border-color:var(--accent);color:var(--accent);transform:translateY(-3px)}
  @keyframes fadeInUp{from{opacity:0;transform:translateY(30px)}to{opacity:1;transform:translateY(0)}}
  @keyframes fadeInDown{from{opacity:0;transform:translateY(-20px)}to{opacity:1;transform:translateY(0)}}
  .scroll-indicator{position:absolute;bottom:40px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:8px;color:var(--text-dim);font-size:12px;animation:bounce 2s infinite;cursor:pointer}
  .scroll-indicator .arrow{font-size:20px}
  @keyframes bounce{0%,100%{transform:translateX(-50%) translateY(0)}50%{transform:translateX(-50%) translateY(10px)}}

  /* SECTION */
  section{position:relative;z-index:1;padding:100px 40px}
  .section-label{display:inline-flex;align-items:center;gap:8px;font-size:13px;font-weight:600;color:var(--accent);text-transform:uppercase;letter-spacing:2px;margin-bottom:16px}
  .section-label .line{width:40px;height:2px;background:var(--accent);border-radius:2px}
  .section-title{font-size:clamp(2rem,4vw,3rem);font-weight:800;line-height:1.2;margin-bottom:16px}
  .section-sub{font-size:1.1rem;color:var(--text-dim);max-width:640px;line-height:1.7}
  .section-center{text-align:center}
  .section-center .section-sub{margin:0 auto}

  /* LOGIN SECTION */
  .login-section{background:var(--gradient-3);border-top:1px solid var(--glass-border);border-bottom:1px solid var(--glass-border)}
  .login-card{max-width:520px;margin:40px auto 0;background:var(--glass);border:1px solid var(--glass-border);border-radius:24px;padding:36px;transition:all 0.4s}
  .login-card:hover{border-color:rgba(0,212,170,0.12)}
  .login-status{display:flex;align-items:center;gap:12px;padding:14px 18px;border-radius:14px;margin-bottom:20px;font-size:14px;font-weight:500}
  .login-status.disconnected{background:rgba(255,255,255,0.02);border:1px solid var(--glass-border);color:var(--text-dim)}
  .login-status.connected{background:rgba(0,212,170,0.06);border:1px solid rgba(0,212,170,0.12);color:var(--accent)}
  .login-status.denied{background:rgba(255,45,85,0.06);border:1px solid rgba(255,45,85,0.12);color:#ff2d55}
  .login-status .dot{width:10px;height:10px;border-radius:50%;flex-shrink:0}
  .login-status.disconnected .dot{background:#7a8599}
  .login-status.connected .dot{background:var(--accent);animation:pulse-dot 2s infinite}
  .login-status.denied .dot{background:#ff2d55}
  .login-wallet-btn{width:100%;display:flex;align-items:center;justify-content:center;gap:12px;padding:18px;border-radius:16px;background:linear-gradient(135deg,#f6851b,#e2761b);color:#fff;font-weight:700;font-size:17px;border:none;cursor:pointer;transition:all 0.3s;font-family:'Inter',sans-serif;margin-bottom:14px}
  .login-wallet-btn:hover{transform:translateY(-3px);box-shadow:0 12px 40px rgba(246,133,27,0.3)}
  .login-wallet-btn:disabled{opacity:0.5;cursor:not-allowed;transform:none}
  .login-input{display:flex;gap:10px;align-items:center;padding:6px 6px 6px 20px;border-radius:16px;background:rgba(255,255,255,0.02);border:1px solid var(--glass-border);transition:all 0.3s;margin-bottom:12px}
  .login-input:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px rgba(0,212,170,0.06)}
  .login-input input{flex:1;background:transparent;border:none;outline:none;color:var(--text);font-size:15px;font-weight:500;padding:12px 0;font-family:'Inter',sans-serif}
  .login-input input::placeholder{color:var(--text-dim);opacity:0.5}
  .login-input .suffix{color:var(--accent);font-weight:600;font-size:14px;white-space:nowrap;padding-right:4px}
  .login-input .verify-btn{padding:8px 20px;border-radius:50px;background:var(--gradient-2);color:var(--primary);font-weight:700;font-size:13px;border:none;cursor:pointer;transition:all 0.3s;font-family:'Inter',sans-serif;white-space:nowrap}
  .login-input .verify-btn:hover{box-shadow:0 4px 20px rgba(0,212,170,0.25)}
  .login-info{font-size:12px;color:var(--text-dim);line-height:1.6;padding:12px 16px;border-radius:12px;background:rgba(255,255,255,0.02)}

  .gated-content{display:none;animation:fadeInUp 0.6s ease;margin-top:30px}
  .gated-content.show{display:block}
  .wallet-detail{max-width:520px;margin:20px auto;text-align:center;padding:24px;border-radius:16px;background:rgba(0,212,170,0.03);border:1px solid rgba(0,212,170,0.08)}
  .wallet-detail .addr{font-family:monospace;font-size:14px;color:var(--accent);padding:8px 16px;border-radius:10px;background:rgba(0,0,0,0.2);display:inline-block;margin:8px 0}
  .wallet-detail .sub{display:inline-flex;align-items:center;gap:6px;padding:6px 16px;border-radius:50px;background:rgba(0,212,170,0.08);border:1px solid rgba(0,212,170,0.12);font-size:13px;font-weight:600;color:var(--accent);margin:8px 0}
  .exclusive-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px;max-width:1100px;margin:30px auto 0}
  .xcard{background:var(--glass);border:1px solid var(--glass-border);border-radius:20px;padding:28px;transition:all 0.4s;text-align:center}
  .xcard:hover{border-color:rgba(0,212,170,0.15);transform:translateY(-5px);box-shadow:0 20px 60px rgba(0,0,0,0.3)}
  .xcard .emoji{font-size:2.2rem;margin-bottom:10px;display:block}
  .xcard h3{font-size:1.05rem;font-weight:700;margin-bottom:6px}
  .xcard h3 .ac{color:var(--accent)}
  .xcard p{color:var(--text-dim);font-size:0.85rem;line-height:1.6}
  .xcard .badge{display:inline-block;margin-top:12px;padding:4px 12px;border-radius:50px;background:rgba(0,212,170,0.08);border:1px solid rgba(0,212,170,0.1);font-size:11px;font-weight:600;color:var(--accent)}
  .no-access{display:none;max-width:480px;margin:30px auto 0;text-align:center;padding:36px;border-radius:24px;background:rgba(255,255,255,0.02);border:1px solid var(--glass-border)}
  .no-access.show{display:block}
  .no-access .big{font-size:3rem;margin-bottom:12px}
  .no-access h3{font-size:1.2rem;font-weight:700;margin-bottom:8px}
  .no-access p{color:var(--text-dim);font-size:0.92rem;line-height:1.6;margin-bottom:20px}

  /* FOOTER */
  footer{position:relative;z-index:1;border-top:1px solid var(--glass-border);padding:40px;text-align:center}
  footer .powered{font-size:13px;color:var(--text-dim)}
  footer .powered a{color:var(--accent);text-decoration:none}
  footer .ipfs-badge{display:inline-flex;align-items:center;gap:6px;margin-top:12px;padding:6px 16px;border-radius:50px;background:rgba(0,212,170,0.06);border:1px solid rgba(0,212,170,0.1);font-size:12px;color:var(--text-dim)}

  @media(max-width:768px){
    .nav-inner{padding:12px 20px}
    .nav-links{display:none}
    .hero{padding:100px 20px 60px}
    section{padding:60px 20px}
    .login-card{padding:24px 18px}
    .exclusive-grid{grid-template-columns:1fr}
  }
</style>
</head>
<body>

<div class="bg-grid"></div>
<div class="bg-glow bg-glow-1"></div>
<div class="bg-glow bg-glow-2"></div>
<div class="grain"></div>

<nav id="navbar">
  <div class="nav-inner">
    <a href="#" class="nav-logo">
      <div class="nav-logo-icon">⚕</div>
      <div class="nav-logo-text">medico<span>.eth</span></div>
    </a>
    <ul class="nav-links">
      <li><a href="#vision">Visión</a></li>
      <li><a href="#registrar">Registro</a></li>
      <li><a href="#login">🔐 Acceso</a></li>
      <li><a href="#cta">Contacto</a></li>
      <li><span class="login-btn" onclick="document.getElementById('login').scrollIntoView({behavior:'smooth'})">🦊 Login</span></li>
    </ul>
  </div>
</nav>

<!-- HERO -->
<section class="hero">
  <div class="hero-content">
    <div class="hero-badge"><span class="dot"></span> Identidad descentralizada · Web3 · ENS</div>
    <h1>El futuro de la medicina<br>es <span class="gradient-text">descentralizado</span><br><span class="typewriter">medico.eth</span></h1>
    <p class="hero-sub">No es solo un dominio. Es la identidad digital soberana de toda una industria. Médicos, hospitales, farmacéuticas, investigadores — todos bajo un mismo ecosistema descentralizado en Ethereum. Bienvenido a la salud web3.</p>
    <div class="hero-buttons">
      <a href="#login" class="btn-primary">🔐 Acceso exclusivo →</a>
      <a href="#vision" class="btn-secondary">Conocer más ↓</a>
    </div>
  </div>
  <div class="scroll-indicator"><span>Descubre más</span><span class="arrow">⌄</span></div>
</section>

<!-- VISIÓN -->
<section id="vision">
  <div class="section-center">
    <div class="section-label"><span class="line"></span>VISIÓN</div>
    <h2 class="section-title">Un dominio para <span class="gradient-text">gobernarlos a todos</span></h2>
    <p class="section-sub"><strong>medico.eth</strong> no es un dominio más. Es el namespace que unifica la identidad digital de todo el ecosistema de la salud sobre Ethereum. Cada médico, hospital, clínica, farmacia o proyecto de salud puede tener su propia identidad verificable bajo este paraguas descentralizado.</p>
  </div>
  <div style="max-width:1000px;margin:50px auto 0;display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:20px">
    <div class="xcard"><span class="emoji">🔐</span><h3>Identidad Soberana</h3><p>Tu dominio .eth es tuyo. Nadie te lo puede quitar, censurar o expirar sin tu control.</p></div>
    <div class="xcard"><span class="emoji">🔗</span><h3>Resolución Multicadena</h3><p>Con ENSv2, cada subdominio puede apuntar a wallets en Ethereum, Base, Polygon, Arbitrum y más.</p></div>
    <div class="xcard"><span class="emoji">🏥</span><h3>Hospitales Descentralizados</h3><p>Hospitales emiten subdominios verificables a su personal. credenciales.hospital.medico.eth.</p></div>
    <div class="xcard"><span class="emoji">🔐</span><h3>Área Exclusiva para Holders</h3><p>Conecta MetaMask, verifica tu subdominio y accede a contenido premium que nadie más puede ver.</p></div>
    <div class="xcard"><span class="emoji">💊</span><h3>Farmacéutica Web3</h3><p>Laboratorios con identidad verificable. Trazabilidad de medicamentos, autenticidad firmada criptográficamente.</p></div>
    <div class="xcard"><span class="emoji">🌐</span><h3>Web Descentralizada</h3><p>Esta web vive en IPFS. Sin servidores, sin censura, sin costes de mantenimiento. Eterna.</p></div>
  </div>
</section>

<!-- LOGIN -->
<section id="login" class="login-section">
  <div class="section-center">
    <div class="section-label"><span class="line"></span>🔐 ACCESO EXCLUSIVO</div>
    <h2 class="section-title">🔒 Solo para poseedores de <span class="gradient-text">subdominios</span></h2>
    <p class="section-sub"><strong>Información sensible y exclusiva.</strong> Solo las personas que poseen un subdominio de <strong>medico.eth</strong> pueden acceder a esta área. Conecta tu wallet con MetaMask y verifica tu subdominio para desbloquear contenido privado que el público general no puede ver.</p>
  </div>

  <div class="login-card">
    <div class="login-status disconnected" id="login-status">
      <span class="dot"></span>
      <span id="status-text">Esperando conexión...</span>
    </div>

    <button class="login-wallet-btn" id="connect-btn" onclick="connectMetaMask()">
      <span style="font-size:22px">🦊</span> Conectar MetaMask
    </button>

    <p style="text-align:center;color:var(--text-dim);font-size:13px;margin-bottom:10px">— o verifica tu subdominio manualmente —</p>

    <div class="login-input">
      <input type="text" id="ens-input" placeholder="tu-subdominio" autocomplete="off" spellcheck="false">
      <span class="suffix">.medico.eth</span>
      <button class="verify-btn" onclick="verifyOwnership()">✅ Verificar</button>
    </div>

    <div class="login-info">
      <strong>🔍 Cómo funciona:</strong><br>
      1. Conecta MetaMask 🦊 · 2. Escribe tu subdominio (ej: <strong>cardiologia</strong>)<br>
      3. El sistema consulta ENS y verifica que <strong>eres el dueño</strong> · 4. ✅ Acceso concedido
    </div>
  </div>

  <!-- GATED CONTENT -->
  <div class="gated-content" id="gated-content">
    <div class="wallet-detail">
      <div style="font-size:1.1rem;font-weight:600">🎉 ¡Acceso verificado!</div>
      <div class="sub">🔗 <span id="subdomain-name">—</span>.medico.eth</div>
      <div class="addr" id="wallet-address">—</div>
    </div>
    <div style="text-align:center"><span style="display:inline-flex;align-items:center;gap:8px;padding:6px 18px;border-radius:50px;background:rgba(0,212,170,0.06);border:1px solid rgba(0,212,170,0.1);font-size:12px;color:var(--accent)">🏆 Contenido exclusivo para holders de subdominios</span></div>
    <div class="exclusive-grid">
      <div class="xcard"><span class="emoji">📋</span><h3>Directorio <span class="ac">VIP</span></h3><p>Lista exclusiva de profesionales verificados bajo medico.eth. Contactos directos.</p><div class="badge">🔒 Solo holders</div></div>
      <div class="xcard"><span class="emoji">💎</span><h3>Recursos <span class="ac">Premium</span></h3><p>Guías, plantillas y herramientas para tu identidad descentralizada en salud.</p><div class="badge">📥 Descargable</div></div>
      <div class="xcard"><span class="emoji">🗳️</span><h3>Gobernanza <span class="ac">DAO</span></h3><p>Vota las decisiones del ecosistema medico.eth. Tu subdominio te da derecho a voto.</p><div class="badge">🏛️ Activo</div></div>
      <div class="xcard"><span class="emoji">🎟️</span><h3>Eventos <span class="ac">Privados</span></h3><p>Webinars, conferencias y encuentros exclusivos para la red de profesionales medico.eth.</p><div class="badge">🗓️ Próximamente</div></div>
    </div>
  </div>

  <div class="no-access" id="no-access">
    <div class="big">🔒</div>
    <h3>No tienes acceso</h3>
    <p>La wallet conectada no posee <strong id="no-access-subdomain">—</strong>.medico.eth. Si quieres formar parte, consigue tu subdominio.</p>
    <a href="https://dominioscripto.com" target="_blank" class="btn-primary" style="display:inline-flex">🚀 Obtener subdominio</a>
  </div>
</section>

<!-- NAMESPACE WIDGET -->
<section id="registrar" class="login-section">
  <div class="section-center">
    <div class="section-label"><span class="line"></span>REGISTRAR SUBDOMINIO</div>
    <h2 class="section-title">Consigue tu <span class="gradient-text">subdominio</span></h2>
    <p class="section-sub">El dueño de <strong>medico.eth</strong> ha configurado la venta de subdominios. Aquí puedes buscar y registrar el tuyo.</p>
  </div>

  <div class="login-card" style="max-width:700px;padding:20px">
    <script
      defer
      id="namespace-widget"
      widgetId="wg-535a6d00050d"
      type="module"
      src="https://cdn.namespace.ninja/widget/latest/bundle.js">
    </script>
  </div>
</section>

<!-- CTA -->
<section id="cta" style="text-align:center;padding:100px 40px">
  <h2 class="section-title">¿Listo para <span class="gradient-text">medico.eth</span>?</h2>
  <p style="font-size:1.1rem;color:var(--text-dim);max-width:600px;margin:0 auto 40px;line-height:1.7">Asegura la identidad descentralizada de la medicina en español. El futuro de la salud es web3.</p>
  <div class="hero-buttons">
    <a href="https://dominioscripto.com" target="_blank" class="btn-primary">🚀 Buscar en DominiosCripto</a>
  </div>
  <div class="ens-badge" style="margin-top:30px;display:inline-flex;align-items:center;gap:8px;padding:10px 24px;border-radius:50px;background:rgba(0,212,170,0.08);border:1px solid rgba(0,212,170,0.15);font-size:14px;color:var(--text)">🌐 Alojado en IPFS · Descentralizado para siempre</div>
</section>

<footer>
  <p class="powered">Hecho con ❤️ · <a href="https://dominioscripto.com" target="_blank">DominiosCripto</a> · <strong>medico.eth</strong></p>
  <div class="ipfs-badge">⚕️ Identidad descentralizada para la salud · Web eterna en IPFS</div>
</footer>

<script src="https://cdn.jsdelivr.net/npm/ethers@5.7.2/dist/ethers.umd.min.js"></script>
<script>if(typeof ethers==='undefined'){document.write('<script src="https://cdnjs.cloudflare.com/ajax/libs/ethers/5.7.2/ethers.umd.min.js"><\/script>')}</script>
<script>
// === TYPEWRITER ===
const tw = document.querySelector('.typewriter');
const txt = 'medico.eth';
let ci = 0;
function type(){if(ci<=txt.length){tw.textContent=txt.substring(0,ci);ci++;setTimeout(type,ci===1?800:80)}}
setTimeout(type,1000);

// === NAVBAR ===
const navbar=document.getElementById('navbar');
window.addEventListener('scroll',()=>navbar.classList.toggle('scrolled',window.scrollY>50));

// === SMOOTH SCROLL ===
document.querySelectorAll('a[href^="#"]').forEach(a=>{a.addEventListener('click',function(e){e.preventDefault();const t=document.querySelector(this.getAttribute('href'));if(t)t.scrollIntoView({behavior:'smooth',block:'start'})})});

// === MASK LOGIN ===
let provider=null,userAddress=null;

async function connectMetaMask(){
  if(typeof window.ethereum==='undefined'){setStatus('denied','❌ MetaMask no instalado');return}
  try{
    setStatus('connected','🔄 Conectando...');
    const accounts=await window.ethereum.request({method:'eth_requestAccounts'});
    provider=new ethers.providers.Web3Provider(window.ethereum);
    userAddress=accounts[0].toLowerCase();
    document.getElementById('wallet-address').textContent=userAddress;
    setStatus('connected',`✅ Wallet: ${userAddress.substring(0,6)}...${userAddress.substring(38)}`);
    document.getElementById('connect-btn').innerHTML='<span style="font-size:22px">🦊</span> Conectado';
    document.getElementById('connect-btn').disabled=true;
  }catch(e){setStatus('denied','❌ Conexión rechazada')}
}

async function verifyOwnership(){
  const input=document.getElementById('ens-input');
  const name=input.value.trim().toLowerCase().replace(/[^a-z0-9-]/g,'');
  if(!name){setStatus('denied','⚠️ Escribe un subdominio');return}
  if(!userAddress){setStatus('denied','⚠️ Conecta MetaMask primero');return}
  const fullName=name+'.medico.eth';
  document.getElementById('subdomain-name').textContent=name;
  setStatus('connected',`🔍 Verificando ${fullName}...`);
  try{
    const network=await provider.getNetwork();
    if(network.chainId!==1){setStatus('denied','⚠️ Cambia a Ethereum Mainnet');return}
    const REGISTRY='0x00000000000C2E074eC69A0dFb2997BA6C7d2e1e';
    const registry=new ethers.Contract(REGISTRY,['function owner(bytes32 node) external view returns (address)'],provider);
    const nameHash=ethers.utils.namehash(fullName);
    const owner=(await registry.owner(nameHash)).toLowerCase();
    if(owner===userAddress){
      setStatus('connected',`✅ ¡Eres dueño de ${fullName}!`);
      document.getElementById('gated-content').classList.add('show');
      document.getElementById('no-access').classList.remove('show');
      document.getElementById('owned-subdomain').innerHTML='🔗 <span id="subdomain-name">'+name+'</span>.medico.eth';
      document.getElementById('gated-content').scrollIntoView({behavior:'smooth',block:'start'});
    }else{
      document.getElementById('gated-content').classList.remove('show');
      document.getElementById('no-access-subdomain').textContent=name;
      document.getElementById('no-access').classList.add('show');
      setStatus('denied',`❌ No eres dueño de ${fullName}`);
      document.getElementById('no-access').scrollIntoView({behavior:'smooth',block:'start'});
    }
  }catch(e){setStatus('denied','❌ Error al verificar. ¿Estás en Mainnet?')}
}

function setStatus(type,text){
  const el=document.getElementById('login-status');
  document.getElementById('status-text').textContent=text;
  el.className='login-status '+type;
}

document.getElementById('ens-input').addEventListener('keydown',function(e){if(e.key==='Enter'){e.preventDefault();verifyOwnership()}});

if(window.ethereum){
  window.ethereum.on('accountsChanged',function(accounts){
    if(accounts.length===0){
      userAddress=null;
      setStatus('disconnected','Wallet desconectada');
      document.getElementById('gated-content').classList.remove('show');
      document.getElementById('no-access').classList.remove('show');
      document.getElementById('connect-btn').innerHTML='<span style="font-size:22px">🦊</span> Conectar MetaMask';
      document.getElementById('connect-btn').disabled=false;
    }else{
      userAddress=accounts[0].toLowerCase();
      setStatus('connected',`✅ Wallet conectada`);
    }
  });
}

console.log('%c⚕️ medico.eth — Identidad Descentralizada + Login MetaMask', 'font-size:18px; color:#00d4aa;');
</script>
</body>
</html>