<!doctype html>
<html lang="es">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Punto Político Mx</title>
<meta name="description" content="Punto Político Mx — Enfoque dinámico y actual de México." />
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600;800&display=swap" rel="stylesheet">
<style>
:root{
--bg1:#061b46; /* azul profundo */
--bg2:#0b3a6f; /* azul medio */
--txt:#0b0c14; /* casi negro */
--card:#ffffff; /* blanco */
--accent:#e91e63; /* rosa acento */
--muted:#5d6b7a; /* gris azulado */
}
*{box-sizing:border-box}
html,body{height:100%}
body{
margin:0;
font-family:Inter,system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
color:var(--txt);
background:
radial-gradient(80rem 80rem at 80% -10%, rgba(255,255,255,.08) 0%, transparent 60%),
linear-gradient(160deg,var(--bg1),var(--bg2));
display:grid;
place-items:center;
padding:24px;
}
.card{
width:min(880px,100%);
background:var(--card);
border-radius:20px;
padding:28px 28px 24px;
box-shadow:
0 20px 60px rgba(0,0,0,.18),
0 6px 18px rgba(0,0,0,.08);
border:1px solid rgba(6,27,70,.08);
}
header{
display:flex;
align-items:center;
gap:18px;
margin-bottom:8px;
}
.logo{
width:64px;height:64px;border-radius:12px;
background:#0a2b5d url("./pp-logo.png") center/cover no-repeat;
flex:0 0 64px;
box-shadow:inset 0 0 0 2px rgba(255,255,255,.5);
}
h1{
font-size:clamp(22px,3.6vw,32px);
line-height:1.15;margin:0;
letter-spacing:.2px;
}
.tag{
display:inline-flex;
align-items:center;
gap:8px;
font-weight:600;
color:#113a7c;
background:#e9f2ff;
border:1px solid #cfe3ff;
border-radius:999px;
padding:6px 10px;
font-size:12px;
}
.dot{width:8px;height:8px;border-radius:50%;background:#29c979;box-shadow:0 0 0 4px rgba(41,201,121,.18)}
p{margin:8px 0 0;color:var(--muted);font-size:15px}
.hero{
margin:20px 0 16px;
padding:18px;
border-radius:16px;
background:
linear-gradient(145deg,#f7fbff 0%, #fdfefe 35%, #ffffff 100%);
border:1px solid rgba(6,27,70,.06);
}
.hero h2{
margin:0 0 6px;
font-size:clamp(22px,3.2vw,28px);
line-height:1.2;
}
.actions{
display:flex;flex-wrap:wrap;gap:10px;margin-top:14px
}
.btn{
display:inline-flex;align-items:center;gap:10px;
border:0;border-radius:12px;padding:12px 16px;
font-weight:700;letter-spacing:.2px;cursor:pointer;
transition:transform .08s ease, box-shadow .18s ease, background .18s ease;
text-decoration:none
}
.btn.primary{
color:#fff;background:var(--accent);
box-shadow:0 6px 20px rgba(233,30,99,.35), inset 0 -2px 0 rgba(0,0,0,.08);
}
.btn.primary:hover{transform:translateY(-1px)}
.btn.ghost{
color:#113a7c;background:#e9f2ff;border:1px solid #cfe3ff;
}
footer{
display:flex;justify-content:space-between;gap:12px;
align-items:center;margin-top:18px;
color:var(--muted);font-size:13px;
}
.small{font-size:12px;color:#93a2b2}
@media (max-width:560px){
header{flex-direction:row}
footer{flex-direction:column;align-items:flex-start}
}
</style>
</head>
<body>
<main class="card" role="main" aria-label="Aviso temporal">
<header>
<div class="logo" aria-hidden="true"></div>
<div>
<h1>Punto Político Mx</h1>
<p>Enfoque dinámico y actual de México.</p>
</div>
<span class="tag" style="margin-left:auto"><span class="dot"></span> Online</span>
</header>
<section class="hero">
<h2>Estamos preparando algo bueno.</h2>
<p>
Nuestro sitio está en montaje sobre Ghost + Nginx. Muy pronto lanzamos la edición digital.
Mientras tanto, puedes suscribirte para enterarte del lanzamiento.
</p>
<div class="actions">
<a class="btn primary" href="mailto:hola@puntopoliticomx.org?subject=Avísenme%20del%20lanzamiento">Quiero enterarme</a>
<a class="btn ghost" href="https://puntopoliticomx.org" target="_self" rel="nofollow">Seguir en portada</a>
</div>
</section>
<footer>
<div class="small">© <span id="y"></span> Punto Político Mx. Todos los derechos reservados.</div>
<div class="small">Infraestructura: Hetzner + Cloudflare</div>
</footer>
</main>
<script>document.getElementById('y').textContent=new Date().getFullYear()</script>
</body>
</html>