/* =========================================================
   ARCANO DORADO — Planes de lectura en portada
   Usado por: /index.html, /es/index.html, /en/index.html
   ========================================================= */
.home-plans{
  position:relative; z-index:3;
  background: var(--black, #07070b);
  padding: 8px 0 56px;
}
.home-plans .hp-wrap{ max-width: 1180px; margin: 0 auto; padding: 0 28px; }
.home-plans-head{
  display:flex; align-items:flex-end; justify-content:space-between;
  gap: 16px; flex-wrap:wrap; margin-bottom: 20px;
  border-top: 1px solid rgba(201,162,74,0.25); padding-top: 22px;
}
.home-plans-head h2{
  margin:0; color: var(--gold, #c9a24a);
  font-size: 1.05rem; letter-spacing: .18em; text-transform: uppercase; font-weight: 500;
}
.home-plans-head p{ margin: 6px 0 0; color: var(--ivory-dim, #cfc6b4); font-size: .95rem; }
.hp-lang{ display:inline-flex; border:1px solid rgba(201,162,74,0.45); border-radius: 999px; overflow:hidden; }
.hp-lang button{
  background:transparent; color: var(--ivory-dim, #cfc6b4); border:0;
  padding: 7px 16px; font: inherit; font-size:.85rem; letter-spacing:.08em; cursor:pointer;
}
.hp-lang button[aria-pressed="true"]{ background: var(--gold, #c9a24a); color: var(--black, #07070b); }

.hp-grid{ display:grid; grid-template-columns: repeat(4, minmax(0,1fr)); gap: 16px; }
.hp-card{
  position:relative; display:flex; flex-direction:column;
  padding: 20px 18px 18px;
  border: 1px solid rgba(201,162,74,0.28); border-radius: 6px;
  background: linear-gradient(180deg, rgba(201,162,74,0.06), rgba(201,162,74,0.01));
  color: var(--ivory, #f3ecdc); text-decoration:none;
  transition: border-color .2s, transform .2s, background .2s;
}
.hp-card:hover, .hp-card:focus-visible{
  border-color: var(--gold, #c9a24a); transform: translateY(-2px);
  background: linear-gradient(180deg, rgba(201,162,74,0.12), rgba(201,162,74,0.02));
  outline:none;
}
.hp-card.featured{ border-color: var(--gold, #c9a24a); box-shadow: 0 0 0 1px rgba(201,162,74,0.35) inset; }
.hp-badge{
  position:absolute; top:-10px; left:18px;
  background: var(--gold, #c9a24a); color: var(--black, #07070b);
  font-size:.7rem; letter-spacing:.12em; text-transform:uppercase; padding: 3px 10px; border-radius: 3px;
}
.hp-name{ font-size: 1.12rem; margin: 0 0 4px; color: var(--ivory, #f3ecdc); }
.hp-meta{ font-size: .82rem; color: var(--gold, #c9a24a); letter-spacing:.06em; margin:0 0 10px; }
.hp-desc{ font-size: .9rem; color: var(--ivory-dim, #cfc6b4); margin: 0 0 16px; line-height:1.45; flex:1; }
.hp-price{ font-size: 1.5rem; color: var(--ivory, #f3ecdc); margin:0; }
.hp-price small{ font-size:.8rem; color: var(--ivory-dim, #cfc6b4); }
.hp-cta{ margin-top: 12px; font-size:.85rem; color: var(--gold, #c9a24a); letter-spacing:.06em; }
.hp-foot{ margin-top: 14px; font-size: .8rem; color: var(--ivory-dim, #cfc6b4); opacity:.8; }

@media(max-width:1000px){ .hp-grid{ grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media(max-width:900px){
  .home-plans .hp-wrap{ padding: 0 16px; }
  .home-plans-head{ justify-content:center; text-align:center; }
}
@media(max-width:560px){
  /* Móvil: carrusel horizontal para que asomen ya en la primera pantalla */
  .hp-grid{
    display:flex; overflow-x:auto; scroll-snap-type:x mandatory; gap:12px;
    margin: -12px -16px 0; padding: 12px 16px 6px;
  }
  .hp-card{ flex: 0 0 78%; scroll-snap-align:center; }
}