@font-face {
    font-family: 'Montserrat';
    font-style: normal;
    font-weight: 400 800;
    font-display: swap;
    src: local('Montserrat');
  }
  :root{
    --fondo:#0E1420;
    --superficie:#1A2332;
    --texto:#F5F7FA;
    --texto2:#8A97A8;
    --esmeralda:#17B890;
    --dorado:#C9A24B;
  }
  *{box-sizing:border-box;margin:0;padding:0}
  body{
    background:var(--fondo);
    color:var(--texto);
    font-family:'Montserrat','Segoe UI',system-ui,-apple-system,sans-serif;
    line-height:1.6;
    -webkit-font-smoothing:antialiased;
    padding:0 20px 64px;
  }
  .wrap{max-width:680px;margin:0 auto}
  header{padding:48px 0 8px;text-align:center}
  .marca{
    font-size:15px;letter-spacing:.14em;text-transform:uppercase;
    color:var(--texto2);font-weight:600;
  }
  .marca b{color:var(--esmeralda);font-weight:700}
  h1{
    font-size:clamp(28px,7vw,44px);line-height:1.15;font-weight:800;
    margin:28px 0 14px;letter-spacing:-.02em;
  }
  h1 em{color:var(--esmeralda);font-style:normal}
  .bajada{color:var(--texto2);font-size:17px;max-width:52ch;margin:0 auto}
  .como{
    background:var(--superficie);border-radius:14px;padding:20px 22px;
    margin:36px 0 8px;border-left:3px solid var(--dorado);
  }
  .como h2{font-size:15px;text-transform:uppercase;letter-spacing:.08em;color:var(--dorado);margin-bottom:8px}
  .como p{color:var(--texto2);font-size:15px}
  .paso{margin:32px 0}
  .num{
    display:inline-block;font-size:13px;font-weight:700;color:var(--dorado);
    letter-spacing:.1em;margin-bottom:6px;
  }
  .paso h3{font-size:21px;font-weight:700;margin-bottom:12px}
  .caja{
    position:relative;background:var(--superficie);border-radius:14px;
    padding:20px;border:1px solid rgba(255,255,255,.06);
  }
  pre{
    font-family:ui-monospace,'Cascadia Code','Courier New',monospace;
    font-size:14.5px;line-height:1.65;color:var(--texto);
    white-space:pre-wrap;word-wrap:break-word;
  }
  .llenar{color:var(--esmeralda);font-weight:600}
  button.copiar{
    margin-top:14px;width:100%;padding:13px;border:0;border-radius:10px;
    background:var(--esmeralda);color:#08221B;font-family:inherit;
    font-size:15px;font-weight:700;cursor:pointer;transition:opacity .15s;
  }
  button.copiar:hover{opacity:.88}
  button.copiar.ok{background:var(--dorado);color:#241B06}
  .cierre{
    margin-top:44px;padding:24px;background:var(--superficie);
    border-radius:14px;text-align:center;
  }
  .cierre p{color:var(--texto2);font-size:15px;margin-bottom:14px}
  .links{display:flex;gap:10px;justify-content:center;flex-wrap:wrap}
  .links a{
    color:var(--esmeralda);text-decoration:none;font-weight:600;font-size:15px;
    border:1px solid rgba(23,184,144,.35);border-radius:9px;padding:9px 16px;
    transition:background .15s;
  }
  .links a:hover{background:rgba(23,184,144,.1)}
  footer{margin-top:40px;text-align:center;color:var(--texto2);font-size:13px;line-height:1.7}
  @media (max-width:480px){
    body{padding:0 16px 48px}
    .caja{padding:16px}
    pre{font-size:13.5px}
  }

/* --- Tarjetas del índice (home) --- */
.tarjeta{
  display:block;text-decoration:none;color:inherit;
  background:var(--superficie);border-radius:14px;padding:22px;
  margin:20px 0;border:1px solid rgba(255,255,255,.06);
  transition:border-color .15s, transform .15s;
}
.tarjeta:hover{border-color:rgba(23,184,144,.45);transform:translateY(-2px)}
.tarjeta h3{font-size:20px;font-weight:700;margin:6px 0 8px}
.tarjeta p{color:var(--texto2);font-size:15px;margin-bottom:12px}
.ir{color:var(--esmeralda);font-weight:700;font-size:15px}

/* --- Contenido de texto dentro de .caja (páginas de pasos) --- */
.caja p{color:var(--texto);font-size:15.5px}
.caja p + p{margin-top:12px}
.caja ul{margin:12px 0 12px 20px}
.caja li{color:var(--texto2);font-size:15px;margin-bottom:6px}
.caja b{color:var(--esmeralda)}
.caja pre{
  background:rgba(0,0,0,.28);border-radius:10px;padding:14px;margin:14px 0;
  border-left:3px solid var(--dorado);
}