/* Landing de Buzón+ Home (Pages/Home/Index.cshtml). Va después de hoteles.css (base .h-*) y retail-claro.css (componentes .r-*). */
.hl-etiqueta{display:inline-block;margin:0 0 18px;padding:6px 14px;border-radius:999px;background:var(--laguna-t);color:var(--laguna);font-size:.86rem;font-weight:700}

/* Celular del repartidor */
.hl-cel{position:relative;width:min(290px,86%);justify-self:start;margin-left:5%;margin-bottom:190px;padding:16px;border-radius:30px;background:#fff;border:8px solid var(--tinta);box-shadow:0 30px 60px -24px rgba(18,41,47,.55);transform:rotate(-2deg);display:grid;gap:10px}
.hl-dir{display:grid;gap:2px;padding:14px;border-radius:16px;background:var(--laguna-t)}
.hl-dir small{font-size:.7rem;font-weight:800;letter-spacing:.05em;text-transform:uppercase;color:var(--laguna)}
.hl-dir b{font-size:1.5rem;line-height:1.1;letter-spacing:-.02em}
.hl-dir span{font-size:.8rem;font-weight:600}
.hl-dir em{font-style:normal;font-weight:800;color:var(--laguna);font-size:.88rem;margin-top:2px}
.hl-instr{font-size:.8rem;color:var(--suave);padding:8px 10px;border-radius:10px;background:var(--bruma)}
.hl-chat{list-style:none;margin:0;padding:0;display:grid;gap:6px}
.hl-chat li{max-width:85%;padding:7px 10px;border-radius:12px;font-size:.78rem;font-weight:600}
.hl-chat .v{justify-self:start;background:var(--bruma)}
.hl-chat .h{justify-self:end;background:var(--laguna);color:#fff}
@media(max-width:520px){.hl-cel{margin-left:0;justify-self:center;width:min(290px,90%);margin-bottom:200px}}

/* Planes */
.hl-planes{display:grid;grid-template-columns:repeat(2,minmax(0,360px));justify-content:center;gap:20px}
.hl-plan{position:relative;display:flex;flex-direction:column;gap:10px;padding:28px;border-radius:22px;background:#fff;border:1px solid var(--linea);box-shadow:0 30px 60px -40px rgba(18,41,47,.4)}
.hl-plan.destacado{border:2px solid var(--laguna)}
.hl-reco{position:absolute;top:-13px;left:24px;padding:5px 12px;border-radius:999px;background:var(--laguna);color:#fff;font-size:.78rem;font-weight:800}
.hl-plan h3{font-size:1.3rem}
.hl-precio{font-size:2.6rem;font-weight:800;letter-spacing:-.03em;line-height:1;font-variant-numeric:tabular-nums}
.hl-precio small{font-size:.9rem;font-weight:600;letter-spacing:0;color:var(--suave)}
.hl-desc{color:var(--suave)}
.hl-plan .h-btn{margin-top:auto}
@media(max-width:700px){.hl-planes{grid-template-columns:1fr}}
.hl-total{margin-top:-4px;font-weight:700;color:var(--laguna)}