/* ══════════════════════════════════════════════════════════════════════
   HERO DUAL + BÚSQUEDA ÁGIL
   ══════════════════════════════════════════════════════════════════════
   Layer encima del .hero-fullscreen existente (home-modern.css). Define el
   layout de dos columnas dentro del hero (búsqueda ágil a la izquierda,
   búsqueda tradicional a la derecha) y la animación cinemática "zoom-in"
   cuando el usuario inicia la búsqueda ágil.

   Estética: oscura cinemática con aurora — mismo lenguaje que el splash de
   bienvenida de la OV. Glassmorphism + halos teal + text-reveal.
   ══════════════════════════════════════════════════════════════════════ */

/* Variables locales para reusar en todo el bloque sin contaminar :root.
   El selector .hero-dual-shell acota el scope. */
.hero-dual-shell {
    --ag-teal:        #14b8a6;
    --ag-teal-light:  #5eead4;
    --ag-teal-deep:   #0f766e;
    --ag-violet:      #a78bfa;
    --ag-ink-100:     #f5f6fb;
    --ag-ink-300:     #c4c9d4;
    --ag-ink-400:     #8b90a0;
    --ag-glass-bg:    rgba(7, 32, 38, 0.42);
    --ag-glass-edge:  rgba(255, 255, 255, 0.10);
}

/* ── Layout principal ──────────────────────────────────────────────────
   Wrap encima del search-bar existente. Title + sub centrados arriba; dos
   columnas debajo (ágil | tradicional). En mobile colapsa a stack vertical
   con ágil arriba.

   max-width 1380px (antes 1200) — la card tradicional necesita más ancho
   para que los 4 fields (Tipo / Depto / Barrio / Dorm) + BUSCAR no se
   apilen en mobile-grande y queden todos en una fila. */
.hero-dual-shell {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 22px;
    width: 100%;
    max-width: 1380px;
    margin: 0 auto;
    /* padding-top más generoso: el contenido respira mejor abajo del navbar
       sin perder visibilidad del tagline en el primer fold. */
    padding: 110px 24px 0;
    position: relative;
    z-index: 3;
}

/* Tagline final del hero — mismo tamaño/peso que el subtítulo "Casas,
   apartamentos…". Sin negrita, color sutil para que no compita con el resto.
   margin-top 18px deja una separación clara con la box (no pegada) pero entra
   en el primer fold junto con el resto del hero. */
.hero-tagline {
    margin: 18px auto 0;
    max-width: 760px;
    text-align: center;
    color: rgba(255, 255, 255, 0.82);
    font-family: 'Sora', 'Inter', sans-serif;
    font-size: clamp(14px, 1.6vw, 16px);
    font-weight: 400;
    line-height: 1.45;
    letter-spacing: 0;
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
    position: relative;
    z-index: 3;
    padding: 0 16px;
}

.hero-dual-header {
    text-align: center;
    max-width: 760px;
    color: white;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
}

/* Eyebrow pill con dot tintineante. Reusa el patrón del splash de bienvenida
   (ovb-hero__eyebrow + ovb-dot) pero adaptado al fondo claro/oscuro del hero
   del home. */
.hero-dual-eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 6px 14px 6px 12px;
    border-radius: 999px;
    background: rgba(94, 234, 212, 0.10);
    border: 1px solid rgba(94, 234, 212, 0.32);
    color: #5eead4;
    font-family: 'Sora', 'Inter', sans-serif;
    font-size: 12.5px;
    font-weight: 600;
    letter-spacing: 0.02em;
    backdrop-filter: blur(8px);
    -webkit-backdrop-filter: blur(8px);
}
.hero-dual-eyebrow-dot {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #5eead4;
    box-shadow: 0 0 0 4px rgba(94, 234, 212, 0.18), 0 0 10px #5eead4;
    animation: heroEyebrowPulse 2s ease-in-out infinite;
}
@keyframes heroEyebrowPulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50%      { opacity: 0.55; transform: scale(0.82); }
}

.hero-dual-header h1 {
    margin: 0;
    font-family: 'Sora', 'Inter', sans-serif;
    /* Más chico que antes (34-64) para que no compita con el resto del hero. */
    font-size: clamp(28px, 3.6vw, 44px);
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -0.025em;
    text-shadow: 0 4px 28px rgba(0, 0, 0, 0.45);
}
.hero-dual-header p {
    margin: 0;
    font-size: clamp(14px, 1.6vw, 16px);
    color: rgba(255, 255, 255, 0.82);
    text-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
}

/* ══════════════════════════════════════════════════════════════════════
   BOX ÚNICA CON TOGGLE DE MODO
   ══════════════════════════════════════════════════════════════════════
   Una sola card centrada. Header con título + botón flecha que alterna
   entre Búsqueda Tradicional y Ágil. Los paneles están superpuestos
   (position: absolute) y la animación slide vertical hace que:
   - El panel saliente se deslice hacia abajo y se desvanezca.
   - El panel entrante baje desde arriba.
   ══════════════════════════════════════════════════════════════════════ */
.hero-single-box {
    position: relative;
    width: 100%;
    max-width: 880px;
    margin: 0 auto;
    border-radius: 20px;
    padding: 22px 30px 18px;
    overflow: hidden;
    color: white;
    backdrop-filter: blur(24px) saturate(120%);
    -webkit-backdrop-filter: blur(24px) saturate(120%);
    /* Background neutro/oscuro muy transparente — sin tinte teal ni violeta
       en el gradiente para no contaminar la foto de fondo del hero. El acento
       teal queda sólo en los acentos del contenido (eyebrow ágil, botón). */
    background: linear-gradient(135deg, rgba(15, 23, 42, 0.28) 0%, rgba(15, 23, 42, 0.22) 100%);
    border: 1px solid rgba(255, 255, 255, 0.12);
    box-shadow:
        0 24px 56px rgba(0, 0, 0, 0.28),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transition: min-height 420ms cubic-bezier(0.22, 1, 0.36, 1);
    display: flex;
    flex-direction: column;
    min-height: 340px;
}

/* Pista al pie de la box. */
.hero-single-box__hint {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    margin: 14px 0 0;
    padding-top: 14px;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    font-size: 12.5px;
    color: rgba(255, 255, 255, 0.55);
    font-weight: 500;
    letter-spacing: 0.01em;
}
.hero-single-box__hint svg { color: var(--ag-teal-light); }

/* Cuando el wizard ágil está expandido la box crece un poco para acomodar
   el wizard sin desbordarse. */
.hero-dual-shell--agil-expanded .hero-single-box {
    min-height: 460px;
}

.hero-single-box__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 18px;
    position: relative;
    z-index: 2;
}

.hero-single-box__title-wrap {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
}

.hero-single-box__eyebrow {
    display: inline-flex;
    align-items: center;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    background: rgba(255, 255, 255, 0.08);
    color: var(--ag-ink-300);
    transition: background 320ms ease, color 320ms ease;
}
/* Eyebrow teal cuando estamos en modo ágil. */
.hero-single-box--agil .hero-single-box__eyebrow {
    background: linear-gradient(135deg, var(--ag-teal-light), var(--ag-teal));
    color: #052e2b;
    box-shadow: 0 4px 12px rgba(94, 234, 212, 0.45);
}

.hero-single-box__title {
    margin: 0;
    font-family: 'Sora', 'Inter', sans-serif;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
    color: white;
}

/* Botón flecha que alterna modos. Hover: scale + rotate sutil + halo teal. */
.hero-mode-toggle {
    flex-shrink: 0;
    width: 48px;
    height: 48px;
    border-radius: 14px;
    background: rgba(94, 234, 212, 0.12);
    border: 1px solid rgba(94, 234, 212, 0.32);
    color: var(--ag-teal-light);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition:
        transform 360ms cubic-bezier(0.22, 1, 0.36, 1),
        background 240ms ease,
        border-color 240ms ease,
        box-shadow 240ms ease;
}
.hero-mode-toggle:hover {
    transform: scale(1.08) rotate(180deg);
    background: rgba(94, 234, 212, 0.22);
    border-color: rgba(94, 234, 212, 0.55);
    box-shadow: 0 8px 22px -6px rgba(94, 234, 212, 0.45);
}
.hero-mode-toggle:active { transform: scale(1.02) rotate(180deg); }

/* Body con los paneles superpuestos. */
.hero-single-box__body {
    position: relative;
    flex: 1;
    min-height: 230px;
}

/* Cada panel ocupa el mismo espacio. Por default está hidden ARRIBA
   (translateY negativo) — preparado para entrar bajando desde arriba.
   .is-active = visible. .is-exiting = se va abajo + fade. */
.hero-mode-panel {
    position: absolute;
    inset: 0;
    opacity: 0;
    transform: translateY(-32px);
    pointer-events: none;
    transition:
        opacity 280ms ease,
        transform 380ms cubic-bezier(0.22, 1, 0.36, 1),
        visibility 0s linear 280ms;
    visibility: hidden;
}
.hero-mode-panel.is-active {
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
    visibility: visible;
    transition:
        opacity 320ms ease 80ms,
        transform 420ms cubic-bezier(0.22, 1, 0.36, 1) 80ms,
        visibility 0s linear 0s;
}
.hero-mode-panel.is-exiting {
    opacity: 0;
    transform: translateY(32px);
    pointer-events: none;
    visibility: visible;
}

.hero-mode-panel__sub {
    margin: 0 0 16px;
    font-size: 14px;
    color: var(--ag-ink-300);
    line-height: 1.45;
}

/* La search-bar existente se reusa con padding/margins reseteados. */
.hero-mode-panel--tradicional .search-bar {
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: none !important;
}

/* ── Cards base ──────────────────────────────────────────────────────── */
.hero-card {
    position: relative;
    border-radius: 22px;
    padding: 28px 26px;
    overflow: hidden;
    display: flex;
    flex-direction: column;
    color: white;
    backdrop-filter: blur(22px);
    -webkit-backdrop-filter: blur(22px);
    transition:
        transform 600ms cubic-bezier(0.22, 1, 0.36, 1),
        opacity 400ms ease,
        box-shadow 400ms ease,
        border-color 400ms ease;
    will-change: transform, opacity;
}

/* Header común dentro de las cards (label corto + título grande). */
.hero-card__eyebrow {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    align-self: flex-start;
    padding: 5px 12px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 14px;
}
.hero-card__title {
    margin: 0 0 6px;
    font-family: 'Sora', 'Inter', sans-serif;
    font-size: 26px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.1;
}
.hero-card__sub {
    margin: 0 0 22px;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ag-ink-300);
}

/* ── Card ÁGIL + TRADICIONAL — MISMO LOOK ──────────────────────────────
   Ambas cards comparten el background con gradiente teal + halo radial,
   borde teal y sombra. La distinción visual está sólo en el eyebrow y
   en el contenido (botones ágil vs filtros). */
.hero-card--agil,
.hero-card--tradicional {
    background:
        radial-gradient(circle at 0% 0%, rgba(94, 234, 212, 0.16), transparent 55%),
        radial-gradient(circle at 100% 100%, rgba(167, 139, 250, 0.12), transparent 60%),
        linear-gradient(135deg, rgba(7, 32, 38, 0.6) 0%, rgba(10, 39, 37, 0.55) 100%);
    border: 1px solid rgba(94, 234, 212, 0.24);
    box-shadow:
        0 24px 60px rgba(0, 0, 0, 0.32),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
}
.hero-card--agil .hero-card__eyebrow {
    background: linear-gradient(135deg, var(--ag-teal-light), var(--ag-teal));
    color: #052e2b;
    box-shadow: 0 4px 12px rgba(94, 234, 212, 0.45);
}

/* Acciones: dos botones grandes (Comprar / Alquilar) lado a lado. ARRIBA
   en la card (después del título), no al pie. */
.hero-agil-actions {
    position: relative;
    z-index: 1;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px;
    margin-top: 18px;
}

/* Texto explicativo cerca de los botones — no al pie de la card. */
.hero-agil-footnote {
    margin: 14px 0 0;
    font-size: 13px;
    line-height: 1.45;
    color: var(--ag-ink-400);
}

/* ── Teaser ágil profesional ─────────────────────────────────────────── */
.hero-agil-teaser {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    text-align: center;
    min-height: 260px;
    gap: 26px;
    padding: 6px 8px;
}
.hero-agil-teaser__lead {
    margin: 0;
    max-width: 540px;
    font-size: 16px;
    line-height: 1.55;
    color: rgba(255, 255, 255, 0.78);
    font-weight: 400;
}
.hero-agil-teaser__lead strong {
    color: var(--ag-teal-light);
    font-weight: 700;
}

/* Grid de 2 CTAs ricas: cada una con ícono SVG + título + subtítulo. */
.hero-agil-cta-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 14px;
    width: 100%;
    max-width: 560px;
}

.hero-agil-cta {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 18px 18px 18px 16px;
    background: rgba(255, 255, 255, 0.04);
    border: 1.5px solid rgba(94, 234, 212, 0.28);
    border-radius: 14px;
    color: white;
    text-align: left;
    cursor: pointer;
    overflow: hidden;
    transition:
        transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
        border-color 240ms ease,
        background 240ms ease,
        box-shadow 280ms ease;
    box-shadow: 0 8px 20px -10px rgba(0, 0, 0, 0.35);
}
.hero-agil-cta:hover {
    transform: translateY(-3px);
    border-color: rgba(94, 234, 212, 0.75);
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.18), rgba(94, 234, 212, 0.08));
    box-shadow:
        0 18px 36px -10px rgba(94, 234, 212, 0.4),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.hero-agil-cta:hover .hero-agil-cta__chev { transform: translateX(4px); color: var(--ag-teal-light); }
.hero-agil-cta:hover .hero-agil-cta__icon {
    background: linear-gradient(135deg, var(--ag-teal-light), var(--ag-teal));
    color: #052e2b;
    transform: scale(1.05) rotate(-3deg);
}
.hero-agil-cta:active { transform: translateY(-1px); }

/* Shine diagonal en hover */
.hero-agil-cta::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(115deg, transparent 35%, rgba(255, 255, 255, 0.14) 50%, transparent 65%);
    transform: translateX(-120%);
    transition: transform 800ms cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}
.hero-agil-cta:hover::after { transform: translateX(120%); }

.hero-agil-cta__icon {
    flex-shrink: 0;
    width: 44px;
    height: 44px;
    border-radius: 12px;
    background: rgba(94, 234, 212, 0.14);
    border: 1px solid rgba(94, 234, 212, 0.28);
    color: var(--ag-teal-light);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 280ms cubic-bezier(0.34, 1.56, 0.64, 1);
}

.hero-agil-cta__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
    gap: 2px;
}
.hero-agil-cta__title {
    font-family: 'Sora', 'Inter', sans-serif;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: white;
    line-height: 1.2;
}
.hero-agil-cta__sub {
    font-size: 12.5px;
    color: var(--ag-ink-400);
    font-weight: 500;
    line-height: 1.3;
}

.hero-agil-cta__chev {
    flex-shrink: 0;
    color: var(--ag-ink-400);
    transition: transform 240ms ease, color 240ms ease;
}

/* Perks debajo de los CTAs — chips de check con info de la experiencia. */
.hero-agil-teaser__perks {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 18px;
    margin-top: 6px;
}
.hero-agil-perk {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
}
.hero-agil-perk svg { color: var(--ag-teal-light); flex-shrink: 0; }

/* Ambos botones (Comprar y Alquilar) son visualmente idénticos — mismo
   color, mismo borde, mismo hover. La diferencia está sólo en el label.
   El acento teal está presente siempre (no solo en hover) para que la
   card ágil tenga personalidad visual desde el primer instant. */
.hero-agil-btn {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 24px 18px;
    border: 1.5px solid rgba(94, 234, 212, 0.32);
    border-radius: 16px;
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.18), rgba(15, 118, 110, 0.12));
    color: white;
    font-family: 'Sora', 'Inter', sans-serif;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.01em;
    cursor: pointer;
    overflow: hidden;
    box-shadow:
        0 8px 22px -8px rgba(20, 184, 166, 0.25),
        inset 0 1px 0 rgba(255, 255, 255, 0.06);
    transition:
        transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
        border-color 280ms ease,
        background 280ms ease,
        box-shadow 280ms ease;
}
.hero-agil-btn:hover {
    transform: translateY(-3px) scale(1.02);
    border-color: rgba(94, 234, 212, 0.75);
    background: linear-gradient(135deg, rgba(20, 184, 166, 0.3), rgba(15, 118, 110, 0.22));
    box-shadow:
        0 18px 36px -10px rgba(94, 234, 212, 0.45),
        inset 0 1px 0 rgba(255, 255, 255, 0.12);
}
.hero-agil-btn:active { transform: translateY(-1px) scale(0.99); }

/* Shine diagonal en hover — efecto premium. */
.hero-agil-btn::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(
        115deg,
        transparent 35%,
        rgba(255, 255, 255, 0.18) 50%,
        transparent 65%
    );
    transform: translateX(-120%);
    transition: transform 700ms cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
}
.hero-agil-btn:hover::after { transform: translateX(120%); }

/* ── Card TRADICIONAL — eyebrow override ────────────────────────────────
   El background ya viene del bloque "Card ÁGIL + TRADICIONAL — MISMO LOOK"
   más arriba. Sólo overrideamos el eyebrow (no es teal como el ágil). */
.hero-card--tradicional .hero-card__eyebrow {
    background: rgba(255, 255, 255, 0.08);
    color: var(--ag-ink-300);
}

/* La search-bar existente se reusa pero con padding/margins reseteados
   para que encaje dentro de la card sin doble fondo. */
.hero-card--tradicional .search-bar {
    background: transparent !important;
    padding: 0 !important;
    box-shadow: none !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    border: none !important;
    margin: 0 !important;
    width: 100% !important;
    max-width: none !important;
}

/* ══════════════════════════════════════════════════════════════════════
   MODO EXPANDIDO — efecto zoom cinemático
   ══════════════════════════════════════════════════════════════════════
   Al hacer click en Comprar/Alquilar:
   1. Se agrega .hero-dual-shell--agil-expanded al shell.
   2. El header y la card tradicional fade+slide-out.
   3. La card ágil escala, se centra y ocupa todo el grid.
   4. El interior cambia: el teaser fade-out, el wizard fade-in.
   ══════════════════════════════════════════════════════════════════════ */

/* El header del hero queda visible siempre — incluso cuando el wizard
   ágil está expandido. Antes lo ocultábamos pero el user prefiere que
   "Busca tu próxima propiedad…" se mantenga arriba para contexto. */

/* Interior del panel ágil — teaser + wizard superpuestos con cross-fade. */
.hero-mode-panel--agil .hero-agil-teaser,
.hero-mode-panel--agil .hero-agil-wizard {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
}

/* Teaser visible por default (cuando NO está expandido). */
.hero-mode-panel--agil .hero-agil-teaser {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity 280ms ease, transform 360ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 280ms;
}

/* Wizard hidden por default. */
.hero-mode-panel--agil .hero-agil-wizard {
    opacity: 0;
    visibility: hidden;
    transform: translateY(16px);
    pointer-events: none;
    transition: opacity 280ms ease, transform 360ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 280ms;
}

/* Cuando agilExpandido=true, swap. */
.hero-dual-shell--agil-expanded .hero-mode-panel--agil .hero-agil-teaser {
    opacity: 0;
    visibility: hidden;
    transform: translateY(-16px);
    pointer-events: none;
}
.hero-dual-shell--agil-expanded .hero-mode-panel--agil .hero-agil-wizard {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
    transition: opacity 320ms ease 120ms, transform 420ms cubic-bezier(0.22, 1, 0.36, 1) 120ms, visibility 0s linear 120ms;
}

/* ── Wizard inline — versión compacta para vivir dentro de la card ──── */
.hero-agil-wizard__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 4px;
}
.hero-agil-wizard__steps {
    display: flex;
    align-items: center;
    gap: 5px;
}
.hero-agil-step-dot {
    width: 22px;
    height: 3px;
    border-radius: 3px;
    background: rgba(255, 255, 255, 0.18);
    transition: background 260ms ease, width 260ms ease;
}
.hero-agil-step-dot--active {
    background: linear-gradient(90deg, var(--ag-teal-light), var(--ag-teal));
    width: 32px;
}
.hero-agil-step-dot--done {
    background: var(--ag-teal-deep);
}
.hero-agil-wizard__close {
    background: rgba(255, 255, 255, 0.08);
    border: 1px solid rgba(255, 255, 255, 0.14);
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 10px;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: background 200ms ease, transform 200ms ease;
}
.hero-agil-wizard__close:hover {
    background: rgba(239, 68, 68, 0.2);
    border-color: rgba(239, 68, 68, 0.4);
    transform: rotate(90deg);
}

.hero-agil-wizard__body {
    display: flex;
    flex-direction: column;
    flex: 1;
    margin-top: 12px;
    position: relative;
    min-height: 240px;
    text-align: center;
}

.hero-agil-wizard__question {
    font-family: 'Sora', 'Inter', sans-serif;
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.01em;
    color: white;
    margin: 0 0 2px;
}
.hero-agil-wizard__hint {
    font-size: 12.5px;
    color: var(--ag-ink-300);
    margin: 0 auto 14px;
    max-width: 520px;
    line-height: 1.5;
}

/* Variante con dos líneas separadas (caso alquiler que aclara qué incluye
   el presupuesto y agrega una pista de filtro estricto debajo). Cada
   `<span>` queda en su línea. */
.hero-agil-wizard__hint--stack {
    display: flex;
    flex-direction: column;
    gap: 4px;
    align-items: center;
}
.hero-agil-wizard__hint-secondary {
    color: var(--ag-ink-400);
    font-size: 11.5px;
}

/* Cada paso es un .hero-agil-step que entra/sale con animación slide. */
.hero-agil-step {
    display: flex;
    flex-direction: column;
    flex: 1;
    opacity: 0;
    transform: translateX(30px);
    transition:
        opacity 320ms ease,
        transform 420ms cubic-bezier(0.22, 1, 0.36, 1);
    pointer-events: none;
    position: absolute;
    inset: 0;
    align-items: stretch;
}
.hero-agil-step--active {
    opacity: 1;
    transform: translateX(0);
    pointer-events: auto;
    position: relative;
}
.hero-agil-step--prev {
    transform: translateX(-30px);
}

/* Grid de opciones (barrios del paso 3) en matriz 4x4 — más compacto y
   visualmente ordenado que un wrap automático. En pantallas <600px baja a 2. */
.hero-agil-options {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 10px;
    max-height: 260px;
    overflow-y: auto;
    padding-right: 4px;
    margin-top: 8px;
}
@media (max-width: 600px) {
    .hero-agil-options {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}
.hero-agil-options::-webkit-scrollbar { width: 4px; }
.hero-agil-options::-webkit-scrollbar-track { background: transparent; }
.hero-agil-options::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.12);
    border-radius: 4px;
}

.hero-agil-option {
    position: relative;
    padding: 9px 10px;
    border: 1px solid rgba(255, 255, 255, 0.12);
    border-radius: 10px;
    background: rgba(255, 255, 255, 0.04);
    color: white;
    font-size: 12.5px;
    font-weight: 600;
    text-align: center;
    cursor: pointer;
    overflow: hidden;
    transition:
        transform 240ms cubic-bezier(0.22, 1, 0.36, 1),
        border-color 240ms ease,
        background 240ms ease;
    opacity: 0;
    transform: translateY(8px);
    animation: agilOptionIn 420ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
    animation-delay: calc(var(--i, 0) * 35ms);
}
@keyframes agilOptionIn {
    to { opacity: 1; transform: translateY(0); }
}
.hero-agil-option:hover {
    transform: translateY(-2px);
    border-color: rgba(94, 234, 212, 0.5);
    background: rgba(94, 234, 212, 0.1);
}
.hero-agil-option__label {
    display: block;
    font-weight: 700;
    letter-spacing: -0.01em;
}
.hero-agil-option__count {
    display: block;
    margin-top: 4px;
    font-size: 12px;
    color: var(--ag-ink-400);
    font-weight: 500;
}

.hero-agil-option--selected {
    border-color: rgba(94, 234, 212, 0.7);
    background: linear-gradient(135deg, rgba(94, 234, 212, 0.18), rgba(20, 184, 166, 0.1));
    box-shadow: 0 8px 22px -8px rgba(94, 234, 212, 0.45);
}

/* ── Dropdown grande para el paso 1 (departamento) ───────────────────── */
.hero-agil-select-wrap {
    display: flex;
    justify-content: center;
    margin-top: 8px;
}
.hero-agil-select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    width: 100%;
    max-width: 420px;
    padding: 16px 48px 16px 22px;
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.18);
    border-radius: 14px;
    color: white;
    font-family: 'Sora', 'Inter', sans-serif;
    font-size: 17px;
    font-weight: 600;
    letter-spacing: -0.01em;
    cursor: pointer;
    outline: none;
    /* Chevron custom para no depender del nativo del browser, que sobre el
       fondo oscuro queda casi invisible. */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235eead4' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'><polyline points='6 9 12 15 18 9'/></svg>");
    background-repeat: no-repeat;
    background-position: right 18px center;
    background-size: 18px 18px;
    transition: border-color 240ms ease, box-shadow 240ms ease, background-color 240ms ease;
}
.hero-agil-select:hover {
    border-color: rgba(94, 234, 212, 0.45);
    background-color: rgba(255, 255, 255, 0.07);
}
.hero-agil-select:focus {
    border-color: rgba(94, 234, 212, 0.7);
    box-shadow: 0 0 0 4px rgba(94, 234, 212, 0.18);
    background-color: rgba(255, 255, 255, 0.08);
}
.hero-agil-select option {
    /* Las opciones del nativo se renderizan en el browser, no podemos darles
       teal — pero al menos forzamos fondo oscuro para que sean legibles. */
    background: #0f172a;
    color: white;
}

/* Paso 2: input de presupuesto + toggle de moneda — versión compacta, centrada. */
.hero-agil-budget {
    display: flex;
    flex-direction: column;
    gap: 12px;
    margin-top: 2px;
    align-items: center;
    width: 100%;
}
.hero-agil-currency-toggle {
    display: inline-flex;
    background: rgba(255, 255, 255, 0.06);
    border-radius: 10px;
    padding: 3px;
    gap: 3px;
}
.hero-agil-currency-toggle button {
    padding: 6px 16px;
    background: transparent;
    border: none;
    color: var(--ag-ink-300);
    border-radius: 8px;
    cursor: pointer;
    font-weight: 700;
    font-size: 12px;
    font-family: 'Sora', 'Inter', sans-serif;
    transition: background 200ms ease, color 200ms ease;
}
.hero-agil-currency-toggle button.is-active {
    background: linear-gradient(135deg, var(--ag-teal-light), var(--ag-teal));
    color: #052e2b;
    box-shadow: 0 4px 12px rgba(94, 234, 212, 0.4);
}
.hero-agil-budget-input {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.14);
    border-radius: 12px;
    padding: 14px 18px;
    width: 100%;
    max-width: 320px;
    transition: border-color 240ms ease, box-shadow 240ms ease;
}
.hero-agil-budget-input:focus-within {
    border-color: rgba(94, 234, 212, 0.6);
    box-shadow: 0 0 0 4px rgba(94, 234, 212, 0.15);
}
.hero-agil-budget-input__prefix {
    font-family: 'Sora', 'Inter', sans-serif;
    font-size: 22px;
    font-weight: 700;
    color: var(--ag-teal-light);
    margin-right: 10px;
    letter-spacing: -0.02em;
}
.hero-agil-budget-input input {
    flex: 1;
    background: transparent;
    border: none;
    outline: none;
    color: white;
    font-family: 'Sora', 'Inter', sans-serif;
    font-size: 22px;
    font-weight: 700;
    letter-spacing: -0.02em;
    text-align: center;
    width: 100%;
    -moz-appearance: textfield;
}
.hero-agil-budget-input input::-webkit-outer-spin-button,
.hero-agil-budget-input input::-webkit-inner-spin-button {
    -webkit-appearance: none;
    margin: 0;
}
.hero-agil-budget-input input::placeholder { color: rgba(255, 255, 255, 0.25); }

.hero-agil-budget-presets {
    display: flex;
    flex-wrap: wrap;
    gap: 5px;
    justify-content: center;
    margin-top: 2px;
}
.hero-agil-budget-presets button {
    padding: 5px 11px;
    background: rgba(255, 255, 255, 0.06);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: var(--ag-ink-300);
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    cursor: pointer;
    transition: all 200ms ease;
    font-family: 'Sora', 'Inter', sans-serif;
}
.hero-agil-budget-presets button:hover {
    background: rgba(94, 234, 212, 0.12);
    border-color: rgba(94, 234, 212, 0.4);
    color: white;
}

/* Footer del wizard: botones Volver y Siguiente — más compactos. */
.hero-agil-wizard__footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 10px;
    margin-top: 14px;
}
.hero-agil-btn--back {
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.18);
    color: var(--ag-ink-300);
    padding: 9px 16px;
    border-radius: 10px;
    font-weight: 600;
    cursor: pointer;
    font-family: 'Sora', 'Inter', sans-serif;
    font-size: 13px;
    transition: all 220ms ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.hero-agil-btn--back:hover {
    background: rgba(255, 255, 255, 0.08);
    color: white;
    border-color: rgba(255, 255, 255, 0.32);
}
.hero-agil-btn--back:disabled { opacity: 0.4; cursor: not-allowed; }

.hero-agil-btn--next {
    background: linear-gradient(135deg, var(--ag-teal-light), var(--ag-teal));
    color: #052e2b;
    border: none;
    padding: 10px 22px;
    border-radius: 10px;
    font-weight: 800;
    cursor: pointer;
    font-family: 'Sora', 'Inter', sans-serif;
    font-size: 13px;
    box-shadow: 0 8px 22px -8px rgba(94, 234, 212, 0.55);
    transition: transform 220ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 220ms ease;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.hero-agil-btn--next:hover {
    transform: translateY(-2px);
    box-shadow: 0 16px 32px -10px rgba(94, 234, 212, 0.7);
}
.hero-agil-btn--next:disabled {
    opacity: 0.4;
    cursor: not-allowed;
    transform: none;
    box-shadow: none;
}

/* Loading inline mientras se buscan barrios disponibles. */
.hero-agil-loading {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 22px;
    color: var(--ag-ink-300);
    font-size: 14px;
}
.hero-agil-spinner {
    width: 24px;
    height: 24px;
    border: 2.5px solid rgba(94, 234, 212, 0.18);
    border-top-color: var(--ag-teal-light);
    border-radius: 50%;
    animation: agilSpin 0.8s linear infinite;
}
@keyframes agilSpin { to { transform: rotate(360deg); } }

.hero-agil-empty {
    text-align: center;
    padding: 24px 16px;
    color: var(--ag-ink-300);
    font-size: 14px;
    line-height: 1.5;
}
.hero-agil-empty strong {
    display: block;
    color: white;
    font-size: 16px;
    margin-bottom: 6px;
}

/* ── Responsive ──────────────────────────────────────────────────────── */
@media (max-width: 900px) {
    .hero-dual-grid {
        grid-template-columns: 1fr;
        gap: 16px;
    }
    .hero-card { padding: 22px 20px; }
    .hero-card__title { font-size: 22px; }
    .hero-card-quote { font-size: 17px; }
    .hero-agil-btn { padding: 18px 14px; font-size: 15px; }
    .hero-agil-btn__icon { font-size: 24px; }
}

@media (max-width: 600px) {
    .hero-dual-shell { padding: 16px 12px 0; gap: 24px; }
    .hero-dual-header h1 { font-size: clamp(28px, 8vw, 42px); }
    .hero-dual-header p { font-size: 14px; }
    .hero-agil-wizard__question { font-size: 18px; }
    .hero-agil-options { grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
}