/* Intro + Servicios (bento v8 — diseño completo, 12 servicios, todas las ilustraciones) */

/* ===== Bloque Intro ===== */
.zw-intro {
    min-height: 90vh;
    display: flex;
    align-items: center;
    margin-bottom: 0;
}
.zw-intro__inner {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 80px var(--container-padding);
    text-align: center;
}
.zw-intro__title {
    font-size: var(--fs-h2);
    line-height: 1.1;
    font-weight: 700;
    letter-spacing: -.01em;
    color: inherit;
    margin-bottom: 32px;
}
.zw-intro__badge {
    color: #0f0e17;
    font-weight: 700;
    background-color: var(--zander-yellow);
    border-radius: 100px;
    padding: 4px 18px;
    white-space: nowrap;
    display: inline-block;
    line-height: 1.2;
    margin: 4px 0;
}
.zw-intro__text {
    font-size: var(--fs-h3);
    line-height: 1.3;
    color: inherit;
    max-width: 100%;
    margin: 0;
}

/* ===========================================================================
   SECCIÓN SERVICIOS — Bento v8 (diseño "tal cual" + clickable)
   Tokens locales scoped a .zw-servicios. Sin colisiones con resto del sitio.
   =========================================================================== */
.zw-servicios {
    --y: var(--zander-yellow);
    --dark: var(--zander-black);
    --paper: var(--zander-white-soft);
    --paper-soft: rgba(251,251,251,.55);
    --paper-mid: rgba(251,251,251,.75);
    --card-bg: rgba(255,255,255,.05);
    --card-bg-hover: rgba(255,255,255,.09);
    --card-bd: rgba(255,255,255,.10);
    --card-bd-hover: rgba(255,255,255,.20);

    background: var(--dark);
    color: var(--paper);
    padding: 100px 0;
    overflow: hidden;
}
.zw-servicios > .eyebrow,
.zw-servicios > h2.title,
.zw-servicios > .subtitle,
.zw-servicios > .bento-b {
    max-width: var(--container-max);
    margin-left: auto;
    margin-right: auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
    width: 100%;
    box-sizing: border-box;
}
.zw-servicios > .bento-b {
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
}
.zw-servicios .eyebrow {
    color: var(--y);
    text-transform: uppercase;
    letter-spacing: .4em;
    font-size: 12px;
    font-weight: 800;
    margin-bottom: 18px;
    display: inline-block;
}
.zw-servicios h2.title {
    font-weight: 700;
    font-size: var(--fs-h2);
    line-height: 1.1;
    letter-spacing: -.01em;
    color: var(--paper);
    margin: 0 auto 16px;
    text-wrap: balance;
    max-width: 920px;
    text-align: center;
}
.zw-servicios h2.title em {
    color: var(--y);
    font-style: normal;
}
.zw-servicios .subtitle {
    font-size: var(--fs-body);
    color: rgba(251,251,251,.7);
    font-weight: 400;
    margin: 0 auto 56px;
    max-width: 680px;
    text-align: center;
}

/* ============ Shared card ============ */
.zw-servicios .sc {
    background-color: var(--card-bg);
    border: 1px solid var(--card-bd);
    border-radius: 24px;
    padding: 36px 32px;
    display: flex;
    flex-direction: column;
    position: relative;
    overflow: hidden;
    text-decoration: none;
    color: inherit;
    transition: border-color .35s, transform .35s, box-shadow .35s, background-color .35s;
    cursor: pointer;
}
.zw-servicios .sc:hover {
    border-color: var(--card-bd-hover);
    background-color: var(--card-bg-hover);
    transform: translateY(-4px);
    box-shadow: 0 20px 56px rgba(0,0,0,.65);
}
.zw-servicios .sc .ico { width: 80px; height: 80px; margin-bottom: 20px; display: block; flex-shrink: 0; }
.zw-servicios .sc .ico svg { width: 100%; height: 100%; stroke: var(--y); stroke-width: 2; fill: none; display: block; }
.zw-servicios .sc .ico img { width: 100%; height: 100%; display: block; }
.zw-servicios .sc h3 {
    font-size: var(--fs-h3); font-weight: 700; margin: 0 0 10px;
    color: var(--paper); line-height: 1.3; letter-spacing: -.005em;
}
.zw-servicios .sc p {
    font-size: var(--fs-body); color: rgba(251,251,251,.92);
    line-height: 1.5; margin: 0;
}
.zw-servicios .sc h3 { color: #fff; }

/* ============ Bento layout (variant B) ============ */
.zw-servicios .bento-b {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    grid-auto-rows: minmax(200px, auto);
    gap: 20px;
}

/* b-hero — protagonista (Diseño Web) */
.zw-servicios .bento-b .b-hero {
    grid-column: span 7;
    grid-row: span 2;
    padding: 40px;
    background:
        radial-gradient(circle at 100% 0%, rgba(252,198,28,.08), transparent 50%),
        var(--card-bg);
}
.zw-servicios .bento-b .b-hero .ico { width: 80px; height: 80px; }
.zw-servicios .bento-b .b-hero h3 { font-size: var(--fs-h3); letter-spacing: -.01em; margin-bottom: 14px; max-width: 360px; }
.zw-servicios .bento-b .b-hero p { font-size: var(--fs-body); color: rgba(251,251,251,.92); max-width: 360px; margin-bottom: 24px; line-height: 1.5; }
.zw-servicios .bento-b .b-hero .tags { display: flex; flex-wrap: nowrap; gap: 8px; margin-top: auto; }
.zw-servicios .bento-b .b-hero .tag {
    font-size: 16px; font-weight: 600; letter-spacing: .04em;
    padding: 6px 14px; border-radius: 100px;
    background: rgba(252,198,28,.08); color: var(--y);
    border: 1px solid rgba(252,198,28,.25);
}
.zw-servicios .bento-b .b-hero .ico,
.zw-servicios .bento-b .b-hero h3,
.zw-servicios .bento-b .b-hero p,
.zw-servicios .bento-b .b-hero .tags { position: relative; z-index: 2; }
.zw-servicios .bento-b .b-hero .preview {
    position: absolute; right: -30px; bottom: -30px;
    width: 340px; height: 220px; border-radius: 14px;
    background: linear-gradient(135deg, #2a2a26 0%, #1a1a18 100%);
    border: 1px solid rgba(255,255,255,.08);
    transform: rotate(-4deg);
    box-shadow: 0 24px 60px rgba(0,0,0,.5);
    overflow: hidden;
    z-index: 1;
    -webkit-mask-image: linear-gradient(to left, #000 88%, transparent 100%);
            mask-image: linear-gradient(to left, #000 88%, transparent 100%);
}
.zw-servicios .bento-b .b-hero .preview::before {
    content: ""; position: absolute; top: 0; left: 0; right: 0; height: 28px;
    background: rgba(0,0,0,.3); border-bottom: 1px solid rgba(255,255,255,.06);
}
.zw-servicios .bento-b .b-hero .preview::after {
    content: ""; position: absolute; top: 8px; left: 12px;
    width: 8px; height: 8px; border-radius: 50%; background: rgba(252,198,28,.5);
    box-shadow: 14px 0 0 rgba(255,255,255,.15), 28px 0 0 rgba(255,255,255,.15);
}
.zw-servicios .bento-b .b-hero .preview .lines {
    position: absolute; top: 48px; left: 18px; right: 18px;
    display: flex; flex-direction: column; gap: 8px;
}
.zw-servicios .bento-b .b-hero .preview .lines i {
    display: block; height: 8px; border-radius: 4px; background: rgba(255,255,255,.08);
}
.zw-servicios .bento-b .b-hero .preview .lines i:nth-child(1) { width: 60%; background: rgba(252,198,28,.4); }
.zw-servicios .bento-b .b-hero .preview .lines i:nth-child(2) { width: 90%; }
.zw-servicios .bento-b .b-hero .preview .lines i:nth-child(3) { width: 75%; }
.zw-servicios .bento-b .b-hero .preview .lines i:nth-child(4) { width: 85%; }

/* b-medium — secundaria (Apps Web) */
.zw-servicios .bento-b .b-medium {
    grid-column: span 5;
    grid-row: span 2;
    padding: 36px;
    background: linear-gradient(180deg, var(--card-bg) 0%, rgba(252,198,28,.04) 100%);
}
.zw-servicios .bento-b .b-medium .ico { width: 80px; height: 80px; }
.zw-servicios .bento-b .b-medium h3 { font-size: var(--fs-h3); margin-bottom: 12px; }
.zw-servicios .bento-b .b-medium p { font-size: var(--fs-body); color: rgba(251,251,251,.92); margin-bottom: 20px; line-height: 1.5; }
.zw-servicios .bento-b .b-medium .stat {
    margin-top: auto; display: flex; align-items: baseline; gap: 8px;
    padding-top: 20px; border-top: 1px solid var(--card-bd);
}
.zw-servicios .bento-b .b-medium .stat b {
    font-size: 38px; font-weight: 700; color: var(--y);
    letter-spacing: -.02em; line-height: 1;
}
.zw-servicios .bento-b .b-medium .stat span {
    color: var(--paper-soft); font-size: 13px; line-height: 1.3;
}

.zw-servicios .bento-b .b-m { grid-column: span 4; }
.zw-servicios .bento-b .b-tall { min-height: 300px; }
.zw-servicios .bento-b .has-preview { min-height: 280px; }
.zw-servicios .bento-b .has-preview-pro { min-height: 320px; }
.zw-servicios .bento-b .b-tall-pro { min-height: 340px; }

/* Soft illustrations — illu-soft modifier (padding-right grande para no chocar con preview) */
.zw-servicios .bento-b .sc.illu-soft { padding-right: 220px; overflow: hidden; }
.zw-servicios .bento-b .b-medium.illu-soft { padding-right: 200px; }
.zw-servicios .bento-b .b-medium.illu-soft h3,
.zw-servicios .bento-b .b-medium.illu-soft p { max-width: none; }
@media (max-width: 1200px) {
    .zw-servicios .bento-b .sc.illu-soft { padding-right: 180px; }
}
.zw-servicios .bento-b .sc.illu-soft .ico,
.zw-servicios .bento-b .sc.illu-soft h3,
.zw-servicios .bento-b .sc.illu-soft p,
.zw-servicios .bento-b .sc.illu-soft .tags { position: relative; z-index: 3; }

.zw-servicios .bento-b .sc.illu-soft .preview-shop-pro { right: 0; bottom: -10px; }
.zw-servicios .bento-b .sc.illu-soft .preview-auto-pro { right: 24px; bottom: 18px; }
.zw-servicios .bento-b .sc.illu-soft .preview-brand-pro { right: 0; bottom: 0; }
.zw-servicios .bento-b .sc.illu-soft .preview-social-pro { right: 0; bottom: 0; }
.zw-servicios .bento-b .sc.illu-soft .preview-posters-pro { right: 0; bottom: 0; }

.zw-servicios .bento-b .sc.illu-soft [class^="preview-"] {
    opacity: .55; filter: saturate(.95);
    -webkit-mask-image: linear-gradient(to left, #000 65%, rgba(0,0,0,.4) 85%, transparent 100%);
            mask-image: linear-gradient(to left, #000 65%, rgba(0,0,0,.4) 85%, transparent 100%);
    transition: opacity .45s ease, filter .45s ease, transform .55s cubic-bezier(.3,1,.8,1);
    pointer-events: none;
}
.zw-servicios .bento-b .sc.illu-soft:hover [class^="preview-"] { opacity: .82; filter: saturate(1.05); }
.zw-servicios .bento-b .sc.illu-soft:hover .preview-shop-pro { transform: translate(-4px,-2px) rotate(0deg); }
.zw-servicios .bento-b .sc.illu-soft:hover .preview-auto-pro { transform: translate(-2px,0); }
.zw-servicios .bento-b .sc.illu-soft.illu-bottom { padding-bottom: 44px; }
.zw-servicios .bento-b .sc.illu-soft.illu-bottom [class^="preview-"] {
    -webkit-mask-image: radial-gradient(ellipse 140% 110% at 100% 100%, #000 30%, rgba(0,0,0,.5) 60%, transparent 85%);
            mask-image: radial-gradient(ellipse 140% 110% at 100% 100%, #000 30%, rgba(0,0,0,.5) 60%, transparent 85%);
}

/* ===== Tienda Online — preview-shop-pro ===== */
.zw-servicios .bento-b .preview-shop-pro {
    position: absolute; right: -10px; bottom: -30px;
    width: 280px; height: 270px; pointer-events: none;
}
.zw-servicios .bento-b .preview-shop-pro .card-main {
    position: absolute; right: 24px; top: 30px;
    width: 182px; height: 228px;
    background: linear-gradient(180deg, #2a2a26 0%, #1f1f1c 100%);
    border: 1px solid rgba(255,255,255,.10); border-radius: 14px;
    padding: 11px 11px 13px;
    box-shadow: 0 30px 60px rgba(0,0,0,.55);
    transform: rotate(-3deg);
    display: flex; flex-direction: column;
}
.zw-servicios .bento-b .preview-shop-pro .card-main .img {
    width: 100%; height: 96px; border-radius: 9px;
    position: relative; overflow: hidden;
    background:
        radial-gradient(circle at 35% 30%, rgba(252,198,28,.55), transparent 55%),
        linear-gradient(135deg, rgba(252,198,28,.22), rgba(252,198,28,.05));
    border: 1px solid rgba(252,198,28,.18);
}
.zw-servicios .bento-b .preview-shop-pro .card-main .img::before {
    content: ""; position: absolute; right: -14px; bottom: -14px;
    width: 70px; height: 70px; border-radius: 50%;
    background: radial-gradient(circle, rgba(252,198,28,.4), transparent 70%);
}
.zw-servicios .bento-b .preview-shop-pro .card-main .img::after {
    content: ""; position: absolute; left: 50%; top: 50%;
    transform: translate(-50%,-50%);
    width: 34px; height: 34px;
    border: 1.5px solid rgba(252,198,28,.55); border-radius: 50%;
    background: rgba(252,198,28,.15);
}
.zw-servicios .bento-b .preview-shop-pro .card-main .name {
    width: 78%; height: 8px; background: rgba(255,255,255,.55);
    border-radius: 4px; margin-top: 11px;
}
.zw-servicios .bento-b .preview-shop-pro .card-main .row {
    display: flex; align-items: center; justify-content: space-between;
    margin-top: 8px;
}
.zw-servicios .bento-b .preview-shop-pro .card-main .price {
    font-size: 14px; font-weight: 800; color: var(--y);
    letter-spacing: -.02em; line-height: 1;
}
.zw-servicios .bento-b .preview-shop-pro .card-main .stars { display: flex; gap: 2px; }
.zw-servicios .bento-b .preview-shop-pro .card-main .stars i {
    width: 7px; height: 7px; background: var(--y);
    clip-path: polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%);
}
.zw-servicios .bento-b .preview-shop-pro .card-main .stars i:nth-child(5) { background: rgba(252,198,28,.3); }
.zw-servicios .bento-b .preview-shop-pro .card-main .btn {
    margin-top: auto; height: 26px; border-radius: 7px;
    background: var(--y);
    display: flex; align-items: center; justify-content: center; gap: 5px;
    font-size: 9px; font-weight: 900; color: #1D1D1B;
    letter-spacing: .08em; text-transform: uppercase;
}
.zw-servicios .bento-b .preview-shop-pro .card-main .btn::before {
    content: ""; width: 9px; height: 9px; background: #1D1D1B;
    -webkit-mask: radial-gradient(circle at center, transparent 30%, #000 32%);
            mask: radial-gradient(circle at center, transparent 30%, #000 32%);
    border-radius: 50%; flex-shrink: 0;
}
.zw-servicios .bento-b .preview-shop-pro .cart {
    position: absolute; top: 0; left: 14px;
    width: 56px; height: 56px; border-radius: 50%;
    background: linear-gradient(135deg, var(--y) 0%, #f5b800 100%);
    display: grid; place-items: center; z-index: 3;
    box-shadow: 0 12px 28px rgba(252,198,28,.4), 0 0 0 4px rgba(252,198,28,.12);
    transform: rotate(-10deg);
}
.zw-servicios .bento-b .preview-shop-pro .cart .ico-cart { position: relative; width: 24px; height: 22px; }
.zw-servicios .bento-b .preview-shop-pro .cart .ico-cart::before {
    content: ""; position: absolute; left: 2px; right: 2px; top: 7px; bottom: 0;
    border: 1.8px solid #1D1D1B; border-top: none; border-radius: 0 0 4px 4px;
}
.zw-servicios .bento-b .preview-shop-pro .cart .ico-cart::after {
    content: ""; position: absolute; left: 50%; top: 0; transform: translateX(-50%);
    width: 14px; height: 9px; border: 1.8px solid #1D1D1B;
    border-bottom: none; border-radius: 8px 8px 0 0;
}
.zw-servicios .bento-b .preview-shop-pro .badge {
    position: absolute; top: -4px; right: -4px;
    background: #1D1D1B; color: var(--y);
    font-size: 9px; font-weight: 900;
    width: 19px; height: 19px; border-radius: 50%;
    display: grid; place-items: center;
    border: 2px solid var(--y); line-height: 1;
}

/* ===== Automatizaciones — preview-auto-pro ===== */
.zw-servicios .bento-b .preview-auto-pro {
    position: absolute; right: 24px; bottom: 24px;
    width: 340px; height: 160px; pointer-events: none;
}
.zw-servicios .bento-b .preview-auto-pro .flow-svg {
    position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible;
}
.zw-servicios .bento-b .preview-auto-pro .node {
    position: absolute; width: 54px; height: 54px; border-radius: 14px;
    background: linear-gradient(135deg, #2c2c28 0%, #1d1d1b 100%);
    border: 1px solid rgba(255,255,255,.10);
    display: grid; place-items: center;
    box-shadow: 0 10px 24px rgba(0,0,0,.45);
}
.zw-servicios .bento-b .preview-auto-pro .node svg {
    width: 24px; height: 24px;
    stroke: rgba(252,198,28,.85); stroke-width: 1.8; fill: none;
    stroke-linecap: round; stroke-linejoin: round;
}
.zw-servicios .bento-b .preview-auto-pro .node.hub {
    width: 66px; height: 66px;
    background: radial-gradient(circle at 30% 30%, rgba(252,198,28,.4), rgba(252,198,28,.1));
    border-color: rgba(252,198,28,.55);
    box-shadow: 0 0 0 6px rgba(252,198,28,.08), 0 14px 32px rgba(252,198,28,.25);
}
.zw-servicios .bento-b .preview-auto-pro .node.hub svg {
    width: 30px; height: 30px; stroke: var(--y); stroke-width: 2.2; fill: rgba(252,198,28,.2);
}
.zw-servicios .bento-b .preview-auto-pro .n-in { left: 0; top: 52px; }
.zw-servicios .bento-b .preview-auto-pro .n-hub { left: 138px; top: 46px; }
.zw-servicios .bento-b .preview-auto-pro .n-top { left: 280px; top: 14px; }
.zw-servicios .bento-b .preview-auto-pro .n-bot { left: 280px; top: 92px; }

/* ===== SEO Local — preview-map-pro ===== */
.zw-servicios .bento-b .preview-map-pro {
    position: absolute; right: 24px; top: 24px;
    width: 170px; height: 140px; border-radius: 14px;
    background:
        radial-gradient(circle at 60% 50%, rgba(252,198,28,.10), transparent 60%),
        linear-gradient(180deg, #2a2a26 0%, #1f1f1c 100%);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 18px 36px rgba(0,0,0,.45);
    overflow: hidden; pointer-events: none;
}
.zw-servicios .bento-b .preview-map-pro::before {
    content: ""; position: absolute; inset: 0; opacity: .55;
    background-image:
        linear-gradient(rgba(252,198,28,.08) 1px, transparent 1px),
        linear-gradient(90deg, rgba(252,198,28,.08) 1px, transparent 1px);
    background-size: 14px 14px;
}
.zw-servicios .bento-b .preview-map-pro .streets { position: absolute; inset: 0; width: 100%; height: 100%; }
.zw-servicios .bento-b .preview-map-pro .streets path { fill: none; stroke: rgba(255,255,255,.18); stroke-linecap: round; }
.zw-servicios .bento-b .preview-map-pro .streets .main { stroke: rgba(252,198,28,.4); stroke-width: 2.5; }
.zw-servicios .bento-b .preview-map-pro .streets .road { stroke-width: 2; }
.zw-servicios .bento-b .preview-map-pro .streets .alley { stroke: rgba(255,255,255,.10); stroke-width: 1.2; }
.zw-servicios .bento-b .preview-map-pro .radius {
    position: absolute; left: 50%; top: 50%;
    width: 84px; height: 84px; border-radius: 50%;
    background: radial-gradient(circle, rgba(252,198,28,.18) 0%, rgba(252,198,28,.05) 60%, transparent 70%);
    border: 1px solid rgba(252,198,28,.25);
    transform: translate(-50%, -50%);
}
.zw-servicios .bento-b .preview-map-pro .pin {
    position: absolute; left: 50%; top: 50%;
    width: 22px; height: 30px;
    transform: translate(-50%, -90%);
    filter: drop-shadow(0 4px 6px rgba(0,0,0,.5));
}
.zw-servicios .bento-b .preview-map-pro .pin::before {
    content: ""; position: absolute; inset: 0;
    background: linear-gradient(135deg, #FCC61C 0%, #e2a900 100%);
    border-radius: 50% 50% 50% 0;
    transform: rotate(-45deg);
    border: 1.5px solid #fbfbfb;
}
.zw-servicios .bento-b .preview-map-pro .pin::after {
    content: ""; position: absolute; left: 50%; top: 42%;
    width: 7px; height: 7px; border-radius: 50%; background: #1D1D1B;
    transform: translate(-50%, -50%);
}
.zw-servicios .bento-b .preview-map-pro .pin-sm {
    position: absolute; width: 8px; height: 8px; border-radius: 50%;
    background: var(--y); border: 1.5px solid #fbfbfb;
    box-shadow: 0 2px 4px rgba(0,0,0,.5);
}
.zw-servicios .bento-b .preview-map-pro .pin-sm.a { left: 24px; top: 30px; }
.zw-servicios .bento-b .preview-map-pro .pin-sm.b { right: 22px; top: 96px; }

/* ===== Branding — preview-brand-pro ===== */
.zw-servicios .bento-b .preview-brand-pro {
    position: absolute; right: -10px; bottom: -20px;
    width: 200px; height: 210px; pointer-events: none;
}
.zw-servicios .bento-b .preview-brand-pro .sheet {
    position: absolute; right: 18px; top: 14px;
    width: 170px; height: 185px;
    background: linear-gradient(180deg, #2a2a26 0%, #1f1f1c 100%);
    border: 1px solid rgba(255,255,255,.10); border-radius: 12px;
    padding: 14px; box-shadow: 0 28px 60px rgba(0,0,0,.5);
    transform: rotate(-4deg);
    display: flex; flex-direction: column; gap: 10px;
}
.zw-servicios .bento-b .preview-brand-pro .sheet .logo-row { display: flex; align-items: center; gap: 9px; }
.zw-servicios .bento-b .preview-brand-pro .sheet .logo-mono {
    width: 34px; height: 34px; border-radius: 8px; background: var(--y);
    display: grid; place-items: center; flex-shrink: 0;
    font-size: 20px; font-weight: 900; color: #1D1D1B; line-height: 1;
}
.zw-servicios .bento-b .preview-brand-pro .sheet .word { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.zw-servicios .bento-b .preview-brand-pro .sheet .word .wordmark { height: 8px; width: 75%; background: rgba(255,255,255,.65); border-radius: 3px; }
.zw-servicios .bento-b .preview-brand-pro .sheet .word .tagline { height: 5px; width: 50%; background: rgba(255,255,255,.25); border-radius: 3px; }
.zw-servicios .bento-b .preview-brand-pro .sheet .divider { height: 1px; background: rgba(255,255,255,.08); }
.zw-servicios .bento-b .preview-brand-pro .sheet .palette { display: flex; gap: 5px; }
.zw-servicios .bento-b .preview-brand-pro .sheet .palette i { flex: 1; height: 26px; border-radius: 5px; position: relative; }
.zw-servicios .bento-b .preview-brand-pro .sheet .palette i:nth-child(1) { background: var(--y); }
.zw-servicios .bento-b .preview-brand-pro .sheet .palette i:nth-child(2) { background: #1D1D1B; border: 1px solid rgba(255,255,255,.12); }
.zw-servicios .bento-b .preview-brand-pro .sheet .palette i:nth-child(3) { background: #fbfbfb; }
.zw-servicios .bento-b .preview-brand-pro .sheet .palette i:nth-child(4) { background: #7c7c75; }
.zw-servicios .bento-b .preview-brand-pro .sheet .type-row { display: flex; align-items: flex-end; gap: 10px; margin-top: auto; }
.zw-servicios .bento-b .preview-brand-pro .sheet .type-row .aa {
    font-size: 30px; font-weight: 900; color: rgba(255,255,255,.85);
    line-height: .8; letter-spacing: -.04em;
}
.zw-servicios .bento-b .preview-brand-pro .sheet .type-row .lines {
    flex: 1; display: flex; flex-direction: column; gap: 3px; padding-bottom: 4px;
}
.zw-servicios .bento-b .preview-brand-pro .sheet .type-row .lines i {
    height: 4px; background: rgba(255,255,255,.22); border-radius: 2px;
}
.zw-servicios .bento-b .preview-brand-pro .sheet .type-row .lines i:nth-child(1) { width: 80%; }
.zw-servicios .bento-b .preview-brand-pro .sheet .type-row .lines i:nth-child(2) { width: 55%; }

/* ===== Redes Sociales — preview-social-pro v8 ===== */
.zw-servicios .bento-b .preview-social-pro {
    position: absolute; right: -15px; bottom: -15px;
    width: 210px; height: 220px; pointer-events: none;
}
.zw-servicios .bento-b .preview-social-pro .post {
    position: absolute; background: #fbfbfb; border-radius: 10px;
    padding: 7px 7px 11px;
    box-shadow: 0 20px 44px rgba(0,0,0,.55);
    display: flex; flex-direction: column; gap: 6px;
}
.zw-servicios .bento-b .preview-social-pro .post .img {
    width: 100%; height: 84px; border-radius: 6px;
    position: relative; overflow: hidden;
}
.zw-servicios .bento-b .preview-social-pro .post .actions {
    display: flex; gap: 6px; align-items: center; padding: 0 3px;
}
.zw-servicios .bento-b .preview-social-pro.v8 .post .heart,
.zw-servicios .bento-b .preview-social-pro.v8 .post .comment {
    width: 14px; height: 14px; border: none; border-radius: 0; background: transparent;
}
.zw-servicios .bento-b .preview-social-pro.v8 .post .heart svg,
.zw-servicios .bento-b .preview-social-pro.v8 .post .comment svg {
    width: 14px; height: 14px; display: block;
    stroke: #1D1D1B; stroke-width: 1.8; fill: none;
    stroke-linecap: round; stroke-linejoin: round;
}
.zw-servicios .bento-b .preview-social-pro.v8 .post .heart svg { fill: #ef4444; stroke: #ef4444; }
.zw-servicios .bento-b .preview-social-pro .post .likes {
    margin-left: auto; width: 26px; height: 5px;
    background: rgba(29,29,27,.3); border-radius: 3px;
}
.zw-servicios .bento-b .preview-social-pro .p1 {
    width: 118px; height: 140px; left: 0; top: 60px;
    transform: rotate(-9deg); z-index: 1;
}
.zw-servicios .bento-b .preview-social-pro .p1 .img {
    background: linear-gradient(135deg, var(--y) 0%, #f5a800 100%);
}
.zw-servicios .bento-b .preview-social-pro .p1 .img::after {
    content: ""; position: absolute; top: 32%; left: 50%;
    transform: translate(-50%, -50%);
    width: 28px; height: 28px; border-radius: 50%;
    background: rgba(255,255,255,.3);
}
.zw-servicios .bento-b .preview-social-pro .p2 {
    width: 118px; height: 140px; left: 70px; top: 32px;
    transform: rotate(7deg); z-index: 2;
}
.zw-servicios .bento-b .preview-social-pro .p2 .img {
    background: linear-gradient(180deg, #2c2c28 0%, #1D1D1B 100%);
    border: 1px solid rgba(255,255,255,.06);
}
.zw-servicios .bento-b .preview-social-pro .p2 .img::before {
    content: ""; position: absolute; top: 22%; left: 22%;
    width: 22px; height: 32px;
    border: 1.5px solid var(--y); border-radius: 5px;
    transform: rotate(-12deg);
}
.zw-servicios .bento-b .preview-social-pro .p2 .img::after {
    content: ""; position: absolute; bottom: 14%; right: 22%;
    width: 32px; height: 14px; background: var(--y); border-radius: 4px;
}
.zw-servicios .bento-b .preview-social-pro .avatar {
    position: absolute; top: 8px; right: 18px;
    width: 38px; height: 38px; border-radius: 50%;
    background: var(--y); border: 3px solid #1D1D1B;
    display: grid; place-items: center; z-index: 3;
    box-shadow: 0 6px 16px rgba(0,0,0,.35);
}
.zw-servicios .bento-b .preview-social-pro .avatar::after {
    content: ""; width: 16px; height: 16px; border-radius: 50%; background: #1D1D1B;
}

/* ===== Diseño Gráfico — preview-posters-pro ===== */
.zw-servicios .bento-b .preview-posters-pro {
    position: absolute; right: -15px; bottom: -15px;
    width: 220px; height: 200px; pointer-events: none;
}
.zw-servicios .bento-b .preview-posters-pro .poster {
    position: absolute; border-radius: 6px;
    box-shadow: 0 16px 38px rgba(0,0,0,.55);
    border: 1px solid rgba(255,255,255,.08); overflow: hidden;
}
.zw-servicios .bento-b .preview-posters-pro .p1 {
    width: 82px; height: 118px; background: #fbfbfb;
    right: 95px; bottom: 30px; transform: rotate(-14deg); z-index: 1;
    padding: 10px 9px; display: flex; flex-direction: column;
}
.zw-servicios .bento-b .preview-posters-pro .p1 .big-aa {
    font-size: 36px; font-weight: 900; color: #1D1D1B;
    line-height: .85; letter-spacing: -.05em; margin-top: 6px;
}
.zw-servicios .bento-b .preview-posters-pro .p1 .bar1,
.zw-servicios .bento-b .preview-posters-pro .p1 .bar2 {
    height: 3px; background: #1D1D1B; border-radius: 2px;
}
.zw-servicios .bento-b .preview-posters-pro .p1 .bar1 { width: 60%; margin-top: auto; }
.zw-servicios .bento-b .preview-posters-pro .p1 .bar2 { width: 38%; margin-top: 4px; opacity: .5; }
.zw-servicios .bento-b .preview-posters-pro .p2 {
    width: 82px; height: 118px; background: var(--y);
    right: 50px; bottom: 18px; transform: rotate(-1deg); z-index: 2;
}
.zw-servicios .bento-b .preview-posters-pro .p2 .circle {
    position: absolute; width: 48px; height: 48px; border-radius: 50%;
    background: #1D1D1B; top: 14px; left: -14px;
}
.zw-servicios .bento-b .preview-posters-pro .p2 .square {
    position: absolute; width: 30px; height: 30px; background: #fbfbfb;
    bottom: 26px; right: 10px; border-radius: 2px;
}
.zw-servicios .bento-b .preview-posters-pro .p2 .tag {
    position: absolute; left: 9px; bottom: 9px;
    width: 42%; height: 4px; background: #1D1D1B; border-radius: 2px;
}
.zw-servicios .bento-b .preview-posters-pro .p2 .tag2 {
    position: absolute; left: 9px; bottom: 17px;
    width: 26%; height: 3px; background: rgba(29,29,27,.5); border-radius: 2px;
}
.zw-servicios .bento-b .preview-posters-pro .p3 {
    width: 82px; height: 118px; background: #1D1D1B;
    border-color: rgba(255,255,255,.15);
    right: 0; bottom: 6px; transform: rotate(11deg); z-index: 3;
    padding: 10px 9px; display: flex; flex-direction: column; align-items: flex-end;
}
.zw-servicios .bento-b .preview-posters-pro .p3 .vline {
    width: 3px; height: 58px; background: var(--y); border-radius: 2px;
}
.zw-servicios .bento-b .preview-posters-pro .p3 .tri {
    width: 0; height: 0;
    border-left: 13px solid transparent; border-right: 13px solid transparent;
    border-bottom: 18px solid var(--y);
    margin-top: 6px; align-self: flex-end;
}
.zw-servicios .bento-b .preview-posters-pro .p3 .txt {
    width: 50%; height: 3px; background: rgba(255,255,255,.55);
    border-radius: 2px; margin-top: auto; align-self: flex-start;
}
.zw-servicios .bento-b .preview-posters-pro .p3 .txt2 {
    width: 30%; height: 3px; background: rgba(255,255,255,.3);
    border-radius: 2px; margin-top: 4px; align-self: flex-start;
}

/* ===== Apps Web — preview-apps-pro ===== */
.zw-servicios .bento-b .preview-apps-pro {
    position: absolute; right: 0; bottom: 0;
    width: 280px; height: 240px; pointer-events: none;
}
.zw-servicios .bento-b .preview-apps-pro .window {
    position: absolute; right: 24px; bottom: 20px;
    width: 200px; height: 170px; border-radius: 12px;
    background: linear-gradient(180deg, #2a2a26 0%, #1f1f1c 100%);
    border: 1px solid rgba(255,255,255,.10);
    box-shadow: 0 24px 50px rgba(0,0,0,.5);
    transform: rotate(-5deg);
    padding: 10px 12px;
    display: flex; flex-direction: column; gap: 6px;
}
.zw-servicios .bento-b .preview-apps-pro .window .bar {
    display: flex; align-items: center; gap: 4px; padding-bottom: 6px;
    border-bottom: 1px solid rgba(255,255,255,.06); margin-bottom: 2px;
}
.zw-servicios .bento-b .preview-apps-pro .window .bar i {
    width: 6px; height: 6px; border-radius: 50%; background: rgba(255,255,255,.18);
}
.zw-servicios .bento-b .preview-apps-pro .window .bar i:first-child { background: rgba(252,198,28,.7); }
.zw-servicios .bento-b .preview-apps-pro .window .bar .name {
    margin-left: 6px; height: 6px; width: 42%;
    border-radius: 2px; background: rgba(255,255,255,.18);
}
.zw-servicios .bento-b .preview-apps-pro .window .line {
    display: flex; align-items: center; gap: 5px; height: 6px;
}
.zw-servicios .bento-b .preview-apps-pro .window .line .indent { display: block; height: 100%; background: transparent; }
.zw-servicios .bento-b .preview-apps-pro .window .line .tok { display: block; height: 5px; border-radius: 2px; }
.zw-servicios .bento-b .preview-apps-pro .window .line .tok.k { background: var(--y); }
.zw-servicios .bento-b .preview-apps-pro .window .line .tok.s { background: rgba(255,255,255,.55); }
.zw-servicios .bento-b .preview-apps-pro .window .line .tok.v { background: rgba(255,255,255,.28); }
.zw-servicios .bento-b .preview-apps-pro .window .line .tok.c { background: rgba(252,198,28,.4); }
.zw-servicios .bento-b .preview-apps-pro .window .l1 .tok.k { width: 24px; }
.zw-servicios .bento-b .preview-apps-pro .window .l1 .tok.s { width: 48px; }
.zw-servicios .bento-b .preview-apps-pro .window .l1 .tok.v { width: 12px; }
.zw-servicios .bento-b .preview-apps-pro .window .l2 .indent { width: 14px; }
.zw-servicios .bento-b .preview-apps-pro .window .l2 .tok.k { width: 18px; }
.zw-servicios .bento-b .preview-apps-pro .window .l2 .tok.s { width: 38px; }
.zw-servicios .bento-b .preview-apps-pro .window .l2 .tok.c { width: 30px; }
.zw-servicios .bento-b .preview-apps-pro .window .l3 .indent { width: 14px; }
.zw-servicios .bento-b .preview-apps-pro .window .l3 .tok.s { width: 64px; }
.zw-servicios .bento-b .preview-apps-pro .window .l3 .tok.v { width: 42px; }
.zw-servicios .bento-b .preview-apps-pro .window .l4 .tok.k { width: 24px; }
.zw-servicios .bento-b .preview-apps-pro .window .l4 .tok.s { width: 32px; }
.zw-servicios .bento-b .preview-apps-pro .module {
    position: absolute; right: 0; top: 18px;
    width: 88px; height: 74px; border-radius: 12px;
    background: linear-gradient(135deg, var(--y) 0%, #e2a900 100%);
    box-shadow: 0 14px 30px rgba(252,198,28,.25), 0 0 0 1px rgba(252,198,28,.4);
    transform: rotate(8deg);
    padding: 10px;
    display: flex; flex-direction: column; gap: 5px;
}
.zw-servicios .bento-b .preview-apps-pro .module .row { display: flex; align-items: center; gap: 5px; }
.zw-servicios .bento-b .preview-apps-pro .module .dot {
    width: 10px; height: 10px; border-radius: 3px; background: #1D1D1B; flex-shrink: 0;
}
.zw-servicios .bento-b .preview-apps-pro .module .ln {
    height: 4px; border-radius: 2px; background: rgba(29,29,27,.55); flex: 1;
}
.zw-servicios .bento-b .preview-apps-pro .module .ln.short {
    flex: none; width: 32px; background: rgba(29,29,27,.3);
}
.zw-servicios .bento-b .preview-apps-pro .module .br {
    height: 5px; border-radius: 2px; background: #1D1D1B;
    width: 60%; margin-top: auto;
}
.zw-servicios .bento-b .preview-apps-pro .db {
    position: absolute; left: 6px; bottom: 10px;
    width: 62px; height: 56px; border-radius: 12px;
    background: linear-gradient(180deg, #2c2c28 0%, #1d1d1b 100%);
    border: 1px solid rgba(255,255,255,.12);
    box-shadow: 0 12px 24px rgba(0,0,0,.45);
    transform: rotate(-12deg);
    display: flex; flex-direction: column; justify-content: center; align-items: center;
    gap: 3px; padding: 8px;
}
.zw-servicios .bento-b .preview-apps-pro .db i {
    display: block; width: 34px; height: 6px; border-radius: 8px;
    background: linear-gradient(90deg, rgba(252,198,28,.7), rgba(252,198,28,.25));
    border: 1px solid rgba(252,198,28,.4);
}
.zw-servicios .bento-b .preview-apps-pro .db i:nth-child(2) {
    background: linear-gradient(90deg, rgba(252,198,28,.3), rgba(252,198,28,.1));
}
.zw-servicios .bento-b .preview-apps-pro .db i:nth-child(3) {
    background: linear-gradient(90deg, rgba(252,198,28,.5), rgba(252,198,28,.15));
}
.zw-servicios .bento-b .preview-apps-pro .dots {
    position: absolute; left: 74px; top: 108px;
    width: 32px; height: 2px;
}
.zw-servicios .bento-b .preview-apps-pro .dots::before,
.zw-servicios .bento-b .preview-apps-pro .dots::after {
    content: ""; position: absolute; width: 3px; height: 3px;
    border-radius: 50%; background: var(--y);
    box-shadow: 0 0 6px var(--y);
}
.zw-servicios .bento-b .preview-apps-pro .dots::before { left: 0; top: 0; }
.zw-servicios .bento-b .preview-apps-pro .dots::after { left: 14px; top: 0; }


/* ===========================================================================
   RESPONSIVE
   =========================================================================== */
@media (max-width: 999.98px) {
    /* títulos ya fluidos via clamp */
    .zw-servicios { padding: 80px 32px; }

    .zw-servicios .bento-b {
        grid-template-columns: repeat(6, 1fr);
        grid-auto-rows: auto;
    }
    .zw-servicios .bento-b .b-hero,
    .zw-servicios .bento-b .b-medium {
        grid-column: span 6 !important;
        grid-row: auto !important;
        min-height: 280px;
    }
    .zw-servicios .bento-b > .sc[style*="grid-column:span 7"],
    .zw-servicios .bento-b > .sc[style*="grid-column:span 5"] {
        grid-column: span 6 !important;
    }
    .zw-servicios .bento-b > .sc[style*="grid-column:span 6"] {
        grid-column: span 3 !important;
    }
    .zw-servicios .bento-b > .sc[style*="grid-column:span 4"] {
        grid-column: span 3 !important;
    }
    .zw-servicios .bento-b .b-m {
        grid-column: span 3 !important;
    }
    .zw-servicios .bento-b .sc.illu-soft { padding-right: 32px; }
    .zw-servicios .bento-b .sc.illu-soft .preview-auto-pro { top: 0; bottom: auto; }
    .zw-servicios .bento-b .sc h3,
    .zw-servicios .bento-b .b-hero h3,
    .zw-servicios .bento-b .b-medium h3 { font-size: 30px; }
}

@media (max-width: 689.98px) {
    .zw-intro {
        min-height: auto;
        padding-bottom: 60px;
    }
    .zw-intro__inner {
        text-align: center;
        padding-top: 60px;
        padding-bottom: 60px;
    }
    .zw-intro__title { text-align: center; }
    .zw-intro__text { text-align: center; margin: 0; }
    .zw-intro__badge { padding: 2px 14px; }

    .zw-servicios { padding: 60px 20px; }
    .zw-servicios .subtitle { margin-bottom: 32px; }

    .zw-servicios .bento-b {
        grid-template-columns: 1fr;
        gap: 14px;
    }
    .zw-servicios .bento-b .b-hero,
    .zw-servicios .bento-b .b-medium,
    .zw-servicios .bento-b > .sc[style],
    .zw-servicios .bento-b > .sc.b-m {
        grid-column: 1 / -1 !important;
        grid-row: auto !important;
        min-height: auto;
        padding-right: 32px !important;
        padding-bottom: 32px !important;
    }
    .zw-servicios .bento-b .sc.illu-soft { padding-right: 32px; }
    .zw-servicios .bento-b .sc.illu-soft.illu-bottom { padding-bottom: 32px; }
    .zw-servicios .bento-b .b-hero .preview,
    .zw-servicios .bento-b [class^="preview-"] { display: none; }

    /* Píldoras "Diseño Web": en móvil la fila debe poder envolver (2 + 1)
       y el texto NUNCA partirse dentro de la píldora. */
    .zw-servicios .bento-b .b-hero .tags { flex-wrap: wrap; }
    .zw-servicios .bento-b .b-hero .tag {
        white-space: nowrap;
        font-size: 14px;
        padding: 6px 13px;
    }
}

/* =============================================================
   ANIMACIONES ILUSTRACIONES BENTO — solo bajo .is-anim
   Activas solo cuando la tarjeta está en viewport (IntersectionObserver).
   Solo propiedades baratas: transform, opacity, offset-distance.
   Respeta prefers-reduced-motion.
   ============================================================= */

/* ── 1. Diseño Web — barras se "dibujan" en secuencia ── */
@media (prefers-reduced-motion: no-preference) {
    .zw-servicios .bento-b .b-hero.is-anim .preview .lines i {
        transform-origin: left center;
        transform: scaleX(0);
        animation: zwBarDraw 0.5s cubic-bezier(.4,0,.2,1) forwards;
    }
    .zw-servicios .bento-b .b-hero.is-anim .preview .lines i:nth-child(1) { animation-delay: 0.1s; }
    .zw-servicios .bento-b .b-hero.is-anim .preview .lines i:nth-child(2) { animation-delay: 0.45s; }
    .zw-servicios .bento-b .b-hero.is-anim .preview .lines i:nth-child(3) { animation-delay: 0.75s; }
    .zw-servicios .bento-b .b-hero.is-anim .preview .lines i:nth-child(4) { animation-delay: 1.05s; }

    @keyframes zwBarDraw {
        from { transform: scaleX(0); opacity: 0.4; }
        to   { transform: scaleX(1); opacity: 1; }
    }
}

/* ── 2. Apps Web — tokens aparecen línea a línea simulando escritura ── */
@media (prefers-reduced-motion: no-preference) {
    .zw-servicios .bento-b .b-medium.is-anim .preview-apps-pro .tok {
        opacity: 0;
        transform-origin: left center;
        transform: scaleX(0.6);
        animation: zwTokAppear 0.35s cubic-bezier(.4,0,.2,1) forwards;
    }

    /* Línea 1 (.l1-a) */
    .zw-servicios .bento-b .b-medium.is-anim .preview-apps-pro .line.l1-a .tok:nth-child(1) { animation-delay: 0.15s; }
    .zw-servicios .bento-b .b-medium.is-anim .preview-apps-pro .line.l1-a .tok:nth-child(2) { animation-delay: 0.35s; }
    .zw-servicios .bento-b .b-medium.is-anim .preview-apps-pro .line.l1-a .tok:nth-child(3) { animation-delay: 0.52s; }
    /* Línea 2 */
    .zw-servicios .bento-b .b-medium.is-anim .preview-apps-pro .line.l2 .tok:nth-child(1) { animation-delay: 0.75s; }
    .zw-servicios .bento-b .b-medium.is-anim .preview-apps-pro .line.l2 .tok:nth-child(2) { animation-delay: 0.92s; }
    .zw-servicios .bento-b .b-medium.is-anim .preview-apps-pro .line.l2 .tok:nth-child(3) { animation-delay: 1.08s; }
    /* Línea 3 */
    .zw-servicios .bento-b .b-medium.is-anim .preview-apps-pro .line.l3 .tok:nth-child(1) { animation-delay: 1.30s; }
    .zw-servicios .bento-b .b-medium.is-anim .preview-apps-pro .line.l3 .tok:nth-child(2) { animation-delay: 1.46s; }
    /* Línea 4 */
    .zw-servicios .bento-b .b-medium.is-anim .preview-apps-pro .line.l4 .tok:nth-child(1) { animation-delay: 1.65s; }
    .zw-servicios .bento-b .b-medium.is-anim .preview-apps-pro .line.l4 .tok:nth-child(2) { animation-delay: 1.80s; }
    /* Línea 5 (.l1-b) */
    .zw-servicios .bento-b .b-medium.is-anim .preview-apps-pro .line.l1-b .tok:nth-child(1) { animation-delay: 2.00s; }
    .zw-servicios .bento-b .b-medium.is-anim .preview-apps-pro .line.l1-b .tok:nth-child(2) { animation-delay: 2.15s; }
    .zw-servicios .bento-b .b-medium.is-anim .preview-apps-pro .line.l1-b .tok:nth-child(3) { animation-delay: 2.30s; }

    @keyframes zwTokAppear {
        from { opacity: 0; transform: scaleX(0.6); }
        to   { opacity: 1; transform: scaleX(1); }
    }
}

/* ── 3. Tienda Online — badge pulsa suavemente ── */
@media (prefers-reduced-motion: no-preference) {
    .zw-servicios .bento-b .is-anim .preview-shop-pro .badge {
        animation: zwBadgePulse 5s cubic-bezier(.4,0,.6,1) infinite;
        animation-delay: 1.5s;
    }

    @keyframes zwBadgePulse {
        0%, 60%, 100% { transform: scale(1);    opacity: 1; }
        70%            { transform: scale(1.35); opacity: 1; }
        80%            { transform: scale(0.88); opacity: .9; }
        90%            { transform: scale(1.1);  opacity: 1; }
    }
}

/* ── 4. Automatizaciones — puntos viajan por los paths ── */
@media (prefers-reduced-motion: no-preference) {
    /* Punto en el path horizontal (mail→hub): path "M 54 79 C 96 79, 110 80, 138 80" */
    .zw-servicios .bento-b .is-anim .flow-svg .flow-dot-h {
        offset-path: path("M 54 79 C 96 79, 110 80, 138 80");
        offset-distance: 0%;
        animation: zwFlowH 2.4s cubic-bezier(.4,0,.6,1) infinite;
        animation-delay: 0s;
    }
    /* Punto en el path superior (hub→cal): path "M 204 70 C 240 70, 250 50, 280 41" */
    .zw-servicios .bento-b .is-anim .flow-svg .flow-dot-t {
        offset-path: path("M 204 70 C 240 70, 250 50, 280 41");
        offset-distance: 0%;
        animation: zwFlowT 2.4s cubic-bezier(.4,0,.6,1) infinite;
        animation-delay: 0.6s;
    }
    /* Punto en el path inferior (hub→doc): path "M 204 90 C 240 90, 250 110, 280 119" */
    .zw-servicios .bento-b .is-anim .flow-svg .flow-dot-b {
        offset-path: path("M 204 90 C 240 90, 250 110, 280 119");
        offset-distance: 0%;
        animation: zwFlowB 2.4s cubic-bezier(.4,0,.6,1) infinite;
        animation-delay: 1.2s;
    }

    @keyframes zwFlowH {
        0%   { offset-distance: 0%;   opacity: 0; }
        8%   { opacity: 1; }
        80%  { offset-distance: 100%; opacity: 1; }
        100% { offset-distance: 100%; opacity: 0; }
    }
    @keyframes zwFlowT {
        0%   { offset-distance: 0%;   opacity: 0; }
        8%   { opacity: 1; }
        80%  { offset-distance: 100%; opacity: 1; }
        100% { offset-distance: 100%; opacity: 0; }
    }
    @keyframes zwFlowB {
        0%   { offset-distance: 0%;   opacity: 0; }
        8%   { opacity: 1; }
        80%  { offset-distance: 100%; opacity: 1; }
        100% { offset-distance: 100%; opacity: 0; }
    }

    /* Pulso suave en el hub */
    .zw-servicios .bento-b .is-anim .preview-auto-pro .node.hub {
        animation: zwHubGlow 3s ease-in-out infinite;
    }

    @keyframes zwHubGlow {
        0%, 100% { transform: scale(1); }
        50%      { transform: scale(1.05); }
    }
}

/* Estilos base de los puntos de flujo: ocultos salvo cuando la animación
   los mueve (sin offset-path soportado o reduced-motion quedarían en 0,0). */
.zw-servicios .bento-b .flow-svg .flow-dot-h,
.zw-servicios .bento-b .flow-svg .flow-dot-t,
.zw-servicios .bento-b .flow-svg .flow-dot-b {
    r: 3.5;
    fill: #FCC61C;
    opacity: 0;
}

/* ── 5. SEO Local — radius pulsa como sonar ── */
@media (prefers-reduced-motion: no-preference) {
    .zw-servicios .bento-b .is-anim .preview-map-pro .radius {
        animation: zwRadarPulse 3.6s ease-in-out infinite;
    }

    @keyframes zwRadarPulse {
        0%, 100% { opacity: 1;   transform: translate(-50%,-50%) scale(1); }
        45%       { opacity: .35; transform: translate(-50%,-50%) scale(1.14); }
        55%       { opacity: .35; transform: translate(-50%,-50%) scale(1.14); }
        75%       { opacity: .8;  transform: translate(-50%,-50%) scale(1.04); }
    }
}

/* ===== Pricing section reutilizada en servicios.php ===== */
.page-servicios #precios {
    background: var(--zander-black);
    color: var(--zander-white-soft);
    padding: 100px 0;
}
.page-servicios #precios .zw-container {
    max-width: 1672px;
    padding: 0 28px;
}