/* Shared layout for the per-business pages (ferreterias, licorerias, restaurantes). */
.v-hero { position: relative; overflow: hidden; padding: 88px 0 96px; }
.v-hero::before {
  content: ''; position: absolute; inset: -20% -10% -10%; z-index: 0; pointer-events: none;
  background:
    radial-gradient(38% 45% at 20% 40%, rgba(212,199,255,.7), transparent 70%),
    radial-gradient(30% 40% at 85% 30%, rgba(160,205,235,.5), transparent 70%),
    radial-gradient(40% 40% at 55% 100%, rgba(255,190,210,.45), transparent 70%);
}
.v-hero .wrap { position: relative; z-index: 1; display: grid; grid-template-columns: 7fr 5fr; gap: 48px; align-items: center; }
.v-hero h1 em { font-style: normal; color: var(--violet); }
.v-hero .lede { margin-top: 24px; color: var(--stone); font-size: 18px; max-width: 34em; }
.v-hero .cta { margin-top: 32px; display: flex; gap: 20px; align-items: center; flex-wrap: wrap; }
.v-hero .fine { margin-top: 14px; font-size: 14px; color: var(--stone); }
.v-hero .ticket { padding: 24px; font-family: 'JetBrains Mono', monospace; font-size: 14px; }
.v-hero .ticket .k { font-family: 'Inter', sans-serif; font-size: 13px; color: var(--stone); font-weight: 600; }
.v-hero .ticket .row { display: flex; justify-content: space-between; gap: 12px; padding: 5px 0; }
.v-hero .ticket hr { border: 0; border-top: 1px dashed #c9c6bf; margin: 10px 0; }
.v-hero .ticket .total { font-weight: 600; font-size: 16px; }
.v-hero .ticket .ok { color: #0c6b4a; }

section { padding: clamp(56px, 8vw, 88px) 0; }
.eyebrow { font-size: 14px; font-weight: 600; color: var(--violet); margin-bottom: 16px; display: block; }
.head { max-width: 680px; margin-bottom: 40px; }
.head p { color: var(--stone); margin-top: 16px; font-size: 18px; }

.cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.card { background: var(--paper); border-radius: 16px; padding: 24px; border: 1px solid var(--mist); }
.card .pain { font-weight: 460; }
.card p + p { color: var(--stone); margin-top: 8px; }

.status-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 12px; max-width: 880px; }
.status-list li { background: var(--paper); border: 1px solid var(--mist); border-radius: 12px; padding: 16px 20px; display: grid; grid-template-columns: 120px 1fr; gap: 16px; align-items: baseline; }
.status-list .pill { display: inline-block; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 3px 10px; text-align: center; }
.pill.ready { background: #d8efe3; color: #0c5a3e; }
.pill.soon { background: #f3e6c8; color: #6b4a08; }
.status-list b { font-weight: 600; }
.status-list span.d { color: var(--stone); display: block; margin-top: 2px; }

.price-box { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; max-width: 880px; }
.price-box .plan { background: var(--paper); border: 1px solid var(--mist); border-radius: 16px; padding: 28px; }
.price-box .plan.pick { border-color: var(--violet); }
.price-box.three { grid-template-columns: repeat(3, 1fr); max-width: 1080px; }
.price-box .tag { display: inline-block; font-size: 12px; font-weight: 600; background: var(--lilac); border-radius: 999px; padding: 3px 10px; margin-left: 8px; vertical-align: middle; }
.price-box .price { font-size: 44px; font-weight: 460; letter-spacing: -0.027em; margin-top: 12px; }
.price-box .per { color: var(--stone); }
.price-box p { color: var(--stone); margin-top: 12px; }
.price-note { margin-top: 20px; color: var(--stone); max-width: 880px; }

.faq { max-width: 820px; }
details { border-top: 1px solid var(--mist); padding: 20px 0; }
details:last-child { border-bottom: 1px solid var(--mist); }
summary { cursor: pointer; list-style: none; font-size: 19px; font-weight: 460; display: flex; justify-content: space-between; gap: 24px; }
summary::-webkit-details-marker { display: none; }
summary::after { content: '+'; color: var(--stone); font-size: 24px; line-height: 1; }
details[open] summary::after { content: '–'; }
details p { color: var(--stone); margin-top: 12px; max-width: 42em; }

.closing { position: relative; overflow: hidden; border-radius: 24px; padding: 56px 48px; display: flex; justify-content: space-between; align-items: center; gap: 32px; flex-wrap: wrap; background:
  radial-gradient(40% 80% at 68% 50%, rgba(160,130,240,.55), transparent 70%),
  radial-gradient(30% 80% at 93% 50%, rgba(120,170,240,.5), transparent 70%),
  radial-gradient(50% 60% at 50% 98%, rgba(255,170,200,.45), transparent 70%), #ece8f7; }
.closing h2 { max-width: 14em; }
.closing .actions { display: flex; gap: 16px; flex-wrap: wrap; align-items: center; }
.btn-wa { background: #128c4a; color: #fff; }
.btn-wa:hover { background: #0f7a40; }

.others { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 16px; }
.others a { border: 1px solid var(--mist); background: var(--paper); border-radius: 999px; padding: 8px 16px; text-decoration: none; }
.others a:hover { border-color: var(--violet); color: var(--violet); }

@media (max-width: 960px) {
  .v-hero .wrap { grid-template-columns: 1fr; }
  .cards { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  .v-hero { padding: 56px 0 64px; }
  .cards, .price-box, .price-box.three { grid-template-columns: 1fr; }
  .status-list li { grid-template-columns: 1fr; gap: 6px; }
  .status-list .pill { justify-self: start; }
  .closing { padding: 40px 24px; }
}