.simerline-producto .menu a[href="/el-producto/"]{color:var(--tinta); border-bottom-color:var(--azul)}

.entrada{
  position:relative; overflow:hidden;
  background:
    radial-gradient(70% 60% at 90% 0%, color-mix(in srgb,var(--celeste) 20%,transparent) 0%, transparent 60%),
    linear-gradient(180deg, var(--papel-alto) 0%, var(--papel) 100%);
  padding:clamp(44px,5.6vw,80px) 0 clamp(40px,5vw,64px);
}
.entrada-rejilla{display:grid; grid-template-columns:minmax(0,1fr); gap:clamp(36px,5vw,64px)}
@media (min-width:1020px){.entrada-rejilla{grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr); align-items:center}}
.ceja{
  font-family:var(--dato); font-size:11.5px; font-weight:500; letter-spacing:.13em; text-transform:uppercase;
  color:var(--azul); display:flex; align-items:center; gap:11px; margin-bottom:22px;
}
.ceja::before{content:""; width:28px; height:1.5px; background:var(--azul); flex:none}
.entrada h1{font-size:clamp(34px,4.3vw,54px); font-weight:800; letter-spacing:-.02em}
.entrada-bajada{margin-top:20px; font-size:18px; color:var(--tinta-media); max-width:54ch}

.mapa{
  background:var(--papel-alto); border:1px solid var(--linea); border-radius:var(--radio);
  box-shadow:var(--sombra-alta); padding:24px 26px 20px;
}
.mapa-rotulo{font-family:var(--dato); font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--tinta-tenue); margin-bottom:14px}
.mapa ol{list-style:none; margin:0; padding:0; display:grid; gap:2px}
.mapa a{
  display:flex; align-items:center; gap:14px; padding:10px 10px; border-radius:10px;
  text-decoration:none; color:var(--tinta); font-size:15px; font-weight:600; letter-spacing:-.01em;
  transition:background .18s, transform .18s var(--curva);
}
.mapa a:hover{background:var(--azul-lavado); transform:translateX(3px)}
.mapa a b{font-family:var(--dato); font-weight:500; font-size:11.5px; color:var(--azul); width:22px; flex:none}
.mapa a svg{margin-left:auto; width:14px; height:14px; flex:none; opacity:0; transition:opacity .18s, transform .18s var(--curva)}
.mapa a:hover svg{opacity:1; transform:translateX(2px)}

.carril{
  position:fixed; left:18px; top:50%; transform:translateY(-50%); z-index:25;
  display:none; flex-direction:column; gap:12px; padding:10px 6px;
  background:color-mix(in srgb,var(--papel-alto) 85%,transparent); backdrop-filter:blur(8px);
  border:1px solid var(--linea); border-radius:999px;
}
@media (min-width:1260px){.carril{display:flex}}
.carril a{position:relative; display:block; width:10px; height:10px; border-radius:50%; background:var(--linea-fuerte); transition:background .2s, transform .2s var(--curva)}
.carril a:hover{background:var(--azul)}
.carril a[aria-current="true"]{background:var(--azul); transform:scale(1.5)}
.carril a::after{
  content:attr(data-titulo); position:absolute; left:22px; top:50%; transform:translateY(-50%) translateX(-4px);
  white-space:nowrap; font-size:12.5px; font-weight:600; color:var(--banda-tinta); background:var(--banda);
  padding:5px 10px; border-radius:7px; opacity:0; pointer-events:none; transition:opacity .18s, transform .18s var(--curva);
}
.carril a:hover::after{opacity:1; transform:translateY(-50%) translateX(0)}

.capitulos{display:grid; gap:clamp(56px,8vw,112px); padding-top:clamp(16px,2vw,24px)}
.capitulo{display:grid; gap:clamp(24px,4vw,56px); align-items:center; scroll-margin-top:100px}
@media (min-width:960px){
  .capitulo{grid-template-columns:minmax(0,.88fr) minmax(0,1.12fr)}
  .capitulo.invertido .capitulo-texto{order:2}
}
.capitulo-num{font-family:var(--dato); font-size:12px; letter-spacing:.14em; color:var(--azul)}
.capitulo h2{font-size:clamp(24px,2.9vw,35px); font-weight:800; letter-spacing:-.03em; margin-top:12px}
.capitulo p{margin-top:16px; font-size:17px; color:var(--tinta-media); line-height:1.66; max-width:54ch}
.capitulo p.capitulo-nota{margin-top:14px; font-family:var(--dato); font-size:11px; line-height:1.6; letter-spacing:.06em; text-transform:uppercase; color:var(--tinta-tenue)}
.lamina{
  position:relative; aspect-ratio:2408/1400; overflow:hidden;
  -webkit-mask-image:linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%),
                     linear-gradient(to bottom, transparent 0, #000 9%, #000 84%, transparent 100%);
  -webkit-mask-composite:source-in;
  mask-image:linear-gradient(to right, transparent 0, #000 9%, #000 91%, transparent 100%),
             linear-gradient(to bottom, transparent 0, #000 9%, #000 84%, transparent 100%);
  mask-composite:intersect;
}
.lamina img{width:100%; height:100%; object-fit:cover; object-position:top left; border-radius:12px; display:block;
  transform:scale(1.03); transition:transform 1.4s var(--curva)}
.capitulo:not(.espera) .lamina img{transform:scale(1)}
.capitulo:hover .lamina img{transform:scale(1.015)}

.llevas{display:grid; gap:12px; margin-top:26px}
@media (min-width:640px){.llevas{grid-template-columns:1fr 1fr}}
.lleva{display:flex; align-items:center; gap:12px; padding:12px 14px; background:var(--papel-alto); border:1px solid var(--linea); border-radius:12px; font-size:14.5px; font-weight:600; color:var(--tinta)}
.lleva small{display:block; font-weight:400; font-size:13px; color:var(--tinta-tenue); margin-top:2px}
.lleva-tipo{margin-left:auto; flex:none; font-family:var(--dato); font-size:10.5px; letter-spacing:.08em; color:var(--tinta-tenue); border:1px solid var(--linea); border-radius:999px; padding:3px 8px}

@media (prefers-reduced-motion:reduce){
  .lamina img{transform:none; transition:none}
}

.pasos{
  list-style:none; margin:46px 0 0; padding:0; display:grid; gap:22px;
  counter-reset:paso;
}
@media (min-width:760px){.pasos{grid-template-columns:repeat(3,1fr); gap:28px}}
.paso{position:relative; padding:28px 26px 30px; background:var(--papel-alto); border:1px solid var(--linea); border-radius:var(--radio);
  transition:transform .24s var(--curva), box-shadow .24s var(--curva)}
.paso:hover{transform:translateY(-4px); box-shadow:var(--sombra-alta)}
.paso-num{
  display:grid; place-items:center; width:40px; height:40px; border-radius:12px;
  background:var(--azul); color:#fff; font-weight:800; font-size:17px; letter-spacing:-.02em;
  margin-bottom:18px; box-shadow:0 6px 16px -8px var(--boton-sombra);
}
@media (min-width:760px){
  .paso:not(:last-child)::after{
    content:""; position:absolute; top:48px; right:-28px; width:28px; height:2px;
    background:linear-gradient(to right, var(--linea-fuerte), transparent);
  }
}
.paso h3{font-size:19px; font-weight:700; margin-bottom:10px}
.paso p{font-size:15.5px; color:var(--tinta-media); line-height:1.64}