:root{
  --bg:#0b0f0c;
  --panel:rgba(18,18,18,.78);
  --stroke:rgba(255,255,255,.12);
  --ink:#e9f6ea;
  --muted:#9db3a1;
  --accent:#8df87a;
  --accent-2:#3ee26b;
  --ring:rgba(141,248,122,.25);
  --maxw: 940px;
}

*{box-sizing:border-box}
html,body{margin:0}
body{
  font-family: Arial, system-ui, -apple-system, Segoe UI, Roboto, Helvetica, sans-serif;
  color:var(--ink);
  background:
    radial-gradient(1200px 800px at 10% -20%, rgba(141,248,122,.08), transparent 55%),
    radial-gradient(1000px 600px at 110% 120%, rgba(141,248,122,.06), transparent 55%),
    linear-gradient(180deg,#0b0f0c,#0b0f0c);
  min-height:100vh;
}

/* Header solo con logo */
.brand{
  max-width:var(--maxw);
  margin:28px auto 0;
  padding:0 16px;
  display:flex;
  justify-content:center;
}
.brand img{
  width:72px; height:72px; border-radius:18px; object-fit:cover;
  box-shadow:0 12px 30px rgba(0,0,0,.45), 0 0 0 3px var(--ring);
}

/* Contenedor principal tipo “glass” */
.legal-card{
  max-width:var(--maxw);
  margin:18px auto 28px;
  padding:clamp(18px,3.2vw,28px);
  background:var(--panel);
  border:1px solid var(--stroke);
  border-radius:18px;
  box-shadow:0 24px 60px rgba(0,0,0,.45), inset 0 1px 0 rgba(255,255,255,.05);
}

/* Tipografía y bloques */
h1{
  font-size:1.35rem; margin:0 0 10px 0; letter-spacing:.02em;
}
h2{
  font-size:1.1rem; margin:18px 0 8px;
}
p{ margin:10px 0; line-height:1.6 }
ul{ margin:8px 0 18px 22px }
li{ margin:6px 0 }
.muted{ color:var(--muted) }
.small{ font-size:.92rem }

/* Listas con viñeta verde sutil (solo ul normales) */
.legal-card ul li{
  position:relative; padding-left:0;
}
.legal-card ul li::marker{ color:var(--accent-2) }

/* Bloque de contacto */
.contact-block{
  background:rgba(255,255,255,.04);
  border:1px solid var(--stroke);
  border-radius:12px;
  padding:12px 14px;
}

/* Enlaces */
a{ color:var(--accent-2); text-decoration:none }
a:hover{ text-decoration:underline }

/* Footer */
.site-footer{
  max-width:var(--maxw);
  margin:0 auto 28px;
  padding:0 16px;
  color:var(--muted);
  display:flex; justify-content:space-between; gap:12px; flex-wrap:wrap;
  border-top:1px solid var(--stroke);
  padding-top:14px;
}
.site-footer a{ color:var(--ink) }

/* Responsive */
@media (max-width:520px){
  .site-footer{ gap:8px; font-size:.95rem }
}

/* Header marca centrado y botón flotante que no tapa el logo */
.brand{
  position: relative;
  display: grid;
  place-items: center;
  padding: 18px 16px 6px;
}
.brand img{
  width: clamp(120px, 22vw, 180px);
  height: auto;
  border-radius: 12px;
  display: block;
}

/* Botón Back, pegado al borde del header sin cruzar el logo */
.back-home{
  position: absolute;
  top: 12px;
  right: 14px;
  z-index: 2;
}
.btn-home{
  display: inline-block;
  padding: 8px 12px;
  border-radius: 10px;
  font-weight: 700;
  font-size: .92rem;
  text-decoration: none;
  color: #e9f6ea;
  background: rgba(0,0,0,.55);
  border: 1px solid rgba(255,255,255,.14);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: 0 8px 20px rgba(0,0,0,.35);
  transition: transform .15s ease, background .2s ease, box-shadow .2s ease;
}
.btn-home:hover{
  transform: translateY(-1px);
  background: rgba(0,0,0,.72);
  box-shadow: 0 12px 28px rgba(0,0,0,.4);
}

/* En móvil, lo bajamos debajo del logo para máxima limpieza visual */
@media (max-width: 560px){
  .back-home{
    position: static;
    margin-top: 10px;
  }
  .brand{
    gap: 8px;
  }
}