/* Recetario web — componentes de /r. Tokens en /styles.css. */

/* ---------- cabecera ---------- */
.rw-top{position:sticky; top:0; z-index:50; background:rgba(251,246,238,.92);
  backdrop-filter:saturate(160%) blur(10px); border-bottom:1px solid var(--color-border);}
.rw-top__in{display:flex; align-items:center; justify-content:space-between; gap:1rem; height:70px;}
.rw-logo img{height:48px; width:auto;}
.rw-nav{display:flex; align-items:center; gap:1.25rem;}
.rw-nav a{font-family:var(--font-display); font-weight:600; font-size:.9rem;}
.rw-nav a:not(.btn):hover{color:var(--color-primary);}

/* ---------- portada del índice ---------- */
.rw-hero{padding:clamp(2.5rem,7vw,5rem) 0 clamp(1.5rem,4vw,2.5rem); text-align:center;}
.rw-hero h1{font-size:clamp(1.9rem,5vw,3.25rem); font-weight:800; letter-spacing:-.025em;
  line-height:1.08; text-wrap:balance; margin-bottom:1rem;}
.rw-hero .eyebrow{display:block; margin-bottom:.9rem;}
.rw-lead{color:var(--color-text-muted); font-size:clamp(1rem,1.6vw,1.15rem);
  max-width:56ch; margin-inline:auto;}

/* ---------- tarjetas ---------- */
.rw-lista{padding-bottom:clamp(2rem,5vw,3.5rem);}
.rw-grid{display:grid; gap:1.25rem; grid-template-columns:repeat(auto-fit,minmax(min(100%,17rem),1fr));}
.rw-card{display:flex; flex-direction:column; gap:.55rem; background:var(--color-surface);
  border:1px solid var(--color-border); border-radius:var(--radius-lg); padding:1.5rem;
  box-shadow:var(--shadow-sm); transition:transform var(--dur-base) var(--ease-out),
  box-shadow var(--dur-base) var(--ease-out), border-color var(--dur-fast) var(--ease-out);}
.rw-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-md); border-color:var(--color-accent);}
.rw-card__cat{font-family:var(--font-display); font-weight:700; font-size:.7rem;
  letter-spacing:.14em; text-transform:uppercase; color:var(--color-primary);}
.rw-card h2{font-size:1.2rem; font-weight:700; letter-spacing:-.015em; line-height:1.2;}
.rw-card__txt{color:var(--color-text-muted); font-size:.95rem; flex:1;}
.rw-card__sal{font-family:var(--font-display); font-weight:700; font-size:.85rem;
  color:var(--green-600); margin-top:.25rem;}

/* ---------- página de receta ---------- */
.rw-receta{padding:clamp(1.5rem,4vw,2.5rem) 0 clamp(2.5rem,6vw,4rem);}
.rw-receta__in{max-width:56rem;}
.rw-miga{font-size:.85rem; color:var(--color-text-muted); margin-bottom:1.25rem;}
.rw-miga a:hover{color:var(--color-primary);}
.rw-receta h1{font-size:clamp(1.8rem,4.5vw,2.9rem); font-weight:800; letter-spacing:-.025em;
  line-height:1.08; text-wrap:balance; margin:.5rem 0 .85rem;}
.rw-receta .rw-lead{margin-inline:0; font-size:1.0625rem;}

.rw-datos{list-style:none; margin:1.5rem 0 0; padding:0; display:flex; flex-wrap:wrap; gap:.75rem;}
.rw-datos li{display:flex; flex-direction:column; gap:.1rem; background:var(--color-surface);
  border:1px solid var(--color-border); border-radius:var(--radius-md); padding:.6rem 1rem;}
.rw-datos strong{font-family:var(--font-display); font-size:.95rem;}
.rw-datos span{font-size:.75rem; color:var(--color-text-muted);}

/* el hotspot: la sal es el enlace a la tienda */
.rw-secreto{margin:2rem 0; padding:1.6rem; border-radius:var(--radius-lg);
  background:var(--ink-900); color:var(--cream-100);}
.rw-secreto__et{font-family:var(--font-display); font-weight:700; font-size:.7rem;
  letter-spacing:.16em; text-transform:uppercase; color:var(--color-accent);}
.rw-secreto__sal{font-family:var(--font-display); font-weight:800; font-size:clamp(1.4rem,3.2vw,1.9rem);
  line-height:1.15; margin:.3rem 0 .35rem;}
.rw-secreto__ing{color:var(--stone-400); font-size:.95rem;}
.rw-secreto__ctas{display:flex; flex-wrap:wrap; gap:.6rem; margin-top:1.1rem;}
.rw-secreto .btn--secondary{color:var(--cream-100); box-shadow:inset 0 0 0 1.5px var(--stone-500);}
.rw-secreto .btn--secondary:hover{background:rgba(255,255,255,.08); color:#fff;}

.rw-cols{display:grid; gap:2rem; grid-template-columns:minmax(0,1fr); margin-top:.5rem;}
@media (min-width:860px){
  .rw-cols{grid-template-columns:19rem minmax(0,1fr); gap:3rem; align-items:start;}
  .rw-ingredientes{position:sticky; top:96px;}
}
.rw-cols h2{font-size:1.35rem; font-weight:700; letter-spacing:-.015em; margin-bottom:.9rem;}
.rw-ingredientes ul{list-style:none; margin:0; padding:1.25rem; display:flex; flex-direction:column;
  gap:.6rem; background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-sm);}
.rw-ingredientes li{position:relative; padding-left:1.35rem; font-size:.97rem;}
.rw-ingredientes li::before{content:''; position:absolute; left:0; top:.55em; width:.5rem; height:.5rem;
  border-radius:50%; background:var(--color-accent);}
.rw-pasos ol{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:1.1rem;}
.rw-pasos li{display:grid; grid-template-columns:2.2rem minmax(0,1fr); gap:.9rem; align-items:start;}
.rw-paso__n{font-family:var(--font-display); font-weight:800; font-size:1.05rem; color:#fff;
  background:var(--color-primary); width:2.2rem; height:2.2rem; border-radius:50%;
  display:flex; align-items:center; justify-content:center; line-height:1;}
.rw-pasos p{font-size:1.02rem; line-height:1.6;}

/* ---------- el PDF como premio ---------- */
.rw-premio{margin-top:2.75rem; padding:1.75rem; border-radius:var(--radius-lg);
  background:var(--green-50); border:1px solid var(--green-100); text-align:center;}
.rw-premio h2{font-size:1.3rem; font-weight:700; margin-bottom:.5rem;}
.rw-premio p{color:var(--ink-700); max-width:48ch; margin-inline:auto; margin-bottom:1.1rem;}
.rw-premio--solo{margin:0 0 clamp(2.5rem,6vw,4rem); border-radius:0; border-inline:none;}
.rw-premio--solo .container{padding-block:2.5rem;}

.rw-compartir{margin-top:1.5rem; text-align:center;}

.rw-saltos{margin-top:2.5rem; display:grid; gap:.75rem;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,15rem),1fr));}
.rw-salto{display:flex; flex-direction:column; gap:.2rem; padding:1rem 1.25rem;
  background:var(--color-surface); border:1px solid var(--color-border);
  border-radius:var(--radius-md); transition:border-color var(--dur-fast) var(--ease-out);}
.rw-salto:hover{border-color:var(--color-primary);}
.rw-salto span{font-size:.72rem; letter-spacing:.14em; text-transform:uppercase;
  font-family:var(--font-display); font-weight:700; color:var(--color-text-muted);}
.rw-salto strong{font-family:var(--font-display); font-size:.97rem; font-weight:600; line-height:1.25;}
.rw-salto--next{text-align:right;}

/* ---------- pie ---------- */
.rw-pie{background:var(--ink-900); color:var(--cream-100); padding:2.5rem 0; text-align:center;}
.rw-pie__marca{font-family:var(--font-display); font-weight:700; font-size:1.05rem;}
.rw-pie__txt{color:var(--stone-400); font-size:.92rem; max-width:52ch; margin:.6rem auto 1rem;}
.rw-pie__links{font-size:.92rem; display:flex; flex-wrap:wrap; gap:.5rem; justify-content:center;}
.rw-pie__links a:hover{color:var(--color-accent);}
.rw-pie__legal{color:var(--stone-500); font-size:.78rem; margin-top:1rem;}

@media (max-width:560px){
  .rw-nav{gap:.75rem;}
  .rw-nav a:not(.btn){display:none;}
  .rw-datos li{flex:1 1 8rem;}
}