/* Manual de Estoy Acá: hoja propia (no depende del resto del sitio, así anda con cualquier versión). */
:root {
  --fondo: #14121a; --tarjeta: #1f1c28; --borde: #332e40; --texto: #f1eef7; --suave: #a9a3b8;
  --violeta: #b38cff; --rosa: #ff4fa3; --verde: #3ddc97; --radio: 16px;
  color-scheme: dark;
}
* { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body { margin: 0; background: var(--fondo); color: var(--texto); font: 17px/1.6 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
a { color: var(--violeta); }
img { max-width: 100%; }
.barra { position: sticky; top: 0; z-index: 10; background: rgba(20, 18, 26, .92); backdrop-filter: blur(8px); border-bottom: 1px solid var(--borde); }
.barra .dentro { max-width: 1080px; margin: 0 auto; padding: 10px 16px; display: flex; gap: 14px; align-items: center; flex-wrap: wrap; }
.logo { font-weight: 800; font-size: 1.15rem; color: var(--texto); text-decoration: none; }
.logo span { color: var(--rosa); }
.barra nav { margin-left: auto; display: flex; gap: 14px; flex-wrap: wrap; font-size: .95rem; }
.barra nav a { color: var(--suave); text-decoration: none; }
.barra nav a:hover, .barra nav a.activo { color: var(--texto); }
main { max-width: 1080px; margin: 0 auto; padding: 8px 16px 64px; }
h1 { font-size: clamp(1.8rem, 5vw, 2.6rem); line-height: 1.15; margin: 28px 0 8px; }
h1 em { font-style: normal; color: var(--rosa); }
h2 { font-size: 1.55rem; margin: 48px 0 6px; padding-top: 8px; scroll-margin-top: 70px; }
h3 { font-size: 1.15rem; margin: 26px 0 6px; scroll-margin-top: 70px; }
.suave { color: var(--suave); }
.intro { font-size: 1.1rem; color: var(--suave); max-width: 720px; }
.indice { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); padding: 16px 20px; margin: 20px 0; columns: 2 260px; }
.indice a { display: block; padding: 3px 0; text-decoration: none; color: var(--texto); }
.indice a:hover { color: var(--violeta); }
.paso { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 24px; align-items: start; background: var(--tarjeta);
  border: 1px solid var(--borde); border-radius: var(--radio); padding: 18px 20px; margin: 14px 0; }
.paso.ancho { grid-template-columns: 1fr; }
.paso .fotos { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.paso .fotos img { width: 240px; border-radius: 18px; border: 1px solid var(--borde); cursor: zoom-in; background: #000; }
.paso.ancho .fotos img { width: 100%; border-radius: 10px; }
.paso .fotos.dos img { width: 200px; }
.paso ol, .paso ul { padding-left: 22px; margin: 8px 0; }
.paso li { margin: 4px 0; }
.dato { border-left: 3px solid var(--violeta); padding: 4px 12px; margin: 10px 0; color: var(--suave); font-size: .95rem; }
.dato.ojo { border-color: var(--rosa); }
.nuevo { display: inline-block; font-size: .7rem; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: var(--rosa); color: #fff;
  border-radius: 999px; padding: 2px 9px; vertical-align: middle; margin-left: 6px; }
.boton { display: inline-block; background: var(--rosa); color: #fff; font-weight: 700; padding: 11px 20px; border-radius: 999px; text-decoration: none; }
.boton.borde { background: transparent; color: var(--texto); border: 1px solid var(--borde); }
.tarjetas { display: grid; grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); gap: 16px; margin: 24px 0; }
.tarjeta { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); padding: 20px; text-decoration: none; color: var(--texto); display: block; }
.tarjeta:hover { border-color: var(--violeta); }
.tarjeta .icono { font-size: 2.4rem; }
.video { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: var(--radio); padding: 14px; margin: 18px 0; }
.video video { width: 100%; max-height: 80vh; border-radius: 12px; background: #000; display: block; }
.videos { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
table { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: .95rem; }
td, th { text-align: left; padding: 8px 6px; border-bottom: 1px solid var(--borde); vertical-align: top; }
th { color: var(--suave); font-weight: 600; }
details { background: var(--tarjeta); border: 1px solid var(--borde); border-radius: 12px; padding: 12px 16px; margin: 8px 0; }
summary { cursor: pointer; font-weight: 600; }
footer { border-top: 1px solid var(--borde); margin-top: 40px; padding: 20px 16px; text-align: center; color: var(--suave); font-size: .9rem; }
/* partes que dependen de la versión instalada en el servidor (ver manual.js) */
[data-desde] { display: none; }
.v3 [data-desde="3"], .v4 [data-desde="4"], .v5 [data-desde="5"], .v6 [data-desde="6"], .v7 [data-desde="7"] { display: revert; }
.v3 .paso[data-desde="3"], .v4 .paso[data-desde="4"], .v5 .paso[data-desde="5"], .v6 .paso[data-desde="6"], .v7 .paso[data-desde="7"] { display: grid; }
.v4 .solo-antes-v4, .v3 .solo-antes-v3 { display: none; }
#ampliada { position: fixed; inset: 0; background: rgba(0, 0, 0, .9); display: none; align-items: center; justify-content: center; z-index: 50; cursor: zoom-out; padding: 16px; }
#ampliada img { max-height: 100%; max-width: 100%; border-radius: 12px; }
@media (max-width: 720px) {
  body { font-size: 16px; }
  .paso { grid-template-columns: 1fr; padding: 14px; }
  .paso .fotos img { width: min(260px, 80vw); }
  .paso .fotos.dos img { width: calc(50% - 6px); }
  .barra nav { margin-left: 0; width: 100%; }
}
@media print {
  .barra, #ampliada, .video { display: none !important; }
  body { background: #fff; color: #000; }
  .paso, .indice, details { background: #fff; border-color: #ccc; break-inside: avoid; }
}
/* numeración automática: las partes ocultas no cuentan */
main { counter-reset: seccion; }
main h2[id] { counter-increment: seccion; }
main h2[id]::before { content: counter(seccion) ". "; }
.indice { counter-reset: item; }
.indice a { counter-increment: item; }
.indice a::before { content: counter(item) ". "; color: var(--suave); }
.v3 .indice a[data-desde="3"], .v4 .indice a[data-desde="4"], .v5 .indice a[data-desde="5"], .v6 .indice a[data-desde="6"], .v7 .indice a[data-desde="7"] { display: block; }