/* Kobaltica · Recursos → Invitaciones digitales (v1.1, 03-11-2026).
   Reutiliza pages.css + landing-pages.css (hero, showroom, tarjetas, CTA); aquí solo lo propio de la página. */
.kb-inv-actions{display:flex;flex-wrap:wrap;gap:12px}
.kb-inv-actions .kb-btn{margin-left:0}
.kb-inv-visual{background:linear-gradient(180deg,#f7faff 0%,#dbe8f6 100%)}
.kb-inv-visual picture{display:block;height:100%;min-height:inherit}
.kb-inv-visual img{display:block;width:100%;height:100%;min-height:inherit;object-fit:cover;object-position:center}

.kb-inv-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:24px}
.kb-inv-card__media{aspect-ratio:3/4}
.kb-inv-card__media picture{display:block;height:100%}
.kb-inv-card__media img{object-position:top center}
.kb-inv-card__media--formal{background:#FCFAF6}
.kb-inv-card__media--jardin{background:#FFF9F1}
.kb-inv-card__media--xv{background:#FCF9F8}
.kb-inv-card h3{font-size:clamp(24px,2.1vw,30px)}
.kb-inv-card .kb-lp-card__footer{flex-wrap:wrap}
.kb-inv-disclaimer{max-width:46em;margin:28px 0 0;color:var(--muted);font-size:15px;line-height:1.55}

.kb-inv-steps{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px;margin:0;padding:0;list-style:none}
.kb-inv-step{padding:28px;border:1px solid var(--line);border-radius:18px;background:#fff;box-shadow:0 8px 22px rgba(25,66,112,.045)}
.kb-inv-step__num{display:grid;place-items:center;width:44px;height:44px;margin-bottom:20px;border-radius:13px;background:var(--blue-soft);color:var(--blue);font:700 15px var(--display)}
.kb-inv-step h3{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px;font-size:22px;letter-spacing:-.02em;line-height:1.2}
.kb-inv-step p{margin-top:10px;color:var(--muted);line-height:1.55}
.kb-inv-badge{display:inline-block;padding:4px 10px;border-radius:999px;background:#fff3e0;color:#8a4b00;font:600 11px/1.3 var(--display);letter-spacing:.07em;text-transform:uppercase}

.kb-inv-compare{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:24px}
.kb-inv-compare__item{padding:30px;border:1px solid var(--line);border-radius:22px;background:#fff;box-shadow:0 12px 34px rgba(25,66,112,.06)}
.kb-inv-compare__item--private{background:var(--blue-pale);border-style:dashed}
.kb-inv-compare__tag{display:inline-block;padding:5px 10px;border:1px solid #cfe0f3;border-radius:999px;background:var(--blue-soft);color:var(--blue);font:600 11px/1.3 var(--display);letter-spacing:.07em;text-transform:uppercase}
.kb-inv-compare__tag--soon{border-color:#f5d9b0;background:#fff3e0;color:#8a4b00}
.kb-inv-compare h3{margin-top:14px;font-size:28px;letter-spacing:-.03em}
.kb-inv-compare ul{display:grid;gap:10px;margin:16px 0 0;padding:0;list-style:none}
.kb-inv-compare li{position:relative;padding-left:26px;color:var(--muted);line-height:1.5}
.kb-inv-compare li::before{content:"";position:absolute;left:2px;top:.55em;width:12px;height:7px;border-left:2px solid var(--blue);border-bottom:2px solid var(--blue);transform:rotate(-45deg) translateY(-3px)}
.kb-inv-compare__item--private li::before{width:8px;height:8px;border:2px solid #b5701a;border-radius:50%;transform:none;top:.5em}

.kb-inv-faq{display:grid;grid-template-columns:minmax(0,.8fr) minmax(0,1.4fr);gap:60px;align-items:start}
.kb-inv-faq h2{margin-top:10px;font-size:clamp(30px,3.4vw,44px);letter-spacing:-.03em;line-height:1.1}
.kb-inv-faq__list{display:grid;gap:10px}
.kb-inv-faq__list details{border:1px solid var(--line);border-radius:14px;background:#fff;transition:border-color .18s ease}
.kb-inv-faq__list details:hover{border-color:#b9cfe8}
.kb-inv-faq__list summary{display:flex;justify-content:space-between;align-items:center;gap:16px;min-height:56px;padding:14px 20px;color:var(--ink);font:600 16px/1.35 var(--display);cursor:pointer;list-style:none}
.kb-inv-faq__list summary::-webkit-details-marker{display:none}
.kb-inv-faq__list summary::after{content:"+";flex:none;display:grid;place-items:center;width:28px;height:28px;border-radius:50%;background:var(--blue-soft);color:var(--blue);font:600 18px/1 var(--display);transition:transform .18s ease}
.kb-inv-faq__list details[open] summary::after{transform:rotate(45deg)}
.kb-inv-faq__list details p{margin:0 20px 18px;padding-top:12px;border-top:1px solid var(--line);color:var(--muted);line-height:1.6}

@media(max-width:980px){
  .kb-inv-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .kb-inv-steps,.kb-inv-compare{grid-template-columns:1fr}
  .kb-inv-faq{grid-template-columns:1fr;gap:28px}
}
@media(max-width:680px){
  .kb-inv-grid{grid-template-columns:1fr}
  .kb-inv-actions .kb-btn{flex:1 1 100%}
  .kb-inv-step,.kb-inv-compare__item{padding:22px}
  .kb-inv-faq__list summary{font-size:15px;padding:12px 16px}
}
@media(prefers-reduced-motion:reduce){.kb-inv-faq__list summary::after,.kb-inv-faq__list details{transition:none}}

/* Modo oscuro: mismas superficies y tokens que el resto del sitio (theme.css). */
html[data-theme="dark"] .kb-inv-visual{background:linear-gradient(180deg,#112337 0%,#0b1a2b 100%)}
html[data-theme="dark"] .kb-inv-disclaimer,
html[data-theme="dark"] .kb-inv-step p,
html[data-theme="dark"] .kb-inv-compare li,
html[data-theme="dark"] .kb-inv-faq__list details p{color:var(--kb-text-muted,#a9b8cb)}
html[data-theme="dark"] .kb-inv-step,
html[data-theme="dark"] .kb-inv-compare__item,
html[data-theme="dark"] .kb-inv-faq__list details{background:var(--kb-surface);color:var(--kb-text);border-color:var(--kb-border);box-shadow:var(--kb-shadow-theme)}
html[data-theme="dark"] .kb-inv-compare__item--private{background:var(--kb-surface-2)}
html[data-theme="dark"] .kb-inv-faq__list summary,
html[data-theme="dark"] .kb-inv-step h3,
html[data-theme="dark"] .kb-inv-compare h3,
html[data-theme="dark"] .kb-inv-faq h2{color:var(--kb-text)}
html[data-theme="dark"] .kb-inv-step__num,
html[data-theme="dark"] .kb-inv-faq__list summary::after,
html[data-theme="dark"] .kb-inv-compare__tag{border-color:rgba(155,197,255,.3);background:rgba(106,167,255,.12);color:#9bc5ff}
html[data-theme="dark"] .kb-inv-badge,
html[data-theme="dark"] .kb-inv-compare__tag--soon{border-color:rgba(242,137,1,.35);background:rgba(242,137,1,.14);color:#ffc77a}
html[data-theme="dark"] .kb-inv-compare li::before{border-color:#9bc5ff}
html[data-theme="dark"] .kb-inv-compare__item--private li::before{border-color:#ffc77a}
html[data-theme="dark"] .kb-inv-faq__list details:hover{border-color:rgba(155,197,255,.35)}