/* ==========================================================================
   VO GROUP · Hub de oficinas virtuales (/servicios/oficinas-virtuales/, desde 6-oct-2026)
   Misma estética del Home v2, Paquetes v2, las LP v3 y los hubs de oficinas amuebladas.
   Se carga DESPUÉS de home-v2.css (secciones fundidas, tarjetas, botones, menú delgado,
   preguntas, aparición), mapa-sedes.css (mapa compartido), resenas-google.css y
   oficina-privada.css (portada con foto y velo azul, precios en vidrio, "¿No es tu caso?"
   y enlaces del cierre). Solo agrega lo propio de esta página con el prefijo ov2-.
   Orden: portada → tu caso → cifras → qué es → qué incluye → precios → ciudades
   → proceso → reseñas → preguntas → contacto.
   ========================================================================== */

.ov2 { --ov2-line: rgba(0, 56, 125, 0.10); --ov2-tint: #eef4fb; --ov2-mint: #eaf5ee; }
.ov2 [hidden] { display: none !important; }
.ov2 button { font-family: 'Inter', sans-serif; }
.ov2 .hv2-title, .ov2 .hv2-sub { text-wrap: balance; }

/* ==========================================================================
   PORTADA: deja lugar abajo para que "Tu caso" se monte encima
   ========================================================================== */
.ov2-hero { padding-bottom: clamp(200px, 20vw, 240px); }
.ov2-hero .oa2-hero__photo img { object-position: 50% 45%; }
.ov2-hero .hv2-hero__fade { height: 200px; }
.ov2-hero .oa2-hero__title em { white-space: normal; }
.ov2-hero .oa2-price { min-width: 230px; }

/* ==========================================================================
   TU CASO: la frase del cliente → lo que obtiene y el paquete que lo resuelve
   ========================================================================== */
.ov2-finder-wrap {
    margin-top: -170px;
    background: linear-gradient(180deg, rgba(233,241,251,0) 0, rgba(233,241,251,0) 170px, var(--hv2-tint-1) 170px);
}
.ov2 .ov2-case { max-width: 1100px; }
.ov2-case__grid { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: clamp(18px, 3vw, 36px); align-items: stretch; }
.ov2-quotes { flex-direction: column; align-items: stretch; gap: 8px; }
.ov2-quotes .hv2-pill {
    display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
    font-size: 15px; line-height: 1.35; padding: 11px 16px; border-radius: 16px;
}
.ov2-quotes .hv2-pill::before {
    content: ''; width: 16px; height: 16px; flex: none; border-radius: 50%;
    border: 1.5px solid #b9c8dc; background: #fff center/10px no-repeat; transition: all 0.25s var(--hv2-ease);
}
.ov2-quotes .hv2-pill.is-active::before {
    border-color: #5fe08a; background-color: #5fe08a;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230c3b1f' stroke-width='4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E");
}
.ov2-case__hint { font-size: 14px; color: var(--hv2-ink-soft); margin: 12px 0 0; }

.ov2-result {
    border-radius: 20px; padding: clamp(18px, 2.2vw, 26px);
    background: linear-gradient(135deg, #f1f6fd, #eef7f1); border: 1px solid rgba(0,56,125,0.10);
    display: flex; flex-direction: column; min-height: 100%;
}
.ov2-result.is-changing { animation: ov2-swap 0.45s var(--hv2-ease); }
@keyframes ov2-swap { from { opacity: 0.35; transform: translate3d(0, 8px, 0); } to { opacity: 1; transform: none; } }
.ov2-result__label { font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hv2-green); margin: 0 0 6px; }
.ov2-result__title { font-size: clamp(19px, 2vw, 23px); font-weight: 700; color: var(--hv2-blue-900); line-height: 1.25; margin: 2px 0 0; }
.ov2-result__why { font-size: 15px; line-height: 1.55; color: var(--hv2-ink-soft); margin: 8px 0 0; }
.ov2-result__next { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 6px; }
.ov2-result__next li { position: relative; padding-left: 26px; font-size: 14px; line-height: 1.45; color: var(--hv2-ink); }
.ov2-result__next li::before {
    content: ''; position: absolute; left: 0; top: 2px; width: 17px; height: 17px; border-radius: 50%;
    background: #e4f4ea url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232d8b4e' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/10px no-repeat;
}
.ov2-result__extra {
    display: flex; align-items: flex-start; gap: 10px; margin: 12px 0 0; padding: 10px 14px; border-radius: 14px;
    background: #fff; border: 1px dashed rgba(45,139,78,0.55); font-size: 14px; line-height: 1.45; color: var(--hv2-ink);
}
.ov2-result__extra b { color: var(--hv2-blue-900); }
.ov2-result__extra a { color: var(--hv2-blue-700); font-weight: 600; }
.ov2-result__plan { margin-top: 14px; padding-top: 12px; border-top: 1px dashed rgba(0, 56, 125, 0.18); }
.ov2-result__plan-label { display: block; font-size: 11.5px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hv2-ink-soft); margin-bottom: 2px; }
.ov2-result__row { display: flex; align-items: baseline; justify-content: space-between; gap: 6px 16px; flex-wrap: wrap; }
.ov2-result__name { font-size: clamp(21px, 2.3vw, 26px); font-weight: 700; color: var(--hv2-blue-900); line-height: 1.15; }
.ov2-result__price { font-size: 20px; font-weight: 700; color: var(--hv2-blue-700); white-space: nowrap; font-variant-numeric: tabular-nums; }
.ov2-result__price small { font-size: 13px; font-weight: 500; color: var(--hv2-ink-soft); }
.ov2-result__actions { margin-top: auto; padding-top: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 10px 18px; }
.ov2-result__actions .hv2-finder__go { font-size: 15.5px; padding: 12px 22px; }
.ov2-result__actions .hv2-finder__go svg { width: 19px; height: 19px; }
.ov2-result__actions .hv2-more { margin-top: 0; }

/* ==========================================================================
   CIFRAS (banda del Home, más compacta)
   ========================================================================== */
.ov2 .hv2-stats { padding-top: clamp(40px, 5vw, 64px); }

/* ==========================================================================
   1. ¿QUÉ ES UNA OFICINA VIRTUAL?  (foto + explicación + cómo funciona + para quién)
   ========================================================================== */
.ov2-what { display: grid; grid-template-columns: minmax(0, 0.92fr) minmax(0, 1.25fr); gap: clamp(22px, 4vw, 56px); align-items: start; }
.ov2-what .hv2-why__photo { aspect-ratio: 4 / 4.4; position: sticky; top: calc(var(--header-height, 72px) + 84px); }
.ov2-what__text > p { font-size: clamp(16px, 1.5vw, 17.5px); line-height: 1.7; color: var(--hv2-ink); margin: 0 0 14px; }
.ov2-what__text > p strong { color: var(--hv2-blue-900); }
.ov2-flow__title { font-size: 13px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--hv2-green); margin: 22px 0 12px; }
.ov2-flow { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; counter-reset: ov2paso; }
.ov2-flow li {
    position: relative; counter-increment: ov2paso; padding: 13px 16px 13px 58px; border-radius: 16px;
    background: rgba(255,255,255,0.82); border: 1px solid var(--ov2-line); font-size: 15px; line-height: 1.5; color: var(--hv2-ink-soft);
    transition: transform 0.35s var(--hv2-ease), box-shadow 0.35s var(--hv2-ease), background 0.3s;
}
.ov2-flow li:hover { background: #fff; transform: translateX(4px); box-shadow: 0 12px 30px rgba(0,38,94,0.10); }
.ov2-flow li::before {
    content: counter(ov2paso); position: absolute; left: 14px; top: 50%; margin-top: -15px; width: 30px; height: 30px; border-radius: 50%;
    display: grid; place-items: center; font-weight: 700; font-size: 14px; color: #fff;
    background: linear-gradient(135deg, var(--hv2-green), var(--hv2-blue-500));
}
.ov2-flow b { color: var(--hv2-blue-900); }
.ov2-flow small { display: inline-block; margin-left: 4px; font-size: 12px; font-weight: 600; color: var(--hv2-green); }
.ov2-what__more { margin: 16px 0 0; font-size: 14.5px; color: var(--hv2-ink-soft); }
.ov2-what__more a { font-weight: 600; color: var(--hv2-blue-700); border-bottom: 1.5px solid rgba(0,56,125,0.22); text-decoration: none; }
.ov2-what__more a:hover { color: var(--hv2-green); border-color: var(--hv2-green); }

.ov2-who__title { text-align: center; font-size: clamp(20px, 2.2vw, 24px); font-weight: 700; color: var(--hv2-blue-900); margin: clamp(40px, 5vw, 64px) 0 18px; }
.ov2-who { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; }
.ov2-who .hv2-reason h3 { align-items: flex-start; }
.ov2-who .hv2-reason h3 svg { margin-top: 1px; }

/* ==========================================================================
   2. QUÉ INCLUYE: mosaico con foto propia (mismo de la LP nacional)
   ========================================================================== */
.ov2-bento { display: grid; grid-template-columns: minmax(0, 1.08fr) repeat(2, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 18px); }
.ov2-tile {
    position: relative; display: flex; flex-direction: column; gap: 6px; min-width: 0;
    background: rgba(255, 255, 255, 0.86); border: 1px solid var(--ov2-line); border-radius: 22px;
    padding: clamp(18px, 2.2vw, 26px); box-shadow: 0 10px 30px rgba(0, 38, 94, 0.07);
    transition: transform 0.45s var(--hv2-ease), box-shadow 0.45s var(--hv2-ease), background 0.3s;
}
.ov2-tile:hover { transform: translateY(-6px); background: #fff; box-shadow: var(--hv2-shadow-hover); }
.ov2-tile h3 { font-size: 18px; font-weight: 700; color: var(--hv2-blue-900); margin: 0; line-height: 1.3; }
.ov2-tile p { font-size: 15px; line-height: 1.55; color: var(--hv2-ink-soft); margin: 0; }
.ov2-tile__icon {
    width: 48px; height: 48px; border-radius: 14px; display: grid; place-items: center; margin-bottom: 6px;
    background: linear-gradient(135deg, #e6f0fc, #e4f4ea); color: var(--hv2-blue-700); transition: transform 0.45s var(--hv2-ease);
}
.ov2-tile:hover .ov2-tile__icon { transform: rotate(-6deg) scale(1.08); }
.ov2-tile__icon svg { width: 24px; height: 24px; }
.ov2-tile__kicker { font-size: 12px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--hv2-green); }
.ov2-tile__in {
    margin-top: auto; padding-top: 10px; font-size: 12.5px; font-weight: 600; color: var(--hv2-blue-700);
    display: flex; align-items: center; gap: 6px;
}
.ov2-tile__in::before { content: ''; width: 7px; height: 7px; border-radius: 50%; background: var(--hv2-green); flex: none; }
.ov2-tile--photo { grid-row: span 2; padding: 0; overflow: hidden; min-height: 420px; border: 0; color: #fff; justify-content: flex-end; }
.ov2-tile--photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; transform: scale(1.06); transition: transform 1.2s var(--hv2-ease); }
.ov2-tile--photo:hover img { transform: scale(1.12); }
.ov2-tile--photo::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0, 38, 94, 0) 30%, rgba(0, 38, 94, 0.82) 78%, rgba(0, 38, 94, 0.92) 100%); }
.ov2-tile__over { position: relative; z-index: 1; padding: clamp(20px, 2.4vw, 28px); display: flex; flex-direction: column; gap: 6px; }
.ov2-tile--photo h3 { color: #fff; font-size: 21px; }
.ov2-tile--photo p { color: rgba(255, 255, 255, 0.88); }
.ov2-tile--photo .ov2-tile__kicker { color: #8ff0b0; }
.ov2-tile--photo .ov2-tile__in { color: #fff; }
.ov2-tile--photo .ov2-tile__in::before { background: #5fe08a; }
.ov2-tile__cap { position: absolute; top: 14px; left: 14px; z-index: 1; font-size: 11.5px; font-weight: 600; color: #fff; background: rgba(0, 38, 94, 0.62); padding: 4px 10px; border-radius: 999px; }
.ov2-tile--wide { grid-column: 1 / -1; flex-direction: row; align-items: center; gap: 18px; background: linear-gradient(135deg, #f1f6fd, #eef7f1); }
.ov2-tile--wide > div { flex: 1; display: flex; flex-direction: column; gap: 4px; }
.ov2-tile--wide .ov2-tile__icon { margin: 0; width: 56px; height: 56px; flex: none; }
.ov2-tile--wide .ov2-tile__in { margin: 0; padding: 0; max-width: 230px; align-self: center; }

/* ==========================================================================
   3. PRECIOS: rango y escalera de paquetes + complementos
   ========================================================================== */
.ov2-range { max-width: 960px; margin: 0 auto clamp(36px, 5vw, 56px); padding: 0 40px; }
.ov2-range__bar { position: relative; height: 10px; border-radius: 999px; background: #e1e9f3; overflow: hidden; }
.ov2-range__fill { position: absolute; inset: 0; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--hv2-green), var(--hv2-blue-500) 55%, var(--hv2-blue-900)); transition: transform 1.6s var(--hv2-ease) 0.2s; }
.ov2-range.is-in .ov2-range__fill { transform: scaleX(1); }
.ov2-range__marks { position: relative; height: 62px; }
.ov2-range__marks span {
    position: absolute; top: 14px; left: var(--x); transform: translateX(-50%); text-align: center; font-size: 12.5px; line-height: 1.35;
    color: var(--hv2-ink-soft); width: max-content; max-width: 190px; opacity: 0; transition: opacity 0.6s var(--hv2-ease);
}
.ov2-range__marks span::before { content: ''; position: absolute; left: 50%; top: -22px; width: 14px; height: 14px; margin-left: -7px; border-radius: 50%; background: #fff; border: 3px solid var(--hv2-blue-700); box-shadow: 0 3px 8px rgba(0, 38, 94, 0.2); }
.ov2-range__marks b { display: block; font-size: 16px; font-weight: 800; color: var(--hv2-blue-900); font-variant-numeric: tabular-nums; }
.ov2-range.is-in .ov2-range__marks span { opacity: 1; }
.ov2-range.is-in .ov2-range__marks span:nth-child(2) { transition-delay: 0.5s; }
.ov2-range.is-in .ov2-range__marks span:nth-child(3) { transition-delay: 0.9s; }
.ov2-range.is-in .ov2-range__marks span:nth-child(4) { transition-delay: 1.3s; }
/* Sin JavaScript (o sin movimiento) el rango se ve completo */
html:not(.hv2-js) .ov2-range__fill { transform: scaleX(1); }
html:not(.hv2-js) .ov2-range__marks span { opacity: 1; }

.ov2-ladder { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(12px, 1.6vw, 18px); align-items: start; max-width: 1140px; margin: 0 auto; }
.ov2-tier { padding: clamp(20px, 2.2vw, 26px); scroll-margin-top: calc(var(--header-height, 72px) + 64px); }
.ov2-ladder .ov2-tier:nth-child(1), .ov2-ladder .ov2-tier:nth-child(2) { margin-top: 64px; }
.ov2-ladder .ov2-tier:nth-child(3) { margin-top: 28px; }
.ov2-tier__step {
    position: absolute; right: 16px; top: 16px; width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center;
    font-size: 12.5px; font-weight: 800; color: var(--hv2-blue-700); background: var(--ov2-tint);
}
.hv2-plan--featured .ov2-tier__step { color: var(--hv2-blue-900); background: #fff; }
.ov2 .ov2-tier h3 { font-size: 21px; padding-right: 30px; margin-bottom: 4px; }
.ov2-tier .hv2-plan__price { font-size: clamp(27px, 2.5vw, 34px); }
.ov2-tier .hv2-plan__price small { font-size: 13px; }
.ov2 .ov2-tier p.ov2-tier__for { font-size: 14px; line-height: 1.5; color: var(--hv2-ink-soft); margin: 0 0 14px; }
.ov2 .hv2-plan--featured p.ov2-tier__for { color: rgba(255,255,255,0.86); }
.ov2-tier__annual { display: block; font-size: 13px; font-weight: 600; color: var(--hv2-green); margin-top: 4px; }
.hv2-plan--featured .ov2-tier__annual { color: #8ff0b0; }
.ov2-tier ul { margin: 14px 0 18px; gap: 8px; }
.ov2-tier li { font-size: 14px; }
.ov2-tier__foot { margin-top: auto; display: flex; flex-direction: column; gap: 10px; align-items: stretch; padding-top: 6px; }
.ov2-tier__foot .hv2-btn, .ov2-tier__foot .hv2-finder__go { font-size: 14.5px; padding: 11px 18px; width: 100%; justify-content: center; text-align: center; }
.ov2-tier__foot .hv2-more { margin-top: 0; font-size: 13.5px; align-self: center; }
.hv2-plan--featured .ov2-tier__foot .hv2-more { color: #fff !important; }
.ov2-tier.is-target { animation: ov2-ring 1.7s var(--hv2-ease); }
@keyframes ov2-ring {
    0% { box-shadow: 0 0 0 0 rgba(40,167,69,0.55), var(--hv2-shadow); }
    60% { box-shadow: 0 0 0 16px rgba(40,167,69,0), var(--hv2-shadow-hover); }
    100% { box-shadow: 0 0 0 0 rgba(40,167,69,0), var(--hv2-shadow); }
}

.ov2-addons__title { text-align: center; font-size: clamp(19px, 2vw, 22px); font-weight: 700; color: var(--hv2-blue-900); margin: clamp(40px, 5vw, 60px) 0 6px; }
.ov2-addons__sub { text-align: center; font-size: 15px; color: var(--hv2-ink-soft); margin: 0 auto 20px; max-width: 640px; }
.ov2-addons { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: clamp(10px, 1.4vw, 16px); max-width: 1140px; margin: 0 auto; }
.ov2-addon {
    display: flex; flex-direction: column; gap: 6px; padding: 18px 18px 16px; border-radius: 18px;
    background: rgba(255,255,255,0.86); border: 1px solid var(--ov2-line);
    transition: transform 0.35s var(--hv2-ease), box-shadow 0.35s var(--hv2-ease), background 0.3s;
}
.ov2-addon:hover { background: #fff; transform: translateY(-4px); box-shadow: 0 14px 34px rgba(0,38,94,0.12); }
.ov2-addon h4 { margin: 0; font-size: 15.5px; line-height: 1.35; font-weight: 700; color: var(--hv2-blue-900); }
.ov2-addon p { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--hv2-ink-soft); }
.ov2-addon__price { margin-top: auto; padding-top: 8px; font-size: 19px; font-weight: 800; color: var(--hv2-blue-700); font-variant-numeric: tabular-nums; }
.ov2-addon__price small { font-size: 12.5px; font-weight: 500; color: var(--hv2-ink-soft); }
.ov2-addon__price--two { display: grid; gap: 2px; font-size: 17px; }
.ov2-addon__fit { font-size: 12.5px; font-weight: 600; color: var(--hv2-green); }
.ov2-addon--key { border-color: rgba(45,139,78,0.45); background: linear-gradient(135deg, #f1f6fd, #eef7f1); }
.ov2-prices__note { text-align: center; margin-top: clamp(24px, 3vw, 36px); display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 12px 16px; }
.ov2-prices__note .hv2-fine { flex-basis: 100%; max-width: 860px; margin: 4px auto 0; line-height: 1.55; }

/* ==========================================================================
   4. CIUDADES: mapa compartido + tarjeta por ciudad (enlaces rastreables)
   ========================================================================== */
.ov2-cities { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: clamp(14px, 2vw, 22px); margin-top: clamp(28px, 4vw, 44px); }
.ov2-city { padding: clamp(20px, 2.4vw, 28px); }
.ov2-city--wide { grid-column: span 2; }
.ov2-city__head { display: flex; align-items: center; gap: 14px; margin-bottom: 12px; }
.ov2-city__head img { width: 52px; height: 52px; object-fit: contain; flex: none; }
.ov2-city h3 { font-size: 20px; line-height: 1.25; margin: 0; }
.ov2-city h3 a { color: inherit; text-decoration: none; }
.ov2-city h3 a:hover { color: var(--hv2-blue-500); }
.ov2-city__count { display: block; margin-top: 3px; font-size: 13px; font-weight: 600; color: var(--hv2-green); }
.ov2-city p.ov2-city__zones { font-size: 14.5px; line-height: 1.5; margin: 0 0 12px; }
.ov2-city .hv2-chips { margin-bottom: 12px; }
.ov2-city .hv2-chip { font-size: 13px; padding: 5px 11px; }
.ov2-city__notes { list-style: none; margin: 2px 0 4px; padding: 12px 0 0; border-top: 1px dashed #d9e3f0; display: grid; gap: 7px; }
.ov2-city__notes li { position: relative; padding-left: 26px; font-size: 13.5px; font-weight: 500; line-height: 1.4; color: var(--hv2-ink); }
.ov2-city__notes li::before {
    content: ''; position: absolute; left: 0; top: 1px; width: 17px; height: 17px; border-radius: 50%;
    background: #e4f4ea url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232d8b4e' stroke-width='3.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/10px no-repeat;
}
.ov2-city__notes li.is-soon { color: #7a5a12; }
.ov2-city__notes li.is-soon::before { background: #fff4d6 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%237a5a12' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='8'/%3E%3Cpath d='M12 8v4l2.5 1.5'/%3E%3C/svg%3E") center/12px no-repeat; }
.ov2-city__notes li.is-off { color: var(--hv2-ink-soft); }
.ov2-city__notes li.is-off::before { background: #eef1f5 url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%234a5b70' stroke-width='3.5' stroke-linecap='round'%3E%3Cpath d='M6 12h12'/%3E%3C/svg%3E") center/10px no-repeat; }
.ov2-city .hv2-more { margin-top: auto; padding-top: 10px; }

/* ==========================================================================
   5. PROCESO EN 4 PASOS CON TIEMPOS
   ========================================================================== */
.ov2-steps { list-style: none; margin: 0 auto; padding: 0; position: relative; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 18px; max-width: 1040px; }
.ov2-steps::before {
    content: ''; position: absolute; top: 34px; left: 12.5%; right: 12.5%; height: 3px; border-radius: 3px;
    background: linear-gradient(90deg, var(--hv2-green), var(--hv2-blue-500)); opacity: 0.35;
}
.ov2-step { position: relative; text-align: center; display: flex; flex-direction: column; }
.ov2-step__node {
    position: relative; z-index: 1; width: 70px; height: 70px; margin: 0 auto 16px; border-radius: 50%;
    display: grid; place-items: center; background: #fff; color: var(--hv2-blue-700);
    border: 2px solid rgba(0,56,125,0.14); box-shadow: 0 10px 28px rgba(0,38,94,0.12);
    transition: transform 0.5s var(--hv2-ease), box-shadow 0.5s var(--hv2-ease);
}
.ov2-step:hover .ov2-step__node { transform: translateY(-4px); box-shadow: 0 16px 36px rgba(0,38,94,0.18); }
.ov2-step__node svg { width: 30px; height: 30px; }
.ov2-step__node b {
    position: absolute; right: -6px; top: -6px; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center;
    font-size: 12.5px; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--hv2-green), var(--hv2-blue-500));
}
.ov2-step__card {
    flex: 1; display: flex; flex-direction: column; padding: 18px 16px 20px; border-radius: 18px;
    background: rgba(255,255,255,0.86); border: 1px solid rgba(0,56,125,0.08);
    transition: transform 0.35s var(--hv2-ease), box-shadow 0.35s var(--hv2-ease), background 0.3s;
}
.ov2-step:hover .ov2-step__card { background: #fff; transform: translateY(-4px); box-shadow: 0 14px 34px rgba(0,38,94,0.12); }
.ov2-step h3 { font-size: 17.5px; margin: 0 0 6px; color: var(--hv2-blue-900); line-height: 1.25; }
.ov2-step p { font-size: 14.5px; line-height: 1.5; color: var(--hv2-ink-soft); margin: 0; }
.ov2-step__time {
    align-self: center; display: inline-flex; align-items: center; gap: 6px; margin: 0 0 10px; padding: 5px 11px; border-radius: 999px;
    font-size: 12.5px; font-weight: 700; color: var(--hv2-blue-700); background: var(--ov2-tint);
}
.ov2-step__time svg { width: 14px; height: 14px; }
.ov2-step__time--key { color: #fff; background: linear-gradient(135deg, var(--hv2-green), var(--hv2-blue-500)); }
.ov2-step__tag {
    align-self: center; margin-top: 12px; padding: 4px 9px; border-radius: 999px;
    font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: #1f6e3c; background: #e4f4ea;
}
.ov2-steps__foot { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 14px 22px; margin-top: 34px; }
.ov2-steps__time {
    display: inline-flex; align-items: center; gap: 9px; font-size: 14.5px; font-weight: 600; color: var(--hv2-blue-900);
    background: #fff; border: 1px solid rgba(0,56,125,0.10); border-radius: 999px; padding: 10px 16px; box-shadow: 0 6px 18px rgba(0,38,94,0.08);
}
.ov2-steps__time svg { width: 18px; height: 18px; color: var(--hv2-green); flex: none; }
.ov2-docs { max-width: 860px; margin: 22px auto 0; text-align: center; font-size: 14.5px; line-height: 1.6; color: var(--hv2-ink-soft); }
.ov2-docs b { color: var(--hv2-blue-900); }

/* ==========================================================================
   PREGUNTAS: lecturas relacionadas
   ========================================================================== */
.ov2-reads { max-width: 860px; margin: 26px auto 0; display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 8px 10px; font-size: 14.5px; color: var(--hv2-ink-soft); }
.ov2-reads span { font-weight: 600; margin-right: 2px; }

/* ==========================================================================
   ADAPTACIÓN A TABLETA Y CELULAR
   ========================================================================== */
@media (max-width: 1100px) {
    .ov2-ladder { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; }
    .ov2-ladder .ov2-tier:nth-child(n) { margin-top: 0; }
    .ov2-addons { grid-template-columns: repeat(2, minmax(0, 1fr)); max-width: 760px; }
    .ov2-who { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 980px) {
    .ov2-what { grid-template-columns: 1fr; }
    .ov2-what .hv2-why__photo { aspect-ratio: 16 / 10; max-width: 560px; margin: 0 auto; width: 100%; position: relative; top: auto; }
    .ov2-cities { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .ov2-city--wide { grid-column: 1 / -1; }
    .ov2-steps { grid-template-columns: repeat(2, minmax(0, 1fr)); row-gap: 28px; }
    .ov2-steps::before { display: none; }
}
@media (max-width: 720px) {
    .ov2-hero { padding-bottom: 190px; }
    .ov2-hero .oa2-hero__title { font-size: clamp(29px, 8vw, 34px); }
    .ov2-hero .oa2-hero__lead { margin-bottom: 18px; }
    .ov2-hide-sm { display: none; }
    .ov2-hero .oa2-hero__prices { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-bottom: 18px; }
    .ov2-hero .oa2-price { min-width: 0; width: auto; padding: 10px 12px; border-radius: 14px; }
    .ov2-hero .oa2-price small { font-size: 10.5px; letter-spacing: 0.05em; }
    .ov2-hero .oa2-price b { font-size: 18px; }
    .ov2-hero .oa2-price b span { display: block; font-size: 11.5px; }
    .ov2-hero .oa2-hero__points { margin-top: 20px; gap: 8px; }
    .ov2-hero .oa2-hero__points li { font-size: 13px; padding: 6px 12px 6px 8px; }
    .ov2-finder-wrap { margin-top: -150px; background: linear-gradient(180deg, rgba(233,241,251,0) 0, rgba(233,241,251,0) 150px, var(--hv2-tint-1) 150px); }
    .ov2-case__grid { grid-template-columns: 1fr; }
    .ov2-quotes .hv2-pill { font-size: 14px; padding: 10px 13px; }
    .ov2-result__actions .hv2-finder__go { width: 100%; justify-content: center; }
    .ov2-result__actions .hv2-more { width: 100%; justify-content: center; }
    .ov2-who { grid-template-columns: 1fr; }
    .ov2-bento { grid-template-columns: 1fr; }
    .ov2-tile--photo { min-height: 320px; }
    .ov2-tile--wide { flex-direction: column; align-items: flex-start; }
    .ov2-tile--wide .ov2-tile__in { max-width: none; align-self: flex-start; }
    .ov2-range { display: none; }
    .ov2-ladder { grid-template-columns: 1fr; max-width: 520px; }
    .ov2-ladder .hv2-plan--featured { order: -1; }
    .ov2-addons { grid-template-columns: 1fr; max-width: 520px; }
    .ov2-cities { grid-template-columns: 1fr; }
    .ov2-steps { grid-template-columns: 1fr; }
    .ov2-step__card { text-align: left; }
    .ov2-step__time, .ov2-step__tag { align-self: flex-start; }
    .ov2-steps__foot .hv2-finder__go { width: 100%; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
    .ov2-range__fill { transition: none; transform: scaleX(1); }
    .ov2-range__marks span { opacity: 1; transition: none; }
    .ov2-tile--photo img, .ov2-tile--photo:hover img { transform: none; transition: none; }
}