/* INNOZONA · secciones de venta v4.6 (portada y páginas de servicio).
 * Componentes con prefijo zs- (secciones) y zv- (maquetas animadas dibujadas con CSS).
 * Las animaciones de las maquetas arrancan cuando la sección entra en pantalla (.is-vis, lo pone iz-secciones.js). */

.zs-eyebrow { display: inline-flex; align-items: center; gap: 0.5rem; font: 600 0.8rem/1 var(--font-text); letter-spacing: 0.08em; text-transform: uppercase; color: var(--violet); }
.zs-eyebrow::before { content: ""; width: 18px; height: 2px; border-radius: 2px; background: currentColor; }
.hc-sec.ink .zs-eyebrow, .zs-dark .zs-eyebrow { color: var(--lila); }
.zs-h2 { font-size: clamp(2rem, 2.4vw + 1.1rem, 3.3rem); letter-spacing: -0.035em; font-weight: 600; line-height: 1.05; margin-top: 0.9rem; }
.zs-lead { font-size: 1.1rem; color: var(--text-2); margin-top: 1rem; max-width: 40rem; }
.hc-sec.ink .zs-lead { color: oklch(84% 0.02 293); }
.zs-checks { list-style: none; padding: 0; margin: 1.5rem 0 0; display: grid; gap: 0.75rem; }
.zs-checks li { position: relative; padding-left: 2rem; color: var(--text-2); }
.zs-checks li b { color: var(--text); font-weight: 600; }
.hc-sec.ink .zs-checks li { color: oklch(84% 0.02 293); }
.hc-sec.ink .zs-checks li b { color: var(--white); }
.zs-checks li::before { content: ""; position: absolute; left: 0; top: 0.15rem; width: 20px; height: 20px; border-radius: 50%; background: var(--lila) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23111116' stroke-width='3.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/12px no-repeat; }
.zs-link { display: inline-flex; align-items: center; gap: 0.5rem; margin-top: 1.5rem; font-weight: 600; color: var(--violet); text-decoration: none; }
.zs-link::after { content: "→"; transition: transform 0.3s var(--ease); }
.zs-link:hover::after { transform: translateX(4px); }
.hc-sec.ink .zs-link { color: var(--lila); }

/* ---------- Cinta de aplicaciones que corre ---------- */
.zs-marquee { position: relative; overflow: hidden; padding-block: 0.5rem; -webkit-mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); mask-image: linear-gradient(90deg, transparent, #000 10%, #000 90%, transparent); }
.zs-marquee-track { display: flex; width: max-content; gap: 0.85rem; animation: zs-marquee 42s linear infinite; }
.zs-marquee:hover .zs-marquee-track { animation-play-state: paused; }
.zs-app { display: inline-flex; align-items: center; gap: 0.65rem; padding: 0.7rem 1.15rem 0.7rem 0.75rem; border-radius: 14px; background: var(--card); border: 1px solid var(--line); font: 600 0.98rem/1 var(--font-display); color: var(--text); white-space: nowrap; }
.zs-app i { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-style: normal; font: 700 0.85rem/1 var(--font-display); color: var(--white); background: var(--c, var(--violet)); }
.zs-marquee-cap { text-align: center; color: var(--text-3); font-size: 0.92rem; margin-bottom: 1.25rem; }
@keyframes zs-marquee { to { transform: translateX(-50%); } }

/* ---------- Funciones que rotan solas (lista + escenario) ---------- */
.zs-show { display: grid; grid-template-columns: minmax(0, 0.9fr) minmax(0, 1.1fr); gap: clamp(1.5rem, 4vw, 4rem); align-items: center; }
.zs-show-list { display: grid; gap: 0.5rem; }
.zs-show-item { position: relative; text-align: left; width: 100%; border: 0; background: transparent; padding: 1.15rem 1.25rem 1.2rem 1.4rem; border-radius: 16px; cursor: pointer; color: var(--text); transition: background 0.35s; }
.zs-show-item::before { content: ""; position: absolute; left: 0; top: 1.1rem; bottom: 1.1rem; width: 3px; border-radius: 3px; background: var(--line); }
.zs-show-item::after { content: ""; position: absolute; left: 0; top: 1.1rem; width: 3px; height: 0; border-radius: 3px; background: var(--violet); }
.zs-show-item[aria-selected="true"] { background: var(--card); box-shadow: var(--shadow-sm); }
.zs-show-item[aria-selected="true"]::after { animation: zs-prog var(--zs-t, 6s) linear forwards; }
.zs-show.is-paused .zs-show-item[aria-selected="true"]::after { animation-play-state: paused; }
.zs-show-item b { display: flex; align-items: center; gap: 0.7rem; font: 600 1.15rem/1.25 var(--font-display); letter-spacing: -0.01em; }
.zs-show-item b svg { width: 22px; height: 22px; flex: none; color: var(--violet); }
.zs-show-item p { margin: 0; max-height: 0; overflow: hidden; opacity: 0; color: var(--text-2); font-size: 0.97rem; transition: max-height 0.5s var(--ease), opacity 0.4s, margin 0.4s; }
.zs-show-item[aria-selected="true"] p { max-height: 12rem; opacity: 1; margin-top: 0.55rem; }
.hc-sec.paper .zs-show-item[aria-selected="true"] { background: var(--white); }
@keyframes zs-prog { to { height: calc(100% - 2.2rem); } }
.zs-stage { position: relative; min-height: 30rem; border-radius: 24px; overflow: hidden; display: grid; place-items: center; padding: clamp(1.25rem, 3vw, 2.5rem); background: radial-gradient(120% 90% at 85% 10%, oklch(62% 0.18 292), transparent 60%), radial-gradient(90% 80% at 10% 100%, oklch(42% 0.2 286), transparent 60%), var(--hc-ink); isolation: isolate; }
.zs-stage::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: linear-gradient(oklch(100% 0 0 / 0.05) 1px, transparent 1px), linear-gradient(90deg, oklch(100% 0 0 / 0.05) 1px, transparent 1px); background-size: 34px 34px; -webkit-mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%); mask-image: radial-gradient(ellipse at center, #000 30%, transparent 75%); }
.zs-stage > [data-escena] { grid-area: 1 / 1; width: 100%; display: grid; place-items: center; opacity: 0; visibility: hidden; transform: translateY(18px) scale(0.98); transition: opacity 0.55s var(--ease), transform 0.7s var(--ease), visibility 0s 0.55s; }
.zs-stage > [data-escena].is-on { opacity: 1; visibility: visible; transform: none; transition: opacity 0.55s var(--ease), transform 0.7s var(--ease), visibility 0s; }
@media (max-width: 900px) {
  .zs-show { grid-template-columns: minmax(0, 1fr); }
  .zs-stage { min-height: 24rem; order: -1; }
}

/* ---------- Bloques alternados (texto + maqueta) ---------- */
.zs-alt { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr); gap: clamp(2rem, 5vw, 5rem); align-items: center; }
.zs-alt + .zs-alt { margin-top: clamp(4rem, 8vw, 7rem); }
.zs-alt.rev > .zs-alt-txt { order: 2; }
.zs-alt-vis { position: relative; border-radius: 24px; min-height: 26rem; display: grid; place-items: center; padding: clamp(1.25rem, 3vw, 2.5rem); overflow: hidden; isolation: isolate; background: linear-gradient(150deg, oklch(86% 0.07 296), oklch(70% 0.14 290) 55%, oklch(50% 0.2 287)); }
.zs-alt-vis.v2 { background: linear-gradient(160deg, oklch(90% 0.045 300), oklch(76% 0.1 282) 55%, oklch(56% 0.16 272)); }
.zs-alt-vis.v3 { background: linear-gradient(140deg, oklch(86% 0.07 320), oklch(70% 0.13 300) 55%, oklch(50% 0.2 290)); }
.zs-alt-vis.dk { background: radial-gradient(100% 80% at 80% 0%, oklch(55% 0.2 292), transparent 60%), var(--hc-ink); }
.zs-alt-vis::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(circle at 20% 20%, oklch(100% 0 0 / 0.35), transparent 40%); }
@media (max-width: 900px) { .zs-alt { grid-template-columns: minmax(0, 1fr); } .zs-alt.rev > .zs-alt-txt { order: 0; } .zs-alt-vis { min-height: 20rem; } }

/* ---------- Tarjetas de beneficios (cada una con su icono) ---------- */
.zs-bento { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1rem; }
.zs-bento.c4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
.zs-card { position: relative; overflow: hidden; border-radius: 20px; background: var(--card); border: 1px solid var(--line); padding: 1.6rem 1.5rem 1.7rem; transition: transform 0.45s var(--ease), border-color 0.3s, box-shadow 0.45s; }
.zs-card::before { content: ""; position: absolute; inset: 0; z-index: 0; opacity: 0; background: radial-gradient(260px circle at var(--mx, 50%) var(--my, 0%), oklch(77% 0.113 296 / 0.22), transparent 70%); transition: opacity 0.3s; }
.zs-card > * { position: relative; z-index: 1; }
.zs-card:hover { transform: translateY(-4px); border-color: oklch(77% 0.113 296 / 0.6); box-shadow: var(--shadow); }
.zs-card:hover::before { opacity: 1; }
.zs-card .ic { width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; background: var(--accent-soft); color: var(--violet); margin-bottom: 1.2rem; transition: transform 0.5s var(--ease), background 0.3s, color 0.3s; }
.zs-card .ic svg { width: 24px; height: 24px; }
.zs-card:hover .ic { transform: rotate(-6deg) scale(1.06); background: var(--violet); color: var(--white); }
.zs-card h3 { font: 600 1.15rem/1.25 var(--font-display); letter-spacing: -0.01em; }
.zs-card p { color: var(--text-2); margin-top: 0.5rem; font-size: 0.97rem; }
.zs-card.wide { grid-column: span 2; }
.zs-card.ink { background: var(--hc-ink); color: var(--white); border-color: transparent; }
.zs-card.ink p { color: oklch(82% 0.02 293); }
.zs-card.ink .ic { background: oklch(100% 0 0 / 0.08); color: var(--lila); }
.hc-sec.ink .zs-card:not(.lt) { background: oklch(100% 0 0 / 0.05); border-color: oklch(100% 0 0 / 0.1); color: var(--white); }
.hc-sec.ink .zs-card:not(.lt) p { color: oklch(82% 0.02 293); }
.hc-sec.ink .zs-card:not(.lt) .ic { background: oklch(100% 0 0 / 0.08); color: var(--lila); }
@media (max-width: 1000px) { .zs-bento, .zs-bento.c4 { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 620px) { .zs-bento, .zs-bento.c4 { grid-template-columns: minmax(0, 1fr); } .zs-card.wide { grid-column: auto; } }

/* ---------- Cifras (solo se muestran las que el dueño llena) ---------- */
.zs-stats { display: grid; grid-template-columns: repeat(var(--n, 4), minmax(0, 1fr)); gap: 1rem; }
.zs-stat { border-radius: 20px; padding: 1.6rem 1.5rem; background: oklch(100% 0 0 / 0.05); border: 1px solid oklch(100% 0 0 / 0.1); }
.zs-stat b { display: block; font: 700 clamp(2.2rem, 2vw + 1.4rem, 3.2rem)/1 var(--font-display); letter-spacing: -0.03em; color: var(--white); }
.zs-stat span { display: block; margin-top: 0.6rem; color: oklch(82% 0.02 293); font-size: 0.95rem; }
@media (max-width: 800px) { .zs-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ---------- Comparación (estás aquí / sube a…) ---------- */
.zs-vs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1rem; }
.zs-vs-card { border-radius: 22px; padding: clamp(1.5rem, 3vw, 2.25rem); background: var(--card); border: 1px solid var(--line); display: flex; flex-direction: column; }
.zs-vs-card.here { border: 2px solid var(--violet); box-shadow: 0 0 0 6px var(--accent-soft); }
.zs-vs-card .tag { align-self: flex-start; }
.zs-vs-card h3 { font: 600 1.5rem/1.2 var(--font-display); margin-top: 1rem; letter-spacing: -0.02em; }
.zs-vs-card > p { color: var(--text-2); margin-top: 0.5rem; }
.zs-vs-card .zs-checks { margin-top: 1.25rem; }
.zs-vs-card .btn-hc { margin-top: auto; align-self: flex-start; }
.zs-vs-card .zs-checks + .btn-hc { margin-top: 1.75rem; }
@media (max-width: 760px) { .zs-vs { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Recorrido sin números (migración) ---------- */
.zs-flow { position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.zs-flow::before { content: ""; position: absolute; left: 6%; right: 6%; top: 34px; height: 2px; background: repeating-linear-gradient(90deg, var(--line-2) 0 8px, transparent 8px 16px); }
.zs-flow::after { content: ""; position: absolute; left: 6%; top: 34px; height: 2px; width: 0; background: var(--violet); transition: width 2.4s var(--ease); }
.zs-flow.is-vis::after { width: 88%; }
.zs-flow-step { position: relative; text-align: center; padding: 0 0.5rem; }
.zs-flow-step .ic { position: relative; z-index: 1; width: 68px; height: 68px; margin: 0 auto 1.1rem; border-radius: 20px; display: grid; place-items: center; background: var(--card); border: 1px solid var(--line); color: var(--violet); box-shadow: var(--shadow-sm); transition: background 0.5s, color 0.5s, transform 0.6s var(--ease); }
.zs-flow-step .ic svg { width: 28px; height: 28px; }
.zs-flow.is-vis .zs-flow-step .ic { background: var(--violet); color: var(--white); transform: translateY(-4px); }
.zs-flow.is-vis .zs-flow-step:nth-child(1) .ic { transition-delay: 0.2s; }
.zs-flow.is-vis .zs-flow-step:nth-child(2) .ic { transition-delay: 0.8s; }
.zs-flow.is-vis .zs-flow-step:nth-child(3) .ic { transition-delay: 1.4s; }
.zs-flow.is-vis .zs-flow-step:nth-child(4) .ic { transition-delay: 2s; }
.zs-flow-step h3 { font: 600 1.1rem/1.25 var(--font-display); }
.zs-flow-step p { color: var(--text-2); font-size: 0.95rem; margin-top: 0.4rem; }
.hc-sec.ink .zs-flow-step .ic { background: oklch(100% 0 0 / 0.06); border-color: oklch(100% 0 0 / 0.12); color: var(--lila); }
.hc-sec.ink .zs-flow-step p { color: oklch(82% 0.02 293); }
@media (max-width: 860px) {
  .zs-flow { grid-template-columns: 1fr; gap: 1.5rem; }
  .zs-flow::before, .zs-flow::after { left: 33px; right: auto; top: 10px; bottom: 10px; width: 2px; height: auto; }
  .zs-flow::before { background: repeating-linear-gradient(180deg, var(--line-2) 0 8px, transparent 8px 16px); }
  .zs-flow::after { height: 0; transition: height 2.4s var(--ease); }
  .zs-flow.is-vis::after { width: 2px; height: calc(100% - 20px); }
  .zs-flow-step { display: grid; grid-template-columns: 68px 1fr; gap: 0 1rem; text-align: left; padding: 0; }
  .zs-flow-step .ic { grid-row: span 2; margin: 0; }
  .zs-flow-step h3 { align-self: end; }
}

/* ---------- Medios de pago ---------- */
.zs-pay-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 0.75rem; margin-top: 1.75rem; }
.zs-pay { display: flex; align-items: center; gap: 0.7rem; padding: 0.85rem 1rem; border-radius: 14px; background: oklch(100% 0 0 / 0.06); border: 1px solid oklch(100% 0 0 / 0.12); font-weight: 600; color: var(--white); transition: transform 0.4s var(--ease), border-color 0.3s; }
.zs-pay:hover { transform: translateY(-3px); border-color: var(--lila); }
.zs-pay i { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; background: var(--c, var(--violet)); color: var(--white); font-size: 0.95rem; font-style: normal; flex: none; }
.zs-pay small { display: block; font-weight: 400; font-size: 0.78rem; color: oklch(78% 0.02 293); }

/* ---------- Cierre (CTA final) ---------- */
.zs-cta { position: relative; overflow: hidden; isolation: isolate; border-radius: 28px; background: var(--hc-ink); color: var(--white); display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr); gap: clamp(1.5rem, 4vw, 3rem); padding: clamp(2rem, 5vw, 4rem); align-items: center; }
.zs-cta-glow { position: absolute; inset: -20%; z-index: -1; pointer-events: none; }
.zs-cta-glow i { position: absolute; border-radius: 50%; filter: blur(60px); opacity: 0.75; }
.zs-cta-glow i:nth-child(1) { width: 46%; aspect-ratio: 1; left: 0; top: 10%; background: oklch(49.7% 0.228 288); animation: zs-orb1 14s ease-in-out infinite alternate; }
.zs-cta-glow i:nth-child(2) { width: 34%; aspect-ratio: 1; right: 5%; bottom: 0; background: oklch(77% 0.113 296 / 0.55); animation: zs-orb2 17s ease-in-out infinite alternate; }
.zs-cta-glow i:nth-child(3) { width: 26%; aspect-ratio: 1; left: 45%; top: -5%; background: oklch(58% 0.2 320 / 0.5); animation: zs-orb3 12s ease-in-out infinite alternate; }
@keyframes zs-orb1 { to { transform: translate(30%, 20%) scale(1.15); } }
@keyframes zs-orb2 { to { transform: translate(-40%, -30%) scale(0.9); } }
@keyframes zs-orb3 { to { transform: translate(-30%, 50%) scale(1.25); } }
.zs-cta::after { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(oklch(100% 0 0 / 0.12) 1px, transparent 1px); background-size: 22px 22px; -webkit-mask-image: linear-gradient(90deg, transparent, #000 60%); mask-image: linear-gradient(90deg, transparent, #000 60%); }
.zs-cta h2 { font-size: clamp(2.2rem, 3vw + 1rem, 4rem); line-height: 1.02; letter-spacing: -0.04em; font-weight: 600; }
.zs-cta h2 em { font-style: normal; background: linear-gradient(90deg, var(--lila), oklch(88% 0.08 320)); -webkit-background-clip: text; background-clip: text; color: transparent; }
.zs-cta > div > p { color: oklch(84% 0.02 293); font-size: 1.1rem; margin-top: 1rem; max-width: 34rem; }
.zs-cta-dom { display: flex; gap: 0.4rem; margin-top: 1.75rem; padding: 0.4rem; border-radius: 14px; background: var(--white); max-width: 30rem; }
.zs-cta-dom input { flex: 1; min-width: 0; border: 0; outline: 0; background: transparent; padding: 0 0.9rem; font: 500 1rem/1 var(--font-text); color: var(--hc-ink); }
.zs-cta-dom button { height: 46px; padding: 0 1.1rem; border: 0; border-radius: 10px; background: var(--hc-ink); color: var(--white); font-weight: 600; cursor: pointer; }
.zs-cta-acts { display: grid; gap: 0.85rem; }
.zs-act { position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 1rem; padding: 1.2rem 1.25rem; border-radius: 18px; background: oklch(100% 0 0 / 0.06); border: 1px solid oklch(100% 0 0 / 0.12); color: var(--white); text-decoration: none; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); transition: transform 0.45s var(--ease), background 0.3s, border-color 0.3s; }
.zs-act:hover { transform: translateX(6px); background: oklch(100% 0 0 / 0.1); border-color: var(--lila); color: var(--white); }
.zs-act .ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--lila); color: var(--hc-ink); }
.zs-act .ic svg { width: 22px; height: 22px; }
.zs-act b { display: block; font: 600 1.08rem/1.2 var(--font-display); }
.zs-act small { display: block; color: oklch(80% 0.02 293); font-size: 0.88rem; margin-top: 0.2rem; }
.zs-act .go { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: oklch(100% 0 0 / 0.1); transition: background 0.3s, color 0.3s; }
.zs-act:hover .go { background: var(--white); color: var(--hc-ink); }
@media (max-width: 900px) { .zs-cta { grid-template-columns: minmax(0, 1fr); } }

/* ---------- Otros servicios ---------- */
.zs-more { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 1rem; }
.zs-more a { position: relative; display: flex; flex-direction: column; min-height: 17rem; border-radius: 22px; overflow: hidden; text-decoration: none; color: var(--hc-ink); background: var(--card); border: 1px solid var(--line); transition: transform 0.45s var(--ease), box-shadow 0.45s; }
.zs-more a:hover { transform: translateY(-5px); box-shadow: var(--shadow); }
.zs-more .art { height: 8.5rem; display: grid; place-items: center; position: relative; overflow: hidden; }
.zs-more .art svg { width: 58px; height: 58px; color: var(--white); filter: drop-shadow(0 10px 20px oklch(0% 0 0 / 0.25)); transition: transform 0.6s var(--ease); }
.zs-more a:hover .art svg { transform: scale(1.12) rotate(-4deg); }
.zs-more .art::before { content: ""; position: absolute; width: 140%; aspect-ratio: 1; border-radius: 50%; border: 1px solid oklch(100% 0 0 / 0.25); box-shadow: 0 0 0 28px oklch(100% 0 0 / 0.06), 0 0 0 56px oklch(100% 0 0 / 0.04); top: 55%; }
.zs-more .bd { padding: 1.2rem 1.25rem 1.3rem; display: flex; flex-direction: column; flex: 1; }
.zs-more b { font: 600 1.12rem/1.2 var(--font-display); color: var(--text); }
.zs-more small { color: var(--text-2); font-size: 0.92rem; margin-top: 0.35rem; }
.zs-more .pr { margin-top: auto; padding-top: 1rem; display: flex; align-items: center; justify-content: space-between; font-weight: 600; color: var(--violet); font-size: 0.92rem; }
.zs-more .pr::after { content: "→"; width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; background: var(--accent-soft); transition: background 0.3s, color 0.3s, transform 0.3s var(--ease); }
.zs-more a:hover .pr::after { background: var(--violet); color: var(--white); transform: translateX(3px); }
@media (max-width: 1000px) { .zs-more { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) {
  .zs-more { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: 0.85rem; margin-inline: calc(-1 * var(--gutter)); padding: 0.25rem var(--gutter) 1rem; scrollbar-width: none; }
  .zs-more::-webkit-scrollbar { display: none; }
  .zs-more a { flex: 0 0 78%; scroll-snap-align: start; min-height: 16rem; }
}

/* ---------- Preguntas: «ver más» ---------- */
.hc-faq [data-faq-extra][hidden] { display: none; }
.zs-faq-more { display: flex; justify-content: center; margin-top: 1.25rem; }
.zs-faq-more button { min-height: 46px; padding: 0 1.4rem; border-radius: 12px; border: 1.5px solid var(--line-2); background: var(--card); font-weight: 600; color: var(--text); cursor: pointer; transition: border-color 0.25s; }
.zs-faq-more button:hover { border-color: var(--violet); color: var(--violet); }

/* ---------- Pestañas de «Compara los planes» ---------- */
.types { grid-template-columns: repeat(var(--n, 3), minmax(0, 1fr)); }
@media (max-width: 760px) {
  .types { display: flex; gap: 0.4rem; overflow-x: auto; scroll-snap-type: x mandatory; border: 0; border-radius: 0; background: transparent; padding: 0 var(--gutter) 0.85rem; margin-inline: calc(-1 * var(--gutter)); scrollbar-width: none; }
  .types::-webkit-scrollbar { display: none; }
  .types button { flex: none; scroll-snap-align: start; border: 1.5px solid var(--line-2) !important; border-radius: 999px; padding: 0.75rem 1.1rem; background: var(--card); }
  .types button b { font-size: 0.98rem; white-space: nowrap; }
  .types button span { display: none; }
  .types button[aria-selected="true"] { border-color: var(--hc-ink) !important; }
  .types + [data-panel-group] .plans-dark { border-radius: var(--hc-r); }
  .zs-types-hint { display: flex !important; }
}
.zs-types-hint { display: none; align-items: center; gap: 0.4rem; justify-content: center; font-size: 0.85rem; color: var(--text-3); margin: -0.2rem 0 0.9rem; }
.zs-types-hint::after { content: "→"; animation: zs-nudge 1.6s ease-in-out infinite; }
@keyframes zs-nudge { 50% { transform: translateX(5px); } }
.zs-types-desc { text-align: center; color: var(--text-2); margin: 0 auto 1rem; max-width: 40rem; display: none; }
@media (max-width: 760px) { .zs-types-desc { display: block; } }

/* =================================================================
   Maquetas animadas (zv-). Todas miden lo mismo y se dibujan con CSS.
   ================================================================= */
.zv { width: min(100%, 25rem); border-radius: 18px; background: var(--white); color: var(--hc-ink); box-shadow: 0 40px 80px -30px oklch(10% 0.05 290 / 0.6), 0 0 0 1px oklch(100% 0 0 / 0.5); font-size: 0.85rem; overflow: hidden; }
.zv-dark { background: oklch(17% 0.03 292); color: var(--white); box-shadow: 0 40px 80px -30px oklch(0% 0 0 / 0.8), 0 0 0 1px oklch(100% 0 0 / 0.1); }
.zv-bar { display: flex; align-items: center; gap: 6px; padding: 0.7rem 0.9rem; border-bottom: 1px solid oklch(18% 0.012 285 / 0.08); font-weight: 600; font-size: 0.78rem; color: oklch(45% 0.02 293); }
.zv-dark .zv-bar { border-color: oklch(100% 0 0 / 0.08); color: oklch(78% 0.02 293); }
.zv-bar i { width: 9px; height: 9px; border-radius: 50%; background: oklch(85% 0.02 293); }
.zv-bar i:nth-child(1) { background: oklch(70% 0.17 25); } .zv-bar i:nth-child(2) { background: oklch(82% 0.15 85); } .zv-bar i:nth-child(3) { background: oklch(75% 0.15 150); }
.zv-bar span { margin-left: 0.5rem; }
.zv-bar em { margin-left: auto; font-style: normal; padding: 0.15rem 0.5rem; border-radius: 6px; background: var(--lila); color: var(--hc-ink); font-size: 0.68rem; }
.zv-bd { padding: 1rem 1.1rem 1.15rem; }
.zv-k { font: 600 0.66rem/1 var(--font-text); letter-spacing: 0.1em; text-transform: uppercase; color: oklch(55% 0.02 293); }
.zv-dark .zv-k { color: oklch(72% 0.02 293); }
.zv-float { position: absolute; z-index: 2; padding: 0.6rem 0.85rem; border-radius: 12px; background: var(--white); color: var(--hc-ink); font-weight: 600; font-size: 0.8rem; box-shadow: 0 20px 40px -18px oklch(10% 0.05 290 / 0.6); display: flex; align-items: center; gap: 0.5rem; animation: zv-bob 5s ease-in-out infinite alternate; }
.zv-float.b { animation-delay: -2.5s; }
.zv-float i { width: 22px; height: 22px; border-radius: 7px; display: grid; place-items: center; background: var(--violet); color: var(--white); font-style: normal; font-size: 0.7rem; }
@keyframes zv-bob { to { transform: translateY(-10px); } }
.zv-wrap { position: relative; width: min(100%, 25rem); }
.zv-wrap .zv-float.tl { left: -1.75rem; top: 42%; }
.zv-wrap .zv-float.br { right: -1.25rem; bottom: -1rem; }
@media (max-width: 520px) { .zv-wrap .zv-float.tl { left: -0.25rem; } .zv-wrap .zv-float.br { right: -0.25rem; } }

/* Velocidad: medidor + carga */
.zv-gauge { position: relative; width: 170px; height: 96px; margin: 0.4rem auto 0; }
.zv-gauge svg { width: 100%; height: 100%; overflow: visible; }
.zv-gauge .tr { fill: none; stroke: oklch(18% 0.012 285 / 0.08); stroke-width: 14; stroke-linecap: round; }
.zv-gauge .fg { fill: none; stroke: url(#zvG); stroke-width: 14; stroke-linecap: round; stroke-dasharray: 236; stroke-dashoffset: 236; transition: stroke-dashoffset 1.8s var(--ease) 0.2s; }
.is-vis .zv-gauge .fg, .is-on .zv-gauge .fg { stroke-dashoffset: 12; }
.zv-gauge b { position: absolute; left: 0; right: 0; bottom: -2px; text-align: center; font: 700 2rem/1 var(--font-display); letter-spacing: -0.03em; }
.zv-gauge small { position: absolute; left: 0; right: 0; bottom: -20px; text-align: center; font-size: 0.7rem; color: oklch(55% 0.02 293); }
.zv-water { display: grid; gap: 7px; margin-top: 2rem; }
.zv-water div { display: grid; grid-template-columns: 4.5rem 1fr; align-items: center; gap: 0.6rem; font-size: 0.72rem; color: oklch(50% 0.02 293); }
.zv-water span { position: relative; height: 10px; border-radius: 4px; background: oklch(18% 0.012 285 / 0.06); overflow: hidden; }
.zv-water span::after { content: ""; position: absolute; top: 0; bottom: 0; left: var(--s, 0%); width: var(--w, 20%); border-radius: 4px; background: linear-gradient(90deg, var(--violet), var(--lila)); transform: scaleX(0); transform-origin: left; transition: transform 0.7s var(--ease); }
.is-vis .zv-water span::after, .is-on .zv-water span::after { transform: scaleX(1); }
.zv-water div:nth-child(2) span::after { transition-delay: 0.25s; } .zv-water div:nth-child(3) span::after { transition-delay: 0.45s; } .zv-water div:nth-child(4) span::after { transition-delay: 0.65s; }

/* Seguridad: registro del firewall */
.zv-log { display: grid; gap: 6px; font: 500 0.74rem/1.3 ui-monospace, SFMono-Regular, Menlo, monospace; height: 11.5rem; overflow: hidden; -webkit-mask-image: linear-gradient(transparent, #000 25%); mask-image: linear-gradient(transparent, #000 25%); }
.zv-log-in { display: grid; gap: 6px; animation: zv-scroll 12s linear infinite; }
.zv-log p { margin: 0; display: flex; align-items: center; gap: 0.5rem; padding: 0.45rem 0.6rem; border-radius: 8px; background: oklch(100% 0 0 / 0.05); }
.zv-log p em { margin-left: auto; font-style: normal; font-size: 0.64rem; padding: 0.15rem 0.45rem; border-radius: 5px; background: oklch(60% 0.2 25 / 0.2); color: oklch(78% 0.13 25); font-family: var(--font-text); font-weight: 700; }
.zv-log p em.ok { background: oklch(70% 0.15 155 / 0.2); color: oklch(82% 0.13 155); }
@keyframes zv-scroll { to { transform: translateY(-50%); } }
.zv-shield { display: flex; align-items: center; gap: 0.85rem; margin-bottom: 0.9rem; }
.zv-shield .s { position: relative; width: 46px; height: 46px; border-radius: 14px; display: grid; place-items: center; background: var(--violet); color: var(--white); }
.zv-shield .s::after { content: ""; position: absolute; inset: -4px; border-radius: 17px; border: 2px solid var(--lila); animation: zv-ping 2.2s ease-out infinite; }
@keyframes zv-ping { from { opacity: 0.9; transform: scale(0.9); } to { opacity: 0; transform: scale(1.35); } }
.zv-shield b { display: block; font-size: 0.98rem; }
.zv-shield small { color: oklch(72% 0.02 293); }

/* Copias de seguridad: calendario de días */
.zv-days { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; margin-top: 0.85rem; }
.zv-days i { aspect-ratio: 1; border-radius: 7px; background: oklch(18% 0.012 285 / 0.06); position: relative; }
.zv-days i::after { content: ""; position: absolute; inset: 0; border-radius: 7px; background: var(--violet) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 12.5l4 4 8-9'/%3E%3C/svg%3E") center/60% no-repeat; transform: scale(0); transition: transform 0.45s var(--spring, var(--ease)); }
.is-vis .zv-days i::after, .is-on .zv-days i::after { transform: scale(1); }
.zv-days i:nth-child(n+8)::after { transition-delay: 0.3s; } .zv-days i:nth-child(n+15)::after { transition-delay: 0.6s; } .zv-days i:nth-child(n+22)::after { transition-delay: 0.9s; }
.zv-days i.hoy { box-shadow: 0 0 0 2px var(--lila); }
.zv-restore { display: flex; align-items: center; justify-content: space-between; margin-top: 0.9rem; padding: 0.6rem 0.75rem; border-radius: 10px; background: oklch(96.8% 0.010 299); font-weight: 600; }
.zv-restore span { padding: 0.3rem 0.6rem; border-radius: 7px; background: var(--hc-ink); color: var(--white); font-size: 0.72rem; }

/* Lista de sitios (WP Toolkit) y filas genéricas */
.zv-row { display: flex; align-items: center; gap: 0.7rem; padding: 0.65rem 0; border-bottom: 1px solid oklch(18% 0.012 285 / 0.07); }
.zv-dark .zv-row { border-color: oklch(100% 0 0 / 0.08); }
.zv-row:last-child { border-bottom: 0; }
.zv-row .av { width: 32px; height: 32px; border-radius: 9px; display: grid; place-items: center; background: oklch(94% 0.035 293); color: var(--violet); font-weight: 700; flex: none; font-size: 0.8rem; }
.zv-dark .zv-row .av { background: oklch(100% 0 0 / 0.08); color: var(--lila); }
.zv-row b { display: block; font-size: 0.86rem; }
.zv-row small { display: block; color: oklch(55% 0.02 293); font-size: 0.72rem; }
.zv-row .st { margin-left: auto; font-size: 0.7rem; font-weight: 700; padding: 0.2rem 0.5rem; border-radius: 6px; background: oklch(95% 0.05 155); color: oklch(42% 0.13 155); white-space: nowrap; }
.zv-row .st.up { background: oklch(94% 0.035 293); color: var(--violet); }
.zv-tg { margin-left: auto; width: 34px; height: 20px; border-radius: 99px; background: oklch(85% 0.02 293); position: relative; flex: none; transition: background 0.4s; }
.zv-tg::after { content: ""; position: absolute; left: 3px; top: 3px; width: 14px; height: 14px; border-radius: 50%; background: var(--white); transition: transform 0.4s var(--ease); }
.is-vis .zv-tg, .is-on .zv-tg { background: var(--violet); }
.is-vis .zv-tg::after, .is-on .zv-tg::after { transform: translateX(14px); }
.zv-row:nth-child(2) .zv-tg, .zv-row:nth-child(2) .zv-tg::after { transition-delay: 0.3s; }
.zv-row:nth-child(3) .zv-tg, .zv-row:nth-child(3) .zv-tg::after { transition-delay: 0.6s; }

/* Constructor visual (Elementor) */
.zv-build { display: grid; grid-template-columns: 4.5rem 1fr; min-height: 14rem; }
.zv-build aside { background: oklch(96.8% 0.010 299); padding: 0.6rem; display: grid; gap: 6px; align-content: start; }
.zv-build aside i { height: 30px; border-radius: 7px; background: var(--white); border: 1px solid oklch(18% 0.012 285 / 0.08); }
.zv-build .cv { position: relative; padding: 0.75rem; display: grid; gap: 8px; align-content: start; }
.zv-build .cv i { display: block; border-radius: 8px; background: oklch(18% 0.012 285 / 0.06); }
.zv-build .cv i.h { height: 54px; background: linear-gradient(120deg, oklch(70% 0.14 290), oklch(55% 0.2 288)); }
.zv-build .cv i.l { height: 10px; width: 80%; } .zv-build .cv i.l2 { height: 10px; width: 55%; }
.zv-build .cv i.g { height: 44px; display: grid; }
.zv-build .drag { position: absolute; left: -2.6rem; top: 7.2rem; width: 5rem; height: 30px; border-radius: 7px; background: var(--white); border: 2px solid var(--violet); box-shadow: 0 12px 24px -10px oklch(30% 0.15 290 / 0.6); animation: zv-drag 4.5s var(--ease) infinite; }
.zv-build .drag::after { content: ""; position: absolute; right: -10px; bottom: -14px; width: 16px; height: 16px; background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M5 3l14 8-6 2-3 6Z' fill='%23111116' stroke='white' stroke-width='1.5'/%3E%3C/svg%3E") center/contain no-repeat; }
@keyframes zv-drag { 0%, 15% { transform: translate(0, 0); opacity: 0; } 25% { opacity: 1; } 60%, 80% { transform: translate(5.5rem, 1.8rem); opacity: 1; } 95%, 100% { transform: translate(5.5rem, 1.8rem); opacity: 0; } }

/* Tienda: pedido aprobado */
.zv-cart .it { display: flex; align-items: center; gap: 0.7rem; padding: 0.55rem 0; border-bottom: 1px dashed oklch(18% 0.012 285 / 0.12); }
.zv-cart .it i { width: 38px; height: 38px; border-radius: 9px; background: linear-gradient(135deg, oklch(86% 0.07 320), oklch(62% 0.16 296)); flex: none; }
.zv-cart .it:nth-child(2) i { background: linear-gradient(135deg, oklch(88% 0.06 200), oklch(62% 0.12 250)); }
.zv-cart .it b { font-size: 0.85rem; }
.zv-cart .it span { margin-left: auto; font-weight: 700; }
.zv-cart .tot { display: flex; justify-content: space-between; margin-top: 0.7rem; font-weight: 700; font-size: 1rem; }
.zv-cart .pay { position: relative; margin-top: 0.8rem; height: 40px; border-radius: 10px; background: var(--hc-ink); color: var(--white); display: grid; place-items: center; font-weight: 600; overflow: hidden; }
.zv-cart .pay::after { content: "✓  Pago aprobado"; position: absolute; inset: 0; display: grid; place-items: center; background: oklch(58% 0.14 155); transform: translateY(100%); animation: zv-paid 5s var(--ease) infinite; }
@keyframes zv-paid { 0%, 40% { transform: translateY(100%); } 50%, 85% { transform: none; } 95%, 100% { transform: translateY(-100%); } }

/* Correo: bandeja */
.zv-mail .zv-row { animation: zv-in 0.6s var(--ease) both; }
.zv-mail .zv-row.nuevo { background: oklch(96.8% 0.010 299); margin-inline: -1.1rem; padding-inline: 1.1rem; animation: zv-new 6s var(--ease) infinite; }
@keyframes zv-in { from { opacity: 0; transform: translateY(8px); } }
@keyframes zv-new { 0%, 10% { opacity: 0; transform: translateY(-10px); max-height: 0; } 20%, 100% { opacity: 1; transform: none; max-height: 4rem; } }

/* Terminal / migración */
.zv-term { font: 500 0.76rem/1.6 ui-monospace, SFMono-Regular, Menlo, monospace; }
.zv-term p { margin: 0; white-space: nowrap; overflow: hidden; width: 0; animation: zv-type 0.9s steps(30, end) forwards; }
.zv-term p:nth-child(2) { animation-delay: 1s; } .zv-term p:nth-child(3) { animation-delay: 2s; } .zv-term p:nth-child(4) { animation-delay: 3s; } .zv-term p:nth-child(5) { animation-delay: 4s; }
.zv-term .ok { color: oklch(80% 0.14 155); } .zv-term .lila { color: var(--lila); } .zv-term .dim { color: oklch(65% 0.02 293); }
@keyframes zv-type { to { width: 100%; } }
.zv-mig { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 0.5rem; margin-bottom: 1rem; }
.zv-mig .srv { text-align: center; padding: 0.7rem 0.5rem; border-radius: 12px; background: oklch(100% 0 0 / 0.06); font-size: 0.72rem; color: oklch(78% 0.02 293); }
.zv-mig .srv b { display: block; color: var(--white); font-size: 0.82rem; }
.zv-mig .srv.nw { background: var(--violet); color: oklch(92% 0.03 293); }
.zv-mig .pipe { position: relative; width: 4.5rem; height: 4px; border-radius: 4px; background: oklch(100% 0 0 / 0.1); overflow: hidden; }
.zv-mig .pipe::after { content: ""; position: absolute; top: 0; left: -40%; width: 40%; height: 100%; border-radius: 4px; background: var(--lila); animation: zv-pipe 1.4s linear infinite; }
@keyframes zv-pipe { to { left: 100%; } }

/* Panel de cliente: tasa y medios de pago */
.zv-rate { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: 0.9rem 1rem; border-radius: 12px; background: oklch(96.8% 0.010 299); margin-top: 0.8rem; }
.zv-rate b { font: 700 1.35rem/1 var(--font-display); }
.zv-rate small { display: block; color: oklch(55% 0.02 293); font-size: 0.72rem; margin-top: 0.25rem; }
.zv-chip { display: inline-flex; align-items: center; gap: 0.35rem; padding: 0.4rem 0.6rem; border-radius: 8px; border: 1px solid oklch(18% 0.012 285 / 0.1); font-weight: 600; font-size: 0.76rem; margin: 0.6rem 0.3rem 0 0; }
.zv-chip.on { border-color: var(--violet); background: oklch(94% 0.035 293); color: var(--violet); }

/* Chat de soporte */
.zv-chat { display: grid; gap: 0.6rem; }
.zv-msg { max-width: 82%; padding: 0.6rem 0.8rem; border-radius: 14px 14px 14px 4px; background: oklch(96.8% 0.010 299); font-size: 0.82rem; opacity: 0; transform: translateY(8px); transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); }
.zv-msg.yo { justify-self: end; border-radius: 14px 14px 4px 14px; background: var(--violet); color: var(--white); }
.is-vis .zv-msg, .is-on .zv-msg { opacity: 1; transform: none; }
.zv-msg:nth-child(2) { transition-delay: 0.7s; } .zv-msg:nth-child(3) { transition-delay: 1.4s; } .zv-msg:nth-child(4) { transition-delay: 2.1s; }
.zv-typing { display: inline-flex; gap: 3px; } .zv-typing i { width: 5px; height: 5px; border-radius: 50%; background: oklch(55% 0.02 293); animation: zv-dot 1s infinite; } .zv-typing i:nth-child(2) { animation-delay: 0.15s; } .zv-typing i:nth-child(3) { animation-delay: 0.3s; }
@keyframes zv-dot { 50% { opacity: 0.3; transform: translateY(-2px); } }

/* Dominio: búsqueda que escribe sola */
.zv-dom { display: flex; align-items: center; gap: 0.5rem; padding: 0.5rem 0.5rem 0.5rem 0.9rem; border-radius: 12px; border: 1.5px solid var(--violet); box-shadow: 0 0 0 4px oklch(94% 0.035 293); font-weight: 600; }
.zv-dom span { flex: 1; }
.zv-dom span::after { content: "|"; color: var(--violet); animation: zv-dot 1s steps(1) infinite; }
.zv-dom em { font-style: normal; padding: 0.4rem 0.7rem; border-radius: 8px; background: var(--hc-ink); color: var(--white); font-size: 0.75rem; }

/* Sin movimiento si la persona lo pidió */
@media (prefers-reduced-motion: reduce) {
  .zs-marquee-track, .zs-cta-glow i, .zv-float, .zv-log-in, .zv-build .drag, .zv-cart .pay::after, .zv-mail .zv-row, .zv-mig .pipe::after, .zv-shield .s::after, .zs-types-hint::after { animation: none !important; }
  .zv-term p { animation: none; width: auto; }
  .zs-show-item[aria-selected="true"]::after { animation: none; height: calc(100% - 2.2rem); }
  .zv-gauge .fg, .zv-water span::after, .zv-days i::after, .zv-tg, .zv-tg::after, .zv-msg, .zs-flow::after, .zs-flow-step .ic { transition: none !important; }
}

/* Modo oscuro del sitio */
:root[data-theme="dark"] .zs-app, :root[data-theme="dark"] .zs-card:not(.ink), :root[data-theme="dark"] .zs-vs-card, :root[data-theme="dark"] .zs-more a { background: var(--card); }

/* Ajustes: el color de enlaces del tema no debe pintar las tarjetas */
body.iz .zs-act, body.iz .zs-act:hover, body.iz .zs-act b { color: var(--white); }
body.iz .zs-more a, body.iz .zs-more a:hover { color: var(--hc-ink); }
body.iz .zs-more a b { color: var(--text); }
.zv-rate .zv-k { display: block; margin-bottom: 0.35rem; }

/* ---------- Páginas de servicio ---------- */
.zs-srv-hero .wrap { max-width: 84rem; }
.zs-srv-top { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); gap: clamp(2rem, 5vw, 4.5rem); align-items: center; }
.zs-srv-hero h1 { font-size: clamp(2.3rem, 3.2vw + 1rem, 4.1rem); text-align: left; max-width: 16ch; }
.zs-srv-hero .iz-srv-pts { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 18px; }
.zs-srv-vis { position: relative; min-height: 24rem; display: grid; place-items: center; border-radius: 26px; padding: clamp(1.25rem, 3vw, 2.5rem); background: radial-gradient(90% 80% at 80% 10%, oklch(62% 0.18 292 / 0.9), transparent 65%), radial-gradient(70% 70% at 10% 100%, oklch(45% 0.2 286 / 0.8), transparent 60%), oklch(100% 0 0 / 0.04); border: 1px solid oklch(100% 0 0 / 0.1); }
@media (max-width: 960px) { .zs-srv-top { grid-template-columns: minmax(0, 1fr); } .zs-srv-vis { min-height: 20rem; } }
@media (max-width: 560px) { .zs-srv-hero .iz-srv-pts { grid-template-columns: minmax(0, 1fr); } }
.zs-trust { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.6rem 1.4rem; margin-top: 1.4rem; }
.zs-trust span { display: inline-flex; align-items: center; gap: 0.5rem; font-weight: 600; font-size: 0.92rem; color: var(--text); }
.zs-trust i { width: 22px; height: 22px; border-radius: 50%; display: grid; place-items: center; font-style: normal; font-size: 0.7rem; background: var(--hc-ink); color: var(--lila); }
.zs-dev { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 2rem; align-items: center; padding: clamp(1.75rem, 4vw, 3rem); border-radius: 24px; background: linear-gradient(120deg, var(--accent-soft), var(--card) 70%); border: 1px solid var(--line); }
.zs-dev h2 { font-size: clamp(1.6rem, 1.4vw + 1.1rem, 2.4rem); letter-spacing: -0.03em; margin-top: 0.9rem; font-weight: 600; }
.zs-dev p { color: var(--text-2); margin-top: 0.6rem; max-width: 44rem; }
@media (max-width: 760px) { .zs-dev { grid-template-columns: minmax(0, 1fr); } }
.zv-btn { margin-top: 0.8rem; height: 40px; border-radius: 10px; background: var(--violet); color: var(--white); display: grid; place-items: center; font-weight: 600; }
.zv-mail .zv-row.nuevo { margin-inline: -1.1rem; }

/* Pasos verticales con icono (transferencia de dominio) */
.zs-steps-v { display: grid; gap: 0.75rem; }
.zs-steps-v > * { display: grid; grid-template-columns: auto 1fr; gap: 1rem; align-items: center; padding: 1.1rem 1.2rem; border-radius: 18px; background: oklch(100% 0 0 / 0.05); border: 1px solid oklch(100% 0 0 / 0.1); transition: transform 0.45s var(--ease), border-color 0.3s; }
.zs-steps-v > *:hover { transform: translateX(6px); border-color: var(--lila); }
.zs-steps-v .ic { width: 46px; height: 46px; border-radius: 13px; display: grid; place-items: center; background: var(--lila); color: var(--hc-ink); }
.zs-steps-v .ic svg { width: 22px; height: 22px; }
.zs-steps-v p { margin: 0; color: oklch(80% 0.02 293); font-size: 0.93rem; }
.zs-steps-v b { display: block; color: var(--white); font: 600 1.05rem/1.25 var(--font-display); margin-bottom: 0.15rem; }
.zs-cta > div, .zs-alt > *, .zs-show > *, .zs-srv-top > * { min-width: 0; }
@media (max-width: 520px) {
  .zv-wrap .zv-float.tl { top: -14px; left: 12px; }
  .zv-wrap .zv-float.br { bottom: -14px; right: 12px; }
  .zs-cta h2 { font-size: 2rem; }
  .zs-act { grid-template-columns: auto 1fr; }
  .zs-act .go { display: none; }
}

/* El cierre viejo (.hc-end) sin el logo de fondo: luz que se mueve, como el cierre nuevo */
.hc-end { background: var(--hc-ink); }
.hc-end::after { background: radial-gradient(closest-side, oklch(49.7% 0.228 288 / 0.75), transparent) !important; opacity: 1 !important; width: 70% !important; aspect-ratio: 1.6 !important; bottom: -60% !important; animation: zs-orb2 14s ease-in-out infinite alternate; }
.hc-end::before { content: ""; position: absolute; inset: 0; z-index: -1; background-image: radial-gradient(oklch(100% 0 0 / 0.1) 1px, transparent 1px); background-size: 22px 22px; }

/* ---------- v4.7 · Cierre: la tarjeta queda montada entre la última sección y el pie ---------- */
.zs-cta-sec { --prev: var(--bg, #fff); background: linear-gradient(180deg, var(--prev) 0 50%, var(--hc-ink) 50%); padding-block: 0 !important; }
.hc-sec.paper + .zs-cta-sec { --prev: var(--hc-paper); }
.hc-sec.ink + .zs-cta-sec { --prev: var(--hc-ink); }
.hc-sec.ink + .zs-cta-sec .zs-cta { box-shadow: inset 0 0 0 1px oklch(100% 0 0 / 0.1); }
.zs-cta-sec .zs-cta { box-shadow: 0 40px 80px -40px oklch(0% 0 0 / 0.55), inset 0 0 0 1px oklch(100% 0 0 / 0.08); }

/* ---------- v4.7 · Línea de pasos: de icono a icono ---------- */
.zs-flow::before { left: calc(12.5% - 0.375rem); right: calc(12.5% - 0.375rem); }
.zs-flow::after { left: calc(12.5% - 0.375rem); }
.zs-flow.is-vis::after { width: calc(75% + 0.75rem); }
@media (max-width: 860px) {
  .zs-flow::before, .zs-flow::after { left: 33px; right: auto; top: 34px; bottom: 34px; }
  .zs-flow.is-vis::after { width: 2px; height: calc(100% - 68px); }
}

/* ---------- v4.7 · Pestañas de planes pegadas al panel ---------- */
@media (min-width: 761px) {
  .types + .zs-types-desc + [data-panel-group] .plans-dark, .types + [data-panel-group] .plans-dark { border-top-left-radius: 0; border-top-right-radius: 0; }
  .types { margin-bottom: 0 !important; }
  .types + .zs-types-desc { display: none; }
}

/* ---------- v4.7 · Métodos de pago sin desbordes ---------- */
.zs-pay-grid { grid-template-columns: repeat(auto-fit, minmax(min(11.5rem, 100%), 1fr)); }
.zs-pay { min-width: 0; }
.zs-pay > span, .zs-pay > div { min-width: 0; line-height: 1.2; }

/* ---------- v4.7 · Luz que sigue al mouse en más bloques ---------- */
.zs-pay, .zs-steps-v > *, .zs-more a, .zs-vs-card, .zs-cta-acts a, .zs-flow-step, .zs-trust > *, .zs-dev { position: relative; isolation: isolate; overflow: hidden; }
.zs-flow-step { overflow: visible; }
.zs-pay::before, .zs-steps-v > *::before, .zs-more a::before, .zs-vs-card::before, .zs-cta-acts a::before, .zs-trust > *::before, .zs-dev::before { content: ""; position: absolute; inset: 0; z-index: -1; opacity: 0; pointer-events: none; background: radial-gradient(220px circle at var(--mx, 50%) var(--my, 0%), oklch(77% 0.113 296 / 0.24), transparent 70%); transition: opacity 0.3s; }
.zs-pay:hover::before, .zs-steps-v > *:hover::before, .zs-more a:hover::before, .zs-vs-card:hover::before, .zs-cta-acts a:hover::before, .zs-trust > *:hover::before, .zs-dev:hover::before { opacity: 1; }
.zs-vs-card { transition: transform 0.45s var(--ease), border-color 0.3s, box-shadow 0.45s; }
.zs-vs-card:hover { transform: translateY(-4px); border-color: oklch(77% 0.113 296 / 0.6); box-shadow: var(--shadow); }
.hc-faq details { transition: background 0.3s; border-radius: 12px; }
.hc-faq summary { transition: color 0.2s, padding 0.3s var(--ease); }
.hc-faq summary:hover { color: var(--violet); }

/* ---------- v4.7 · Bloque de transferencia de dominios ---------- */
.zs-transfer { align-items: start; }
.zs-transfer .zs-cta-dom { margin-top: 1.75rem; box-shadow: 0 20px 50px -25px oklch(0% 0 0 / 0.7); }
.zs-transfer .zs-cta-dom button { background: var(--violet); }
.zs-transfer-note { display: flex; gap: 0.6rem; align-items: center; margin-top: 1rem; font-size: 0.88rem; color: oklch(80% 0.02 293); }
.zs-transfer-note svg { width: 18px; height: 18px; color: var(--lila); flex: none; }
.zs-transfer .zs-steps-v { position: relative; }
.zs-transfer .zs-steps-v::before { content: ""; position: absolute; left: calc(1.2rem + 22px); top: 2rem; bottom: 2rem; width: 2px; background: linear-gradient(180deg, var(--lila), oklch(77% 0.113 296 / 0.1)); z-index: 0; }
.zs-transfer .zs-steps-v > * { z-index: 1; background: oklch(18% 0.03 292); }

/* v4.8 · páginas para Venezuela (iz-landing) */
.hc-sec.paper .iz-tabs, .hc-sec:not(.ink) .iz-tabs { background: var(--card, #fff); border-color: var(--line); }
.hc-sec:not(.ink) .iz-tabs button { color: var(--text-2); }
.hc-sec:not(.ink) .iz-tabs button:hover { color: var(--text); background: oklch(50% 0.1 290 / 0.06); }
.hc-sec:not(.ink) .iz-tabs button[aria-selected="true"] { background: var(--hc-ink); color: var(--white); }
.iz-lp-tabs { text-align: center; margin: -0.5rem 0 2rem; } .iz-lp-tabs .iz-tabs { margin-top: 0; }
.iz-lp-rel { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem 1.75rem; margin-top: clamp(2rem, 4vw, 3rem); }
.iz-lp-tasa { margin-top: 1.75rem; max-width: 24rem; padding: 1.1rem 1.25rem; border-radius: 18px; background: var(--card, #fff); border: 1px solid var(--line); }
.hc-sec.ink .zs-vs-card { color: var(--text); }
.hc-sec.ink .zs-vs-card h3 { color: var(--text); }
.hc-sec.ink .zs-vs-card p { color: var(--text-2); }
.hc-sec.ink .zs-vs-card .zs-checks li { color: var(--text-2); }
.hc-sec.ink .zs-vs-card .zs-checks li b { color: var(--text); }
/* Pasos verticales sobre fondo claro (páginas de Venezuela) */
.hc-sec:not(.ink) .zs-steps-v > * { background: var(--card, #fff); border-color: var(--line); }
.hc-sec:not(.ink) .zs-steps-v p { color: var(--text-2); }
.hc-sec:not(.ink) .zs-steps-v b { color: var(--text); }
.hc-sec:not(.ink) .zs-steps-v .ic { background: oklch(94% 0.03 296); color: var(--violeta, #6437D9); }