/* ============================================================
   landing-2026.css — Estética editorial para landings de guía
   Scoped por .lp- para no interferir con el resto del sitio.
   Jun 2026. Colores de marca: oliva #4A5D2E, dorado #6E5625.
   ============================================================ */
.lp-hero{position:relative;overflow:hidden;border-radius:1.25rem;margin:.5rem 0 1.75rem;
  padding:clamp(1.8rem,5vw,3.25rem);color:#fff;
  background:linear-gradient(135deg,#3E4E26 0%,#4A5D2E 55%,#6E5625 100%)}
.lp-hero h1{color:#fff;font-family:'DM Serif Display',Georgia,serif;font-weight:400;
  line-height:1.12;margin:0 0 .6rem;font-size:clamp(1.6rem,4.2vw,2.4rem)}
.lp-hero .lp-lead{color:#F1ECE0;max-width:62ch;margin:0;font-size:1.05rem}
.lp-hero .lp-date{color:#E6DFCD;font-size:.82rem;margin:.9rem 0 0}
.lp-badges{display:flex;flex-wrap:wrap;gap:.5rem;margin-top:1.1rem}
.lp-badge{background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);
  color:#fff;padding:.32rem .8rem;border-radius:999px;font-size:.82rem;font-weight:500}
/* índice de anclas tipo "chips" */
.lp-toc{display:flex;flex-wrap:wrap;gap:.45rem;padding:0;margin:0 0 1.5rem;list-style:none}
.lp-toc a{display:inline-block;background:#f3f1e8;border:1px solid #e3ddcd;color:#3E4E26;
  padding:.35rem .8rem;border-radius:999px;font-size:.86rem;text-decoration:none;transition:all .2s}
.lp-toc a:hover{background:#4A5D2E;color:#fff}
/* tarjeta resumen "de un vistazo" */
.lp-facts{display:grid;gap:.8rem;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));margin:1.25rem 0}
.lp-fact{background:#f6f4ec;border:1px solid #e7e2d6;border-radius:1rem;padding:1rem 1.1rem}
.lp-fact strong{display:block;color:#3E4E26;font-size:.95rem;margin-bottom:.2rem}
.lp-fact span{color:#5b5b53;font-size:.9rem}
/* listas a tarjetas */
.lp-cards{display:grid;gap:.85rem;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  list-style:none;padding:0;margin:1rem 0}
.lp-cards li{background:#fff;border:1px solid #e7e2d6;border-radius:1rem;padding:1.1rem}
/* CTA destacado de reserva */
.lp-cta{background:linear-gradient(135deg,#4A5D2E,#6E5625);color:#fff;border-radius:1.25rem;
  padding:clamp(1.4rem,4vw,2.25rem);margin:1.75rem 0;text-align:center}
.lp-cta h2{color:#fff;margin-top:0}
.lp-cta p{color:#F1ECE0;max-width:55ch;margin:0 auto .9rem}
.lp-cta .lp-btn{display:inline-block;background:#fff;color:#3E4E26;font-weight:600;
  padding:.7rem 1.5rem;border-radius:999px;text-decoration:none}
.lp-cta .lp-btn:hover{background:#F1ECE0}
/* pasos numerados */
.lp-steps{list-style:none;counter-reset:s;padding:0;margin:1rem 0;display:grid;gap:.8rem;
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.lp-steps li{counter-increment:s;position:relative;background:#fff;border:1px solid #e7e2d6;
  border-radius:1rem;padding:1rem 1rem 1rem 3rem}
.lp-steps li::before{content:counter(s);position:absolute;left:.9rem;top:.95rem;width:1.6rem;
  height:1.6rem;border-radius:50%;background:#4A5D2E;color:#fff;font-weight:700;font-size:.85rem;
  display:flex;align-items:center;justify-content:center}

/* ============================================================
   Unificación de heroes heredados al lenguaje .lp-hero (Jun 2026)
   Alias: las clases antiguas adoptan el gradiente oliva->dorado
   de marca, sin necesidad de tocar el HTML de cada página.
   ============================================================ */
.mini-hero,.peal-hero,.aove-hero{
  background:linear-gradient(135deg,#3E4E26 0%,#4A5D2E 55%,#6E5625 100%)!important;
  color:#fff;border-radius:1.25rem;overflow:hidden;
  padding:clamp(1.8rem,5vw,3.25rem)!important;position:relative}
.mini-hero h1,.peal-hero h1,.aove-hero h1,
.mini-hero .h1,.peal-hero .h1{
  color:#fff;font-family:'DM Serif Display',Georgia,serif;font-weight:400;line-height:1.12}
.mini-hero p,.peal-hero p,.aove-hero p{color:#F1ECE0}
.mini-hero a:not(.btn):not(.lp-btn),
.peal-hero a:not(.btn):not(.lp-btn){color:#fff;text-decoration:underline}
/* badges reutilizables dentro de cualquier hero */
.mini-hero .lp-badge,.peal-hero .lp-badge,.aove-hero .lp-badge{
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.28);color:#fff}