/* Web en Silencio (versión B) — hoja de las páginas simples: privacidad y términos. */

:root{
  --fondo:#080807; --piso:#0F0E0C; --piso2:#16140F;
  --raya:#2A251C;
  --plata:#F1E9DA; --texto:#B9AE9C; --gris:#8A806F; --tenue:#5E5545;
  --acento:#D6B476;                 /* el dorado de la portada */
  --r:3px;
  --sans:"IBM Plex Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,monospace;
  --ease:cubic-bezier(0.23,1,0.32,1);
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0; background:var(--fondo); color:var(--texto);
  font-family:var(--sans); font-size:16px; line-height:1.65;
  -webkit-font-smoothing:antialiased;
}

/* grano: le saca el plano digital al fondo sin pedir una imagen */
body::after{
  content:""; position:fixed; inset:0; z-index:9; pointer-events:none;
  opacity:.05;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='3' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23g)'/%3E%3C/svg%3E");
}

.env{max-width:760px; margin:0 auto; padding:0 24px}

/* ---- cabecera ---------------------------------------------------- */
header{border-bottom:1px solid var(--raya); position:sticky; top:0;
  background:rgba(8,10,16,.88); backdrop-filter:blur(10px); z-index:10}
header .env{display:flex; align-items:center; justify-content:space-between;
  gap:18px; min-height:62px; flex-wrap:wrap}
.marca{display:flex; align-items:center; gap:10px; text-decoration:none}
.marca i{width:9px; height:9px; border-radius:50%; background:var(--acento);
  flex:none; box-shadow:0 0 12px var(--acento)}
.marca b{color:var(--plata); font-weight:600; font-size:15px; letter-spacing:-.01em}
nav{display:flex; gap:20px}
nav a{color:var(--gris); text-decoration:none; font-size:13.5px;
  transition:color .2s var(--ease)}
nav a[aria-current]{color:var(--plata)}

/* El hover solo existe donde hay un mouse de verdad. En un telefono el
   estado :hover se queda pegado despues de tocar, y parece un bug. */
@media(hover:hover) and (pointer:fine){
  nav a:hover{color:var(--plata)}
  a:hover{text-decoration-color:var(--acento)}
  footer a:hover{color:var(--plata)}
}

/* ---- portada ----------------------------------------------------- */
.portada{padding:96px 0 72px; border-bottom:1px solid var(--raya)}
/* La marca: un pulso que se va apagando hacia afuera. Es el nombre dicho
   en dibujo, no un adorno puesto para llenar. */
.senal{display:block; width:112px; height:112px; margin:0 0 30px}
.senal circle{fill:none; stroke:var(--acento); stroke-width:1.5}
.senal .n{fill:var(--acento); stroke:none}
.senal.chica{width:60px; height:60px; margin-bottom:22px}
.portada p.sobre{font-family:var(--mono); font-size:11px; letter-spacing:.14em;
  text-transform:uppercase; color:var(--acento); margin:0 0 20px}
h1{margin:0 0 22px; color:var(--plata); font-size:clamp(34px,6.4vw,52px);
  line-height:1.08; letter-spacing:-.025em; font-weight:600}
.portada .bajada{font-size:18px; max-width:52ch; margin:0}

/* ---- bloques ----------------------------------------------------- */
main section{padding:60px 0; border-bottom:1px solid var(--raya)}
main section:last-child{border-bottom:0}
h2{margin:0 0 20px; color:var(--plata); font-size:24px; font-weight:600;
  letter-spacing:-.015em}
h3{margin:34px 0 8px; color:var(--plata); font-size:16px; font-weight:600}
p{margin:0 0 16px} p:last-child{margin-bottom:0}
a{color:var(--plata); text-decoration:underline; text-decoration-color:var(--tenue);
  text-underline-offset:3px; transition:text-decoration-color .2s var(--ease)}
ul{margin:0 0 16px; padding-left:20px} li{margin-bottom:7px}
strong{color:var(--plata); font-weight:600}

/* Pasos: numeracion al margen, sin caja, para que no parezca otro panel.
   OJO con el grid: el texto suelto dentro del <li> se vuelve un item
   anonimo y cae en la columna de 44px, una palabra por renglon. Por eso
   el contenido va envuelto en un <div>: dos items, no tres. */
.pasos{list-style:none; padding:0; margin:0; counter-reset:p}
.pasos li{counter-increment:p; display:grid; grid-template-columns:44px 1fr;
  gap:16px; padding:18px 0; border-top:1px solid var(--raya); margin:0}
.pasos li:first-child{border-top:0; padding-top:0}
.pasos li::before{content:counter(p,decimal-leading-zero);
  font-family:var(--mono); font-size:13px; color:var(--tenue); padding-top:3px}
.pasos b{display:block; color:var(--plata); margin-bottom:3px}

/* ficha de datos: monoespaciado, clave a la izquierda */
.ficha{border:1px solid var(--raya); border-radius:var(--r); overflow:hidden}
.ficha div{display:grid; grid-template-columns:minmax(120px,34%) 1fr; gap:14px;
  padding:12px 16px; border-top:1px solid var(--raya); background:var(--piso)}
.ficha div:first-child{border-top:0}
.ficha dt{font-family:var(--mono); font-size:11px; letter-spacing:.06em;
  text-transform:uppercase; color:var(--tenue); margin:0}
.ficha dd{margin:0; color:var(--plata); font-size:14.5px}

.aviso{background:var(--piso2); border-left:2px solid var(--acento);
  padding:15px 18px; font-size:14.5px; border-radius:0 var(--r) var(--r) 0}

.fecha{font-family:var(--mono); font-size:11.5px; color:var(--tenue);
  letter-spacing:.05em; margin:0 0 30px}

footer{padding:36px 0 60px; font-size:13px; color:var(--tenue)}
footer .env{display:flex; justify-content:space-between; gap:18px; flex-wrap:wrap}
footer a{color:var(--gris); text-decoration:none}

@media(max-width:620px){
  .portada{padding:64px 0 52px}
  main section{padding:44px 0}
  .ficha div{grid-template-columns:1fr; gap:4px}
}
@media (prefers-reduced-motion: reduce){*{transition:none !important}}