/* =========================================================
   Banana Friends · Amigos / páginas locales
   Diseño de producción · fantasía suave + glass UI
   ========================================================= */

:root {
    --seo-ink: #111116;
    --seo-ink-soft: #25252d;
    --seo-muted: #6f7079;
    --seo-muted-2: #8c8d96;
    --seo-line: rgba(32, 26, 34, .09);
    --seo-line-strong: rgba(32, 26, 34, .14);
    --seo-white: #fff;
    --seo-cream: #fffaf6;
    --seo-pink: #ff075f;
    --seo-rose: #ff2f79;
    --seo-orange: #ff7417;
    --seo-coral: #ff6651;
    --seo-purple: #805cff;
    --seo-green: #49b74d;
    --seo-shadow: 0 28px 80px rgba(54, 27, 38, .10);
    --seo-shadow-soft: 0 16px 46px rgba(50, 27, 38, .075);
    --seo-radius-xl: 40px;
    --seo-radius-lg: 28px;
    --seo-radius-md: 20px;
    --seo-grad: linear-gradient(120deg, var(--seo-pink) 0%, #ff235d 38%, var(--seo-orange) 100%);
    --seo-grad-soft: linear-gradient(135deg, rgba(255, 7, 95, .12), rgba(255, 116, 23, .12));
}

.seo-hub-body,
.seo-local-body {
    background:
        radial-gradient(circle at 10% 8%, rgba(255, 183, 157, .19), transparent 31rem),
        radial-gradient(circle at 93% 24%, rgba(255, 63, 132, .11), transparent 28rem),
        linear-gradient(#fffdfb, #fffaf7 52%, #fffdfb);
}

.seo-hub-body::before,
.seo-local-body::before {
    content: "";
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: -1;
    opacity: .58;
    background-image: radial-gradient(rgba(255, 83, 100, .12) .7px, transparent .7px);
    background-size: 18px 18px;
    mask-image: linear-gradient(to bottom, #000 0, transparent 50%);
}

.seo-local-page {
    width: min(1220px, calc(100% - 40px));
    margin: 0 auto;
    padding: 112px 0 80px;
    color: var(--seo-ink);
}

.seo-local-page *,
.seo-local-page *::before,
.seo-local-page *::after {
    box-sizing: border-box;
}

.seo-local-page a {
    color: inherit;
    text-decoration: none;
}

.seo-local-page svg {
    width: 1em;
    height: 1em;
    fill: none;
    stroke: currentColor;
    stroke-width: 1.85;
    stroke-linecap: round;
    stroke-linejoin: round;
}

.seo-breadcrumb {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0 0 20px;
    padding: 0 4px;
    font-size: 12px;
    font-weight: 760;
    color: #8a7f84;
}

.seo-breadcrumb a {
    transition: color .18s ease;
}

.seo-breadcrumb a:hover {
    color: var(--seo-pink);
}

.seo-local-page a:focus-visible,
.seo-local-page button:focus-visible,
.seo-local-page input:focus-visible {
    outline: 3px solid rgba(255, 7, 95, .24);
    outline-offset: 3px;
}

/* =========================================================
   HUB /AMIGOS
   ========================================================= */

.seo-hub-page {
    overflow: clip;
}

.seo-hub-hero {
    position: relative;
    isolation: isolate;
    display: grid;
    grid-template-columns: minmax(0, 1.02fr) minmax(400px, .78fr);
    gap: clamp(28px, 4vw, 68px);
    min-height: 720px;
    padding: clamp(34px, 5vw, 72px);
    overflow: hidden;
    border: 1px solid rgba(255, 255, 255, .78);
    border-radius: 46px;
    background:
        linear-gradient(130deg, rgba(255, 255, 255, .97) 0%, rgba(255, 248, 243, .95) 53%, rgba(255, 239, 244, .92) 100%);
    box-shadow: 0 42px 120px rgba(75, 32, 45, .11);
}

.seo-hub-hero::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 7, 95, .22), rgba(255, 116, 23, .22), transparent);
}

.seo-hub-hero__aurora {
    position: absolute;
    z-index: -2;
    border-radius: 50%;
    filter: blur(14px);
    pointer-events: none;
}

.seo-hub-hero__aurora--one {
    width: 620px;
    height: 620px;
    right: -210px;
    top: -210px;
    background: radial-gradient(circle, rgba(255, 126, 95, .24), rgba(255, 57, 116, .08) 48%, transparent 70%);
}

.seo-hub-hero__aurora--two {
    width: 480px;
    height: 480px;
    left: 25%;
    bottom: -330px;
    background: radial-gradient(circle, rgba(255, 102, 35, .16), transparent 68%);
}

.seo-hub-rings {
    position: absolute;
    z-index: -1;
    right: -150px;
    top: -150px;
    width: 560px;
    height: 560px;
    border-radius: 50%;
    opacity: .7;
    pointer-events: none;
}

.seo-hub-rings i {
    position: absolute;
    inset: 0;
    border: 1.5px solid rgba(255, 96, 80, .16);
    border-radius: 50%;
}

.seo-hub-rings i:nth-child(2) { inset: 72px; }
.seo-hub-rings i:nth-child(3) { inset: 144px; }

.seo-hub-hero__content,
.seo-hub-visual {
    position: relative;
    z-index: 2;
}

.seo-hub-hero__content {
    display: flex;
    flex-direction: column;
    justify-content: center;
    min-width: 0;
}

.seo-hub-kicker,
.seo-hub-eyebrow,
.seo-city-kicker,
.seo-city-section-head > span,
.seo-city-story__copy > span,
.seo-city-final small,
.seo-hub-final__copy small {
    font-size: 11px;
    font-weight: 950;
    letter-spacing: .16em;
    text-transform: uppercase;
}

.seo-hub-kicker {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    align-self: flex-start;
    padding: 9px 12px 9px 10px;
    border: 1px solid rgba(255, 7, 95, .11);
    border-radius: 999px;
    color: #8f6170;
    background: rgba(255, 255, 255, .68);
    box-shadow: 0 10px 32px rgba(80, 44, 50, .06);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
}

.seo-hub-kicker i {
    display: grid;
    place-items: center;
    width: 27px;
    height: 27px;
    border-radius: 50%;
    color: #fff;
    background: var(--seo-grad);
    box-shadow: 0 7px 18px rgba(255, 7, 95, .23);
}

.seo-hub-kicker svg { font-size: 14px; }

.seo-hub-hero h1 {
    max-width: 720px;
    margin: 22px 0 18px;
    font-size: clamp(54px, 6.2vw, 88px);
    line-height: .91;
    letter-spacing: -.065em;
    font-weight: 950;
}

.seo-hub-hero h1 em,
.seo-hub-section-head h2 em {
    font-style: normal;
    background: linear-gradient(105deg, var(--seo-pink) 4%, #ff405d 46%, var(--seo-orange) 94%);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.seo-hub-hero__content > p {
    max-width: 650px;
    margin: 0;
    color: #66666f;
    font-size: clamp(17px, 1.65vw, 20px);
    line-height: 1.62;
    font-weight: 520;
}

.seo-hub-search-wrap {
    margin-top: 28px;
}

.seo-hub-search-label {
    display: block;
    margin: 0 0 9px 5px;
    color: #9a6c77;
    font-size: 10px;
    font-weight: 950;
    letter-spacing: .14em;
}

.seo-hub-search-shell {
    position: relative;
    display: flex;
    align-items: center;
    max-width: 690px;
    min-height: 66px;
    padding: 7px 146px 7px 55px;
    border: 1px solid rgba(255, 86, 97, .14);
    border-radius: 21px;
    background: rgba(255, 255, 255, .88);
    box-shadow: 0 17px 44px rgba(62, 34, 43, .08), inset 0 1px 0 #fff;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

.seo-hub-search-shell:focus-within {
    transform: translateY(-1px);
    border-color: rgba(255, 7, 95, .32);
    box-shadow: 0 22px 55px rgba(255, 31, 92, .12), 0 0 0 4px rgba(255, 7, 95, .06);
}

.seo-hub-search-icon {
    position: absolute;
    left: 20px;
    top: 50%;
    transform: translateY(-50%);
    display: grid;
    place-items: center;
    width: 28px;
    height: 28px;
    color: var(--seo-pink);
}

.seo-hub-search-icon svg { font-size: 22px; }

.seo-hub-search-shell input {
    width: 100%;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    color: var(--seo-ink);
    font: inherit;
    font-size: 15px;
    font-weight: 760;
}

.seo-hub-search-shell input::placeholder {
    color: #a3a0a5;
    font-weight: 600;
}

.seo-hub-search-count {
    position: absolute;
    right: 13px;
    top: 50%;
    transform: translateY(-50%);
    max-width: 124px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    padding: 8px 11px;
    border-radius: 999px;
    color: #9a5f6d;
    background: #fff4f6;
    font-size: 10px;
    font-weight: 900;
}

.seo-hub-search-clear {
    position: absolute;
    right: 128px;
    top: 50%;
    transform: translateY(-50%) scale(.8);
    display: grid;
    place-items: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: 50%;
    color: #8e8990;
    background: #f7f4f5;
    cursor: pointer;
    opacity: 0;
    pointer-events: none;
    transition: opacity .18s ease, transform .18s ease;
}

.seo-hub-search-clear.is-visible {
    opacity: 1;
    pointer-events: auto;
    transform: translateY(-50%) scale(1);
}

.seo-hub-search-clear svg { font-size: 15px; }

.seo-hub-quick {
    display: flex;
    align-items: center;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: 13px;
}

.seo-hub-quick > span {
    margin-right: 2px;
    color: #9a9499;
    font-size: 11px;
    font-weight: 760;
}

.seo-hub-quick a {
    padding: 6px 9px;
    border: 1px solid rgba(36, 26, 31, .07);
    border-radius: 999px;
    color: #625d61;
    background: rgba(255, 255, 255, .58);
    font-size: 10px;
    font-weight: 850;
    transition: .18s ease;
}

.seo-hub-quick a:hover {
    color: var(--seo-pink);
    border-color: rgba(255, 7, 95, .18);
    background: #fff;
    transform: translateY(-1px);
}

.seo-hub-hero__actions,
.seo-hub-final__actions,
.seo-city-hero__actions,
.seo-city-final__actions {
    display: flex;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 25px;
}

.seo-hub-btn,
.seo-city-btn {
    min-height: 54px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    padding: 0 21px;
    border: 1px solid var(--seo-line);
    border-radius: 17px;
    font-size: 13px;
    font-weight: 920;
    box-shadow: 0 12px 30px rgba(44, 26, 32, .06);
    transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.seo-hub-btn svg,
.seo-city-btn svg { font-size: 19px; }

.seo-hub-btn:hover,
.seo-city-btn:hover {
    transform: translateY(-2px);
    box-shadow: 0 17px 38px rgba(44, 26, 32, .11);
}

.seo-hub-btn--primary,
.seo-city-btn--primary {
    color: #fff;
    border-color: transparent;
    background: var(--seo-grad);
    box-shadow: 0 16px 36px rgba(255, 7, 95, .22), inset 0 1px 0 rgba(255, 255, 255, .25);
}

.seo-hub-btn--primary:hover,
.seo-city-btn--primary:hover {
    box-shadow: 0 20px 45px rgba(255, 7, 95, .28), inset 0 1px 0 rgba(255, 255, 255, .28);
}

.seo-hub-btn--glass,
.seo-city-btn--glass {
    background: rgba(255, 255, 255, .78);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
}

.seo-hub-btn--dark,
.seo-city-btn--dark {
    color: #fff;
    border-color: rgba(255, 255, 255, .13);
    background: rgba(255, 255, 255, .09);
}

.seo-hub-trust {
    display: flex;
    gap: 14px;
    flex-wrap: wrap;
    margin-top: 20px;
    color: #8b8589;
}

.seo-hub-trust span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 10px;
    font-weight: 800;
}

.seo-hub-trust svg { font-size: 13px; color: var(--seo-pink); }

/* Phone visual */
.seo-hub-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 0;
}

.seo-friends-phone {
    position: relative;
    width: min(100%, 430px);
    padding: 18px;
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 42px;
    background: rgba(255, 255, 255, .73);
    box-shadow: 0 34px 80px rgba(60, 25, 39, .16), inset 0 1px 0 #fff;
    -webkit-backdrop-filter: blur(26px);
    backdrop-filter: blur(26px);
    transform: rotate(2.2deg);
}

.seo-friends-phone::before {
    content: "";
    position: absolute;
    inset: 8px;
    z-index: -1;
    border-radius: 35px;
    background: linear-gradient(145deg, #fff, rgba(255, 241, 244, .72));
}

.seo-friends-phone__top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 6px 14px;
}

.seo-friends-phone__top div {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.seo-friends-phone__top small {
    color: #a0747e;
    font-size: 8px;
    font-weight: 950;
    letter-spacing: .14em;
}

.seo-friends-phone__top strong {
    font-size: 24px;
    letter-spacing: -.035em;
}

.seo-friends-status {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 9px;
    border-radius: 999px;
    background: #fff5f6;
    color: #98636f;
    font-size: 9px;
    font-weight: 900;
}

.seo-friends-status i {
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: #39be67;
    box-shadow: 0 0 0 4px rgba(57, 190, 103, .1);
}

.seo-friends-profile {
    position: relative;
    overflow: hidden;
    min-height: 320px;
    padding: 24px;
    border-radius: 30px;
    color: #fff;
    background:
        radial-gradient(circle at 70% 18%, rgba(255, 255, 255, .24), transparent 23%),
        radial-gradient(circle at 15% 90%, rgba(255, 202, 123, .30), transparent 35%),
        linear-gradient(145deg, #ff8a4a 0%, #ff4d6c 47%, #ff0b68 100%);
    box-shadow: 0 20px 46px rgba(255, 34, 94, .2);
}

.seo-friends-profile::before,
.seo-friends-profile::after {
    content: "";
    position: absolute;
    border: 1px solid rgba(255, 255, 255, .28);
    border-radius: 50%;
}

.seo-friends-profile::before {
    width: 310px;
    height: 310px;
    right: -155px;
    top: -105px;
}

.seo-friends-profile::after {
    width: 230px;
    height: 230px;
    right: -105px;
    top: -65px;
}

.seo-friends-profile__glow {
    position: absolute;
    width: 220px;
    height: 220px;
    right: -20px;
    bottom: -90px;
    border-radius: 50%;
    background: rgba(255, 211, 135, .38);
    filter: blur(25px);
}

.seo-friends-profile__badge {
    position: relative;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 10px;
    border: 1px solid rgba(255, 255, 255, .22);
    border-radius: 999px;
    background: rgba(40, 17, 26, .18);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    font-size: 9px;
    font-weight: 900;
}

.seo-friends-profile__badge svg { font-size: 13px; }

.seo-friends-profile__people {
    position: relative;
    z-index: 2;
    display: flex;
    align-items: center;
    margin-top: 35px;
}

.seo-friends-profile__people i {
    width: 57px;
    height: 57px;
    margin-left: -12px;
    border: 3px solid rgba(255, 255, 255, .92);
    border-radius: 50%;
    box-shadow: 0 12px 24px rgba(85, 20, 40, .18);
    background: linear-gradient(145deg, #ffd7bc, #fff1e7);
}

.seo-friends-profile__people i:first-child { margin-left: 0; background: linear-gradient(145deg, #fecb8b, #ef6c55); }
.seo-friends-profile__people i:nth-child(2) { background: linear-gradient(145deg, #f6d0c6, #8a6478); }
.seo-friends-profile__people i:nth-child(3) { background: linear-gradient(145deg, #d7a473, #5c6b88); }
.seo-friends-profile__people i:nth-child(4) { background: linear-gradient(145deg, #fed7ce, #b45a68); }

.seo-friends-profile__copy {
    position: relative;
    z-index: 2;
    margin-top: 23px;
}

.seo-friends-profile__copy small {
    display: block;
    margin-bottom: 7px;
    font-size: 8px;
    font-weight: 950;
    letter-spacing: .14em;
    opacity: .78;
}

.seo-friends-profile__copy strong {
    display: block;
    max-width: 310px;
    font-size: 28px;
    line-height: 1.02;
    letter-spacing: -.045em;
}

.seo-friends-profile__copy p {
    margin: 8px 0 0;
    font-size: 11px;
    line-height: 1.45;
    opacity: .84;
}

.seo-friends-profile__actions {
    position: absolute;
    right: 18px;
    top: 61px;
    z-index: 3;
    display: flex;
    flex-direction: column;
    gap: 9px;
}

.seo-friends-profile__actions span {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 50%;
    color: var(--seo-pink);
    background: rgba(255, 255, 255, .94);
    box-shadow: 0 10px 26px rgba(91, 27, 46, .17);
}

.seo-friends-profile__actions svg { font-size: 19px; }

.seo-friends-modules {
    display: grid;
    grid-template-columns: 1fr;
    gap: 8px;
    margin-top: 12px;
}

.seo-friends-module {
    display: grid;
    grid-template-columns: 42px minmax(0, 1fr) 22px;
    align-items: center;
    gap: 10px;
    min-height: 62px;
    padding: 8px 12px 8px 8px;
    border: 1px solid var(--seo-line);
    border-radius: 19px;
    background: rgba(255, 255, 255, .9);
    box-shadow: 0 8px 20px rgba(37, 23, 28, .04);
    transition: transform .18s ease, box-shadow .18s ease;
}

.seo-friends-module:hover {
    transform: translateX(3px);
    box-shadow: 0 12px 25px rgba(37, 23, 28, .08);
}

.seo-friends-module > span {
    display: grid;
    place-items: center;
    width: 42px;
    height: 42px;
    border-radius: 14px;
    color: #fff;
    box-shadow: 0 8px 18px rgba(255, 7, 95, .15);
}

.seo-friends-module--connect > span { background: linear-gradient(140deg, #ff0d65, #ff6d27); }
.seo-friends-module--moments > span { background: linear-gradient(140deg, #ff2e86, #ff4e50); }
.seo-friends-module--plans > span { background: linear-gradient(140deg, #ff671b, #ff2a72); }

.seo-friends-module > span svg { font-size: 20px; }
.seo-friends-module div { min-width: 0; }
.seo-friends-module b { display: block; font-size: 12px; }
.seo-friends-module small { display: block; margin-top: 2px; color: #8d8990; font-size: 9px; }
.seo-friends-module > i { display: grid; place-items: center; color: #b1abb0; }
.seo-friends-module > i svg { font-size: 15px; }

.seo-hub-floating {
    position: absolute;
    z-index: 5;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 14px;
    border: 1px solid rgba(255, 255, 255, .86);
    border-radius: 18px;
    background: rgba(255, 255, 255, .80);
    box-shadow: 0 18px 40px rgba(51, 27, 36, .12);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    animation: seoFloat 5s ease-in-out infinite;
}

.seo-hub-floating--top {
    right: -10px;
    top: 70px;
}

.seo-hub-floating--bottom {
    left: -18px;
    bottom: 68px;
    animation-delay: -2.2s;
}

.seo-hub-floating > span:not(.seo-hub-pulse) {
    display: grid;
    place-items: center;
    width: 38px;
    height: 38px;
    border-radius: 13px;
    color: #fff;
    background: var(--seo-grad);
}

.seo-hub-floating > span svg { font-size: 18px; }

.seo-hub-floating div {
    display: flex;
    flex-direction: column;
}

.seo-hub-floating b { font-size: 11px; }
.seo-hub-floating small { margin-top: 2px; color: #8d888d; font-size: 8px; }

.seo-hub-pulse {
    position: relative;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: #39bf67;
}

.seo-hub-pulse::after {
    content: "";
    position: absolute;
    inset: -5px;
    border: 1px solid rgba(57, 191, 103, .38);
    border-radius: 50%;
    animation: seoPulse 2.4s ease-out infinite;
}

/* Sections */
.seo-hub-section,
.seo-city-section {
    padding-top: 92px;
}

.seo-hub-section-head,
.seo-city-section-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 28px;
}

.seo-hub-section-head > div,
.seo-city-section-head > div {
    max-width: 820px;
}

.seo-hub-section-head--wide > div { max-width: 940px; }

.seo-hub-eyebrow,
.seo-city-section-head > span,
.seo-city-story__copy > span {
    display: block;
    color: #9e6974;
}

.seo-hub-section-head h2,
.seo-city-section-head h2,
.seo-city-story__copy h2 {
    margin: 10px 0 11px;
    font-size: clamp(36px, 4.5vw, 58px);
    line-height: .98;
    letter-spacing: -.055em;
    font-weight: 940;
}

.seo-hub-section-head p,
.seo-city-section-head p,
.seo-city-story__copy p {
    margin: 0;
    color: var(--seo-muted);
    font-size: 16px;
    line-height: 1.67;
}

.seo-hub-text-link,
.seo-city-section-head--row > a,
.seo-city-story__copy > a {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    flex: 0 0 auto;
    color: var(--seo-pink);
    font-size: 12px;
    font-weight: 920;
    white-space: nowrap;
}

.seo-hub-text-link svg,
.seo-city-section-head--row > a svg,
.seo-city-story__copy > a svg { font-size: 16px; }

/* Ecosystem */
.seo-ecosystem-grid {
    display: grid;
    grid-template-columns: repeat(12, 1fr);
    gap: 14px;
    margin-top: 30px;
}

.seo-ecosystem-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 280px;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, .85);
    border-radius: 28px;
    background: rgba(255, 255, 255, .82);
    box-shadow: var(--seo-shadow-soft), inset 0 1px 0 #fff;
    transition: transform .22s ease, box-shadow .22s ease;
}

.seo-ecosystem-card::before {
    content: "";
    position: absolute;
    z-index: -2;
    width: 230px;
    height: 230px;
    right: -100px;
    top: -100px;
    border-radius: 50%;
    filter: blur(2px);
    opacity: .4;
}

.seo-ecosystem-card::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0;
    background: linear-gradient(160deg, rgba(255, 255, 255, .3), transparent 58%);
}

.seo-ecosystem-card:hover {
    transform: translateY(-6px);
    box-shadow: 0 28px 60px rgba(52, 27, 37, .12);
}

.seo-ecosystem-card--connect,
.seo-ecosystem-card--moments,
.seo-ecosystem-card--plans { grid-column: span 4; }
.seo-ecosystem-card--groups,
.seo-ecosystem-card--explore { grid-column: span 6; min-height: 240px; }

.seo-ecosystem-card--connect::before { background: #ffd6e0; }
.seo-ecosystem-card--moments::before { background: #ffe0d2; }
.seo-ecosystem-card--plans::before { background: #ffd2bd; }
.seo-ecosystem-card--groups::before { background: #f1d7ff; }
.seo-ecosystem-card--explore::before { background: #dff3de; }

.seo-ecosystem-card__icon {
    display: grid;
    place-items: center;
    width: 52px;
    height: 52px;
    margin-bottom: 26px;
    border-radius: 17px;
    color: #fff;
    background: var(--seo-grad);
    box-shadow: 0 14px 28px rgba(255, 30, 91, .22);
}

.seo-ecosystem-card--groups .seo-ecosystem-card__icon { background: linear-gradient(140deg, #9b57ff, #ff357f); }
.seo-ecosystem-card--explore .seo-ecosystem-card__icon { background: linear-gradient(140deg, #4cbc55, #ff9a26); }
.seo-ecosystem-card__icon svg { font-size: 25px; }

.seo-ecosystem-card > small {
    color: #a06875;
    font-size: 9px;
    font-weight: 950;
    letter-spacing: .14em;
}

.seo-ecosystem-card h3 {
    max-width: 350px;
    margin: 8px 0 9px;
    font-size: 25px;
    line-height: 1.02;
    letter-spacing: -.04em;
}

.seo-ecosystem-card p {
    max-width: 430px;
    min-height: 68px;
    margin: 0;
    color: #767078;
    font-size: 12px;
    line-height: 1.55;
}

.seo-ecosystem-card b {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 18px;
    color: #242026;
    font-size: 11px;
}

.seo-ecosystem-card b svg { font-size: 15px; color: var(--seo-pink); }

/* Featured */
.seo-featured-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 28px;
}

.seo-featured-card {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    min-height: 180px;
    padding: 24px;
    border: 1px solid rgba(255, 255, 255, .82);
    border-radius: 27px;
    background: #fff;
    box-shadow: var(--seo-shadow-soft);
    transition: transform .22s ease, box-shadow .22s ease;
}

.seo-featured-card::before {
    content: "";
    position: absolute;
    z-index: -2;
    inset: 0;
    opacity: .9;
}

.seo-featured-card--1::before { background: linear-gradient(145deg, #fff 8%, #ffe6e1 100%); }
.seo-featured-card--2::before { background: linear-gradient(145deg, #fff 8%, #fff0d9 100%); }
.seo-featured-card--3::before { background: linear-gradient(145deg, #fff 8%, #f0e7ff 100%); }

.seo-featured-card__shine {
    position: absolute;
    z-index: -1;
    width: 170px;
    height: 170px;
    right: -50px;
    bottom: -80px;
    border: 1px solid rgba(255, 70, 92, .15);
    border-radius: 50%;
}

.seo-featured-card__shine::after {
    content: "";
    position: absolute;
    inset: 28px;
    border: 1px solid rgba(255, 70, 92, .11);
    border-radius: 50%;
}

.seo-featured-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 26px 58px rgba(49, 28, 36, .12);
}

.seo-featured-card__territory {
    display: inline-flex;
    padding: 6px 9px;
    border-radius: 999px;
    background: rgba(255, 255, 255, .72);
    color: #9f6a75;
    font-size: 9px;
    font-weight: 900;
    letter-spacing: .08em;
    text-transform: uppercase;
}

.seo-featured-card strong {
    display: block;
    margin-top: 24px;
    max-width: 83%;
    font-size: 29px;
    line-height: 1;
    letter-spacing: -.045em;
}

.seo-featured-card small {
    display: block;
    margin-top: 7px;
    color: #7d777c;
    font-size: 10px;
}

.seo-featured-card > i {
    position: absolute;
    right: 20px;
    bottom: 20px;
    display: grid;
    place-items: center;
    width: 39px;
    height: 39px;
    border-radius: 50%;
    color: #fff;
    background: var(--seo-grad);
    box-shadow: 0 10px 20px rgba(255, 29, 92, .18);
}

.seo-featured-card > i svg { font-size: 16px; }

/* How */
.seo-how-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 28px;
}

.seo-how-grid article {
    position: relative;
    min-height: 260px;
    padding: 25px;
    border: 1px solid var(--seo-line);
    border-radius: 28px;
    background: linear-gradient(145deg, #fff, #fffaf8);
    box-shadow: 0 14px 34px rgba(44, 27, 33, .055);
}

.seo-how-grid article > span {
    position: absolute;
    top: 20px;
    right: 22px;
    color: #ebd9de;
    font-size: 42px;
    font-weight: 950;
    letter-spacing: -.06em;
}

.seo-how-grid article > i {
    display: grid;
    place-items: center;
    width: 55px;
    height: 55px;
    border-radius: 18px;
    color: var(--seo-pink);
    background: #fff0f4;
    box-shadow: 0 12px 28px rgba(255, 7, 95, .08);
}

.seo-how-grid article > i svg { font-size: 25px; }

.seo-how-grid h3 {
    margin: 45px 0 8px;
    font-size: 25px;
    letter-spacing: -.035em;
}

.seo-how-grid p {
    margin: 0;
    color: #777178;
    font-size: 13px;
    line-height: 1.58;
}

/* Directory */
.seo-hub-directory {
    scroll-margin-top: 96px;
}

.seo-hub-directory-head {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 24px;
    padding: 30px;
    border: 1px solid rgba(255, 255, 255, .86);
    border-radius: 30px;
    background: rgba(255, 255, 255, .78);
    box-shadow: 0 18px 45px rgba(51, 29, 37, .07);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
}

.seo-hub-directory-head > div { max-width: 700px; }

.seo-hub-directory-head h2 {
    margin: 9px 0 8px;
    font-size: clamp(34px, 4vw, 52px);
    line-height: 1;
    letter-spacing: -.05em;
}

.seo-hub-directory-head p {
    margin: 0;
    color: var(--seo-muted);
    font-size: 14px;
    line-height: 1.6;
}

.seo-territory-tabs {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 5px;
    border: 1px solid var(--seo-line);
    border-radius: 16px;
    background: #f7f4f5;
}

.seo-territory-tabs button {
    min-height: 38px;
    padding: 0 13px;
    border: 0;
    border-radius: 12px;
    color: #7c777b;
    background: transparent;
    font: inherit;
    font-size: 10px;
    font-weight: 900;
    cursor: pointer;
    transition: .18s ease;
}

.seo-territory-tabs button:hover { color: var(--seo-ink); }

.seo-territory-tabs button.is-active {
    color: #fff;
    background: var(--seo-grad);
    box-shadow: 0 8px 18px rgba(255, 7, 95, .18);
}

.seo-no-result {
    display: none;
    align-items: center;
    gap: 15px;
    margin-top: 22px;
    padding: 22px;
    border: 1px dashed rgba(255, 7, 95, .2);
    border-radius: 22px;
    background: #fff7f8;
}

.seo-no-result.is-visible { display: flex; }
.seo-no-result > span { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 15px; color: var(--seo-pink); background: #fff; }
.seo-no-result > span svg { font-size: 21px; }
.seo-no-result strong { display: block; font-size: 13px; }
.seo-no-result small { display: block; margin-top: 3px; color: #898288; font-size: 10px; }

.seo-territory-groups {
    display: grid;
    gap: 18px;
    margin-top: 22px;
}

.seo-territory-panel {
    padding: 25px;
    border: 1px solid var(--seo-line);
    border-radius: 28px;
    background: rgba(255, 255, 255, .82);
    box-shadow: 0 16px 40px rgba(48, 27, 35, .05);
}

.seo-territory-panel__head {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 18px;
}

.seo-territory-panel__head > div {
    display: flex;
    align-items: baseline;
    gap: 9px;
    white-space: nowrap;
}

.seo-territory-panel__head span {
    font-size: 18px;
    font-weight: 950;
    letter-spacing: -.025em;
}

.seo-territory-panel__head strong {
    color: #9f989d;
    font-size: 10px;
    font-weight: 850;
}

.seo-territory-panel__line {
    flex: 1;
    height: 1px;
    background: linear-gradient(90deg, rgba(255, 7, 95, .14), transparent);
}

.seo-municipality-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 8px;
}

.seo-municipality-card {
    display: grid;
    grid-template-columns: 37px minmax(0, 1fr) 18px;
    align-items: center;
    gap: 9px;
    min-height: 72px;
    padding: 10px;
    border: 1px solid rgba(31, 25, 29, .065);
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 7px 18px rgba(46, 29, 35, .035);
    transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease;
}

.seo-municipality-card:hover {
    transform: translateY(-2px);
    border-color: rgba(255, 7, 95, .16);
    box-shadow: 0 13px 27px rgba(46, 29, 35, .08);
}

.seo-municipality-card__pin {
    display: grid;
    place-items: center;
    width: 37px;
    height: 37px;
    border-radius: 13px;
    color: var(--seo-pink);
    background: linear-gradient(145deg, #fff0f3, #fff7f1);
}

.seo-municipality-card__pin svg { font-size: 18px; }
.seo-municipality-card__copy { min-width: 0; }
.seo-municipality-card__copy strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; }
.seo-municipality-card__copy small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 3px; color: #999298; font-size: 8px; }
.seo-municipality-card > i { display: grid; place-items: center; color: #bbb4b9; }
.seo-municipality-card > i svg { font-size: 13px; }

.seo-territory-more {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 9px;
    min-height: 42px;
    margin-top: 16px;
    padding: 0 14px;
    border: 1px solid var(--seo-line);
    border-radius: 14px;
    color: #6f686d;
    background: #fff;
    font: inherit;
    font-size: 10px;
    font-weight: 900;
    cursor: pointer;
    transition: .18s ease;
}

.seo-territory-more:hover { color: var(--seo-pink); border-color: rgba(255, 7, 95, .16); }
.seo-territory-more svg { font-size: 14px; transition: transform .18s ease; }
.seo-territory-more.is-expanded svg { transform: rotate(180deg); }

/* Final hub */
.seo-hub-final,
.seo-city-final {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    grid-template-columns: 70px minmax(0, 1fr) auto;
    align-items: center;
    gap: 24px;
    margin-top: 92px;
    padding: clamp(32px, 5vw, 56px);
    border-radius: 34px;
    color: #fff;
    background:
        radial-gradient(circle at 83% 10%, rgba(255, 89, 104, .25), transparent 33%),
        linear-gradient(125deg, #151317, #2a1b24 74%, #351b25);
    box-shadow: 0 32px 80px rgba(28, 16, 23, .18);
}

.seo-hub-final__aurora,
.seo-city-final__aurora {
    position: absolute;
    z-index: -1;
    width: 420px;
    height: 420px;
    right: -170px;
    top: -210px;
    border: 1px solid rgba(255, 113, 77, .18);
    border-radius: 50%;
    box-shadow: inset 0 0 0 70px rgba(255, 55, 103, .04), inset 0 0 0 140px rgba(255, 119, 31, .035);
}

.seo-hub-final__icon,
.seo-city-final__icon {
    display: grid;
    place-items: center;
    width: 64px;
    height: 64px;
    border-radius: 20px;
    background: var(--seo-grad);
    box-shadow: 0 16px 35px rgba(255, 22, 87, .3);
}

.seo-hub-final__icon svg,
.seo-city-final__icon svg { font-size: 29px; }

.seo-hub-final__copy small,
.seo-city-final small { color: #ffb4bd; }

.seo-hub-final h2,
.seo-city-final h2 {
    max-width: 700px;
    margin: 8px 0 7px;
    font-size: clamp(30px, 3.5vw, 46px);
    line-height: 1;
    letter-spacing: -.05em;
}

.seo-hub-final p,
.seo-city-final p {
    max-width: 680px;
    margin: 0;
    color: #c9c4c7;
    font-size: 13px;
    line-height: 1.55;
}

.seo-hub-final__actions,
.seo-city-final__actions {
    justify-content: flex-end;
    margin-top: 0;
}

/* =========================================================
   PÁGINAS LOCALES /amigos/{municipio}/
   ========================================================= */

.seo-city-hero {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(360px, .72fr);
    gap: clamp(26px, 4vw, 58px);
    padding: clamp(34px, 5vw, 66px);
    border: 1px solid rgba(255, 255, 255, .82);
    border-radius: 44px;
    background: linear-gradient(132deg, #fff 0%, #fff8f3 52%, #fff0f6 100%);
    box-shadow: 0 40px 105px rgba(72, 32, 44, .10);
}

.seo-city-hero__aurora {
    position: absolute;
    z-index: -2;
    border-radius: 50%;
    pointer-events: none;
}

.seo-city-hero__aurora--one {
    width: 540px;
    height: 540px;
    right: -180px;
    top: -190px;
    background: radial-gradient(circle, rgba(255, 108, 83, .23), rgba(255, 63, 130, .06) 50%, transparent 70%);
}

.seo-city-hero__aurora--two {
    width: 340px;
    height: 340px;
    left: 28%;
    bottom: -250px;
    background: radial-gradient(circle, rgba(255, 166, 81, .15), transparent 70%);
}

.seo-city-rings {
    position: absolute;
    z-index: -1;
    right: -150px;
    top: -160px;
    width: 510px;
    height: 510px;
}

.seo-city-rings i {
    position: absolute;
    inset: 0;
    border: 1.4px solid rgba(255, 73, 93, .13);
    border-radius: 50%;
}

.seo-city-rings i:nth-child(2) { inset: 70px; }
.seo-city-rings i:nth-child(3) { inset: 140px; }

.seo-city-hero__copy,
.seo-city-scene {
    position: relative;
    z-index: 2;
}

.seo-city-hero__copy {
    align-self: center;
}

.seo-city-kicker {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: #986773;
}

.seo-city-kicker svg { font-size: 16px; color: var(--seo-pink); }

.seo-city-hero h1 {
    max-width: 790px;
    margin: 18px 0 18px;
    font-size: clamp(49px, 5.65vw, 76px);
    line-height: .94;
    letter-spacing: -.063em;
    font-weight: 950;
}

.seo-city-hero h1 em {
    font-style: normal;
    background: linear-gradient(105deg, var(--seo-pink), #ff4258 48%, var(--seo-orange));
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
}

.seo-city-hero__copy > p {
    max-width: 690px;
    margin: 0;
    color: #68676e;
    font-size: 17px;
    line-height: 1.64;
}

.seo-city-intents {
    display: flex;
    gap: 7px;
    flex-wrap: wrap;
    margin-top: 20px;
}

.seo-city-intents span {
    padding: 7px 10px;
    border: 1px solid rgba(43, 28, 34, .07);
    border-radius: 999px;
    color: #766f74;
    background: rgba(255, 255, 255, .62);
    font-size: 9px;
    font-weight: 850;
}

/* Local hero scene */
.seo-city-scene {
    align-self: center;
    padding: 15px;
    border: 1px solid rgba(255, 255, 255, .9);
    border-radius: 34px;
    background: rgba(255, 255, 255, .73);
    box-shadow: 0 28px 68px rgba(56, 27, 38, .14), inset 0 1px 0 #fff;
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
    transform: rotate(1.4deg);
}

.seo-city-scene__header {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 7px 5px 12px;
}

.seo-city-scene__header > div { display: flex; flex-direction: column; gap: 2px; }
.seo-city-scene__header small { color: #a3757e; font-size: 8px; font-weight: 950; letter-spacing: .13em; }
.seo-city-scene__header strong { font-size: 22px; letter-spacing: -.04em; }

.seo-city-scene__header > span {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 9px;
    border-radius: 999px;
    color: #8f6871;
    background: #fff4f5;
    font-size: 8px;
    font-weight: 900;
}

.seo-city-scene__header > span i { width: 6px; height: 6px; border-radius: 50%; background: #3fbd67; box-shadow: 0 0 0 4px rgba(63, 189, 103, .09); }

.seo-city-scene__visual {
    position: relative;
    overflow: hidden;
    min-height: 295px;
    border-radius: 25px;
    background: linear-gradient(145deg, #ffad72, #ff4c78 52%, #ff0f69);
}

.seo-city-scene__image {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.seo-city-scene__visual--empty {
    background:
        radial-gradient(circle at 74% 21%, rgba(255, 255, 255, .35), transparent 20%),
        radial-gradient(circle at 20% 85%, rgba(255, 216, 137, .38), transparent 34%),
        linear-gradient(145deg, #ff9b61, #ff426e 53%, #ff0d68);
}

.seo-city-scene__visual--empty::before,
.seo-city-scene__visual--empty::after {
    content: "";
    position: absolute;
    border: 1px solid rgba(255, 255, 255, .26);
    border-radius: 50%;
}

.seo-city-scene__visual--empty::before { width: 300px; height: 300px; right: -120px; top: -90px; }
.seo-city-scene__visual--empty::after { width: 210px; height: 210px; right: -70px; top: -45px; }

.seo-city-scene__overlay {
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, rgba(20, 11, 14, .08) 18%, rgba(20, 10, 14, .74) 100%);
}

.seo-city-scene__pin {
    position: absolute;
    z-index: 2;
    left: 15px;
    top: 15px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 9px;
    border: 1px solid rgba(255, 255, 255, .25);
    border-radius: 999px;
    color: #fff;
    background: rgba(22, 13, 17, .29);
    -webkit-backdrop-filter: blur(9px);
    backdrop-filter: blur(9px);
    font-size: 8px;
    font-weight: 900;
}

.seo-city-scene__pin svg { font-size: 12px; }

.seo-city-scene__headline {
    position: absolute;
    z-index: 2;
    left: 20px;
    right: 20px;
    bottom: 20px;
    color: #fff;
}

.seo-city-scene__headline small { display: block; margin-bottom: 7px; font-size: 8px; font-weight: 950; letter-spacing: .12em; opacity: .78; }
.seo-city-scene__headline strong { display: block; max-width: 330px; font-size: 25px; line-height: 1.04; letter-spacing: -.04em; }

.seo-city-scene__stats {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
    margin-top: 10px;
}

.seo-city-scene__stats > div {
    min-width: 0;
    padding: 12px;
    border: 1px solid var(--seo-line);
    border-radius: 17px;
    background: #fff;
}

.seo-city-scene__stats span { display: grid; place-items: center; width: 29px; height: 29px; margin-bottom: 9px; border-radius: 10px; color: var(--seo-pink); background: #fff0f4; }
.seo-city-scene__stats span svg { font-size: 15px; }
.seo-city-scene__stats strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 16px; letter-spacing: -.025em; }
.seo-city-scene__stats small { display: block; margin-top: 3px; color: #928c91; font-size: 7px; line-height: 1.35; }

.seo-city-scene__links {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 7px;
    margin-top: 8px;
}

.seo-city-scene__links a {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;
    min-height: 37px;
    border: 1px solid var(--seo-line);
    border-radius: 13px;
    color: #625d61;
    background: #fff;
    font-size: 8px;
    font-weight: 850;
    transition: .18s ease;
}

.seo-city-scene__links a:hover { color: var(--seo-pink); border-color: rgba(255, 7, 95, .14); transform: translateY(-1px); }
.seo-city-scene__links svg { font-size: 13px; }

/* Local intent cards */
.seo-city-section-head {
    display: block;
    max-width: 850px;
}

.seo-city-section-head--row {
    max-width: none;
    display: flex;
}

.seo-city-intent-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 12px;
    margin-top: 28px;
}

.seo-city-intent-card {
    position: relative;
    overflow: hidden;
    min-height: 270px;
    padding: 22px;
    border: 1px solid rgba(255, 255, 255, .85);
    border-radius: 26px;
    background: linear-gradient(145deg, rgba(255, 255, 255, .95), rgba(255, 247, 245, .88));
    box-shadow: 0 15px 38px rgba(48, 28, 35, .065);
    transition: transform .2s ease, box-shadow .2s ease;
}

.seo-city-intent-card::before {
    content: "";
    position: absolute;
    width: 160px;
    height: 160px;
    right: -70px;
    top: -70px;
    border-radius: 50%;
    background: rgba(255, 48, 114, .07);
}

.seo-city-intent-card:hover { transform: translateY(-5px); box-shadow: 0 24px 52px rgba(48, 28, 35, .10); }

.seo-city-intent-card__icon {
    display: grid;
    place-items: center;
    width: 49px;
    height: 49px;
    margin-bottom: 30px;
    border-radius: 16px;
    color: #fff;
    background: var(--seo-grad);
    box-shadow: 0 12px 26px rgba(255, 7, 95, .2);
}

.seo-city-intent-card__icon svg { font-size: 22px; }
.seo-city-intent-card > small { color: #9f6975; font-size: 8px; font-weight: 950; letter-spacing: .13em; }
.seo-city-intent-card h3 { margin: 7px 0 8px; font-size: 22px; line-height: 1.04; letter-spacing: -.035em; }
.seo-city-intent-card p { min-height: 63px; margin: 0; color: #767077; font-size: 11px; line-height: 1.55; }
.seo-city-intent-card b { display: inline-flex; align-items: center; gap: 7px; margin-top: 16px; color: #272226; font-size: 10px; }
.seo-city-intent-card b svg { font-size: 14px; color: var(--seo-pink); }

/* Plans local */
.seo-city-plan-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 14px;
    margin-top: 28px;
}

.seo-city-plan-card {
    overflow: hidden;
    border: 1px solid var(--seo-line);
    border-radius: 26px;
    background: #fff;
    box-shadow: 0 16px 42px rgba(48, 28, 35, .07);
    transition: transform .2s ease, box-shadow .2s ease;
}

.seo-city-plan-card:hover { transform: translateY(-4px); box-shadow: 0 25px 55px rgba(48, 28, 35, .11); }

.seo-city-plan-card__image {
    position: relative;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    background: #f2ece9;
}

.seo-city-plan-card__image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(to bottom, transparent 48%, rgba(19, 12, 14, .38));
}

.seo-city-plan-card__image img { width: 100%; height: 100%; object-fit: cover; transition: transform .4s ease; }
.seo-city-plan-card:hover .seo-city-plan-card__image img { transform: scale(1.035); }

.seo-city-plan-card__image span {
    position: absolute;
    z-index: 2;
    left: 12px;
    bottom: 12px;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 7px 9px;
    border-radius: 999px;
    color: #fff;
    background: rgba(29, 18, 22, .48);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    font-size: 8px;
    font-weight: 900;
}

.seo-city-plan-card__image span svg { font-size: 12px; }

.seo-city-plan-card__body { padding: 18px; }
.seo-city-plan-card__body h3 { margin: 0 0 8px; font-size: 18px; line-height: 1.15; letter-spacing: -.025em; }
.seo-city-plan-card__body p { display: flex; align-items: center; gap: 6px; margin: 0; color: #847d82; font-size: 9px; }
.seo-city-plan-card__body p svg { flex: 0 0 auto; font-size: 12px; color: var(--seo-pink); }
.seo-city-plan-card__body b { display: inline-flex; align-items: center; gap: 5px; margin-top: 15px; color: var(--seo-pink); font-size: 9px; }
.seo-city-plan-card__body b svg { font-size: 12px; }

.seo-city-empty {
    display: grid;
    grid-template-columns: 60px minmax(0, 1fr) auto;
    align-items: center;
    gap: 20px;
    margin-top: 28px;
    padding: 28px;
    border: 1px solid rgba(255, 7, 95, .10);
    border-radius: 28px;
    background: linear-gradient(135deg, #fff, #fff7f8 58%, #fff2e7);
    box-shadow: 0 18px 45px rgba(50, 28, 37, .06);
}

.seo-city-empty__icon { display: grid; place-items: center; width: 58px; height: 58px; border-radius: 19px; color: #fff; background: var(--seo-grad); box-shadow: 0 13px 28px rgba(255, 7, 95, .2); }
.seo-city-empty__icon svg { font-size: 26px; }
.seo-city-empty small { color: #a16e79; font-size: 8px; font-weight: 950; letter-spacing: .13em; }
.seo-city-empty h3 { margin: 6px 0 5px; font-size: 21px; letter-spacing: -.03em; }
.seo-city-empty p { max-width: 680px; margin: 0; color: #797278; font-size: 11px; line-height: 1.55; }

/* Story */
.seo-city-story {
    display: grid;
    grid-template-columns: .82fr 1.18fr;
    gap: 42px;
    align-items: center;
}

.seo-city-story__copy > a { margin-top: 20px; }

.seo-city-story__steps {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
}

.seo-city-story__steps article {
    position: relative;
    overflow: hidden;
    min-height: 250px;
    padding: 21px;
    border-radius: 25px;
    color: #fff;
    background: linear-gradient(145deg, #17151a, #2b1e25);
    box-shadow: 0 18px 40px rgba(29, 18, 24, .13);
}

.seo-city-story__steps article::before {
    content: "";
    position: absolute;
    width: 130px;
    height: 130px;
    right: -65px;
    top: -65px;
    border-radius: 50%;
    background: rgba(255, 54, 111, .17);
}

.seo-city-story__steps article > span { position: absolute; right: 18px; top: 16px; color: rgba(255, 255, 255, .14); font-size: 35px; font-weight: 950; }
.seo-city-story__steps article > i { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; color: #fff; background: var(--seo-grad); }
.seo-city-story__steps article > i svg { font-size: 20px; }
.seo-city-story__steps h3 { margin: 55px 0 8px; font-size: 20px; }
.seo-city-story__steps p { margin: 0; color: #bbb4ba; font-size: 10px; line-height: 1.55; }

/* Nearby */
.seo-city-related-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: 8px;
    margin-top: 25px;
}

.seo-city-related-grid a {
    display: grid;
    grid-template-columns: 35px minmax(0, 1fr) 15px;
    align-items: center;
    gap: 8px;
    min-height: 72px;
    padding: 10px;
    border: 1px solid var(--seo-line);
    border-radius: 17px;
    background: #fff;
    box-shadow: 0 8px 19px rgba(43, 27, 33, .04);
    transition: .18s ease;
}

.seo-city-related-grid a:hover { transform: translateY(-2px); border-color: rgba(255, 7, 95, .14); box-shadow: 0 13px 26px rgba(43, 27, 33, .08); }
.seo-city-related-grid a > span { display: grid; place-items: center; width: 35px; height: 35px; border-radius: 12px; color: var(--seo-pink); background: #fff0f4; }
.seo-city-related-grid a > span svg { font-size: 17px; }
.seo-city-related-grid div { min-width: 0; }
.seo-city-related-grid strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 10px; }
.seo-city-related-grid small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-top: 3px; color: #979096; font-size: 7px; }
.seo-city-related-grid > a > i { display: grid; place-items: center; color: #bdb6bb; }
.seo-city-related-grid > a > i svg { font-size: 12px; }

/* Animations */
@keyframes seoFloat {
    0%, 100% { transform: translate3d(0, 0, 0); }
    50% { transform: translate3d(0, -8px, 0); }
}

@keyframes seoPulse {
    0% { transform: scale(.55); opacity: .9; }
    80%, 100% { transform: scale(1.55); opacity: 0; }
}

/* =========================================================
   RESPONSIVE
   ========================================================= */

@media (max-width: 1100px) {
    .seo-hub-hero,
    .seo-city-hero {
        grid-template-columns: minmax(0, 1fr) minmax(340px, .74fr);
        padding: 42px;
    }

    .seo-hub-hero h1 { font-size: clamp(52px, 7vw, 76px); }
    .seo-city-hero h1 { font-size: clamp(47px, 6.4vw, 67px); }
    .seo-hub-floating--top { right: -5px; }
    .seo-hub-floating--bottom { left: -5px; }
    .seo-municipality-grid { grid-template-columns: repeat(3, 1fr); }
    .seo-city-related-grid { grid-template-columns: repeat(4, 1fr); }
    .seo-city-intent-grid { grid-template-columns: repeat(2, 1fr); }
    .seo-city-intent-card { min-height: 240px; }
    .seo-hub-final,
    .seo-city-final { grid-template-columns: 64px minmax(0, 1fr); }
    .seo-hub-final__actions,
    .seo-city-final__actions { grid-column: 2; justify-content: flex-start; margin-top: -4px; }
}

@media (max-width: 900px) {
    .seo-local-page {
        width: min(100% - 24px, 780px);
        padding-top: 90px;
    }

    .seo-hub-hero,
    .seo-city-hero {
        grid-template-columns: 1fr;
        gap: 40px;
        padding: 36px;
        border-radius: 36px;
    }

    .seo-hub-hero { min-height: 0; }
    .seo-hub-hero__content,
    .seo-city-hero__copy { max-width: none; }
    .seo-hub-visual { min-height: 590px; }
    .seo-friends-phone { width: min(100%, 440px); }
    .seo-hub-floating--top { right: calc(50% - 250px); top: 30px; }
    .seo-hub-floating--bottom { left: calc(50% - 250px); bottom: 35px; }
    .seo-city-scene { width: min(100%, 470px); justify-self: center; }

    .seo-ecosystem-card--connect,
    .seo-ecosystem-card--moments,
    .seo-ecosystem-card--plans,
    .seo-ecosystem-card--groups,
    .seo-ecosystem-card--explore { grid-column: span 6; }
    .seo-ecosystem-card--explore { grid-column: 1 / -1; }

    .seo-featured-grid { grid-template-columns: 1fr 1fr; }
    .seo-how-grid { grid-template-columns: 1fr; }
    .seo-how-grid article { min-height: 205px; }
    .seo-how-grid h3 { margin-top: 34px; }

    .seo-hub-directory-head,
    .seo-hub-section-head,
    .seo-city-section-head--row {
        align-items: flex-start;
        flex-direction: column;
    }

    .seo-territory-tabs { width: 100%; overflow-x: auto; justify-content: flex-start; }
    .seo-territory-tabs button { flex: 0 0 auto; }
    .seo-municipality-grid { grid-template-columns: repeat(2, 1fr); }

    .seo-city-plan-grid { grid-template-columns: 1fr 1fr; }
    .seo-city-story { grid-template-columns: 1fr; gap: 26px; }
    .seo-city-story__steps { grid-template-columns: repeat(3, 1fr); }
    .seo-city-related-grid { grid-template-columns: repeat(3, 1fr); }

    .seo-hub-section,
    .seo-city-section { padding-top: 72px; }
    .seo-hub-final,
    .seo-city-final { margin-top: 72px; }
}

@media (max-width: 640px) {
    .seo-hub-body,
    .seo-local-body {
        background: linear-gradient(#fffdfb, #fff8f5 55%, #fffdfb);
    }

    .seo-local-page {
        width: calc(100% - 18px);
        padding: 82px 0 94px;
    }

    .seo-breadcrumb {
        margin-bottom: 14px;
        padding: 0 6px;
        font-size: 10px;
    }

    .seo-hub-hero,
    .seo-city-hero {
        gap: 30px;
        padding: 25px 20px 28px;
        border-radius: 28px;
    }

    .seo-hub-rings,
    .seo-city-rings {
        width: 340px;
        height: 340px;
        right: -165px;
        top: -135px;
    }

    .seo-hub-rings i:nth-child(2),
    .seo-city-rings i:nth-child(2) { inset: 45px; }
    .seo-hub-rings i:nth-child(3),
    .seo-city-rings i:nth-child(3) { inset: 90px; }

    .seo-hub-kicker,
    .seo-city-kicker {
        font-size: 9px;
        letter-spacing: .12em;
    }

    .seo-hub-hero h1 {
        margin-top: 18px;
        font-size: clamp(47px, 15vw, 64px);
        line-height: .91;
    }

    .seo-city-hero h1 {
        margin-top: 16px;
        font-size: clamp(42px, 12.5vw, 56px);
        line-height: .94;
    }

    .seo-hub-hero__content > p,
    .seo-city-hero__copy > p {
        font-size: 15px;
        line-height: 1.58;
    }

    .seo-hub-search-wrap { margin-top: 23px; }

    .seo-hub-search-shell {
        min-height: 58px;
        padding: 7px 45px 7px 49px;
        border-radius: 18px;
    }

    .seo-hub-search-icon { left: 17px; }
    .seo-hub-search-icon svg { font-size: 20px; }
    .seo-hub-search-shell input { font-size: 13px; }
    .seo-hub-search-count { display: none; }
    .seo-hub-search-clear { right: 10px; }

    .seo-hub-quick {
        flex-wrap: nowrap;
        overflow-x: auto;
        padding-bottom: 3px;
        scrollbar-width: none;
    }
    .seo-hub-quick::-webkit-scrollbar { display: none; }
    .seo-hub-quick > * { flex: 0 0 auto; }

    .seo-hub-hero__actions,
    .seo-city-hero__actions {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .seo-hub-btn,
    .seo-city-btn {
        min-height: 50px;
        padding: 0 13px;
        border-radius: 15px;
        font-size: 11px;
    }

    .seo-hub-trust {
        gap: 9px 12px;
        margin-top: 17px;
    }
    .seo-hub-trust span { font-size: 8px; }

    .seo-hub-visual { min-height: 520px; }
    .seo-friends-phone { width: min(100%, 400px); padding: 13px; border-radius: 31px; transform: rotate(1deg); }
    .seo-friends-phone__top { padding: 6px 4px 10px; }
    .seo-friends-phone__top strong { font-size: 20px; }
    .seo-friends-status { padding: 6px 8px; font-size: 8px; }
    .seo-friends-profile { min-height: 280px; padding: 19px; border-radius: 24px; }
    .seo-friends-profile__people { margin-top: 32px; }
    .seo-friends-profile__people i { width: 49px; height: 49px; }
    .seo-friends-profile__copy strong { font-size: 24px; }
    .seo-friends-profile__actions { right: 12px; top: 52px; }
    .seo-friends-profile__actions span { width: 38px; height: 38px; }
    .seo-friends-module { min-height: 56px; grid-template-columns: 38px minmax(0, 1fr) 18px; padding: 7px 10px 7px 7px; border-radius: 16px; }
    .seo-friends-module > span { width: 38px; height: 38px; border-radius: 12px; }

    .seo-hub-floating { padding: 9px 10px; border-radius: 15px; }
    .seo-hub-floating--top { right: -5px; top: 20px; }
    .seo-hub-floating--bottom { left: -4px; bottom: 18px; }
    .seo-hub-floating > span:not(.seo-hub-pulse) { width: 31px; height: 31px; border-radius: 10px; }
    .seo-hub-floating b { font-size: 9px; }
    .seo-hub-floating small { font-size: 7px; }

    .seo-hub-section,
    .seo-city-section { padding-top: 58px; }

    .seo-hub-section-head h2,
    .seo-city-section-head h2,
    .seo-city-story__copy h2 {
        font-size: 36px;
        line-height: .98;
    }

    .seo-hub-section-head p,
    .seo-city-section-head p,
    .seo-city-story__copy p { font-size: 13px; line-height: 1.6; }

    .seo-ecosystem-grid { grid-template-columns: 1fr; gap: 9px; margin-top: 22px; }
    .seo-ecosystem-card--connect,
    .seo-ecosystem-card--moments,
    .seo-ecosystem-card--plans,
    .seo-ecosystem-card--groups,
    .seo-ecosystem-card--explore { grid-column: 1; min-height: 0; }
    .seo-ecosystem-card { padding: 20px; border-radius: 23px; }
    .seo-ecosystem-card__icon { width: 45px; height: 45px; margin-bottom: 20px; border-radius: 14px; }
    .seo-ecosystem-card h3 { font-size: 22px; }
    .seo-ecosystem-card p { min-height: 0; font-size: 11px; }

    .seo-featured-grid { grid-template-columns: 1fr; gap: 9px; margin-top: 22px; }
    .seo-featured-card { min-height: 150px; padding: 20px; border-radius: 23px; }
    .seo-featured-card strong { margin-top: 19px; font-size: 25px; }

    .seo-how-grid { gap: 9px; margin-top: 22px; }
    .seo-how-grid article { min-height: 190px; padding: 20px; border-radius: 23px; }
    .seo-how-grid article > span { font-size: 35px; }
    .seo-how-grid article > i { width: 48px; height: 48px; border-radius: 15px; }
    .seo-how-grid h3 { margin-top: 27px; font-size: 22px; }
    .seo-how-grid p { font-size: 11px; }

    .seo-hub-directory-head { padding: 20px; border-radius: 24px; }
    .seo-hub-directory-head h2 { font-size: 37px; }
    .seo-hub-directory-head p { font-size: 12px; }
    .seo-territory-tabs { border-radius: 14px; }

    .seo-territory-panel { padding: 17px; border-radius: 23px; }
    .seo-territory-panel__head { align-items: flex-start; gap: 10px; }
    .seo-territory-panel__head > div { flex-direction: column; gap: 2px; }
    .seo-territory-panel__line { margin-top: 10px; }
    .seo-municipality-grid { grid-template-columns: 1fr; gap: 6px; }
    .seo-municipality-card { min-height: 64px; }

    .seo-hub-final,
    .seo-city-final {
        grid-template-columns: 1fr;
        gap: 16px;
        margin-top: 58px;
        padding: 27px 21px;
        border-radius: 27px;
    }
    .seo-hub-final__icon,
    .seo-city-final__icon { width: 54px; height: 54px; border-radius: 17px; }
    .seo-hub-final h2,
    .seo-city-final h2 { font-size: 32px; }
    .seo-hub-final__actions,
    .seo-city-final__actions { grid-column: 1; display: grid; grid-template-columns: 1fr 1fr; gap: 7px; width: 100%; }

    /* Local */
    .seo-city-scene { width: 100%; padding: 12px; border-radius: 28px; transform: rotate(.7deg); }
    .seo-city-scene__visual { min-height: 260px; border-radius: 22px; }
    .seo-city-scene__headline strong { font-size: 22px; }
    .seo-city-scene__stats { gap: 7px; }
    .seo-city-scene__stats > div { padding: 10px; }
    .seo-city-scene__stats strong { font-size: 14px; }
    .seo-city-scene__links a span { display: none; }
    .seo-city-scene__links a { min-height: 39px; }
    .seo-city-scene__links svg { font-size: 16px; }

    .seo-city-intent-grid { grid-template-columns: 1fr; gap: 9px; margin-top: 22px; }
    .seo-city-intent-card { min-height: 0; padding: 20px; border-radius: 23px; }
    .seo-city-intent-card__icon { margin-bottom: 20px; }
    .seo-city-intent-card p { min-height: 0; }

    .seo-city-plan-grid { grid-template-columns: 1fr; gap: 10px; margin-top: 22px; }
    .seo-city-plan-card { border-radius: 23px; }
    .seo-city-plan-card__image { aspect-ratio: 16 / 9; }

    .seo-city-empty { grid-template-columns: 50px minmax(0, 1fr); gap: 14px; padding: 20px; border-radius: 23px; }
    .seo-city-empty__icon { width: 49px; height: 49px; border-radius: 16px; }
    .seo-city-empty .seo-city-btn { grid-column: 1 / -1; width: 100%; }

    .seo-city-story { gap: 22px; }
    .seo-city-story__steps { grid-template-columns: 1fr; gap: 8px; }
    .seo-city-story__steps article { min-height: 180px; border-radius: 22px; }
    .seo-city-story__steps h3 { margin-top: 32px; }

    .seo-city-related-grid { grid-template-columns: 1fr 1fr; gap: 7px; margin-top: 20px; }
    .seo-city-related-grid a { min-height: 66px; }
}

@media (max-width: 390px) {
    .seo-hub-hero__actions,
    .seo-city-hero__actions,
    .seo-hub-final__actions,
    .seo-city-final__actions {
        grid-template-columns: 1fr;
    }

    .seo-hub-visual { min-height: 500px; }
    .seo-hub-floating--bottom { display: none; }
    .seo-city-related-grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
    .seo-hub-floating,
    .seo-hub-pulse::after {
        animation: none !important;
    }

    .seo-local-page *,
    .seo-local-page *::before,
    .seo-local-page *::after {
        scroll-behavior: auto !important;
        transition-duration: .001ms !important;
        animation-duration: .001ms !important;
        animation-iteration-count: 1 !important;
    }
}

/* =========================================================
   IDENTIDAD TIPOGRÁFICA BANANA FRIENDS · 2026
   Inter + escala visual alineada con Explora / Planes / Conecta
   ========================================================= */

.seo-local-page,
.seo-local-page button,
.seo-local-page input,
.seo-local-page select,
.seo-local-page textarea {
    font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
}

.seo-local-page button,
.seo-local-page input,
.seo-local-page select,
.seo-local-page textarea {
    font: inherit;
}

/* Etiquetas y microcopy: misma escala compacta del resto de la app. */
.seo-hub-kicker,
.seo-hub-eyebrow,
.seo-city-kicker,
.seo-city-section-head > span,
.seo-city-story__copy > span,
.seo-city-final small,
.seo-hub-final__copy small {
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .13em;
}

.seo-hub-search-label,
.seo-ecosystem-card > small,
.seo-featured-card__territory,
.seo-city-intent-card > small,
.seo-city-empty small {
    font-weight: 800;
}

/* Hero: escala equivalente a Explora, sin el aspecto editorial sobredimensionado. */
.seo-hub-hero h1 {
    font-size: clamp(50px, 5.35vw, 76px);
    font-weight: 900;
    line-height: .96;
    letter-spacing: -.06em;
}

.seo-city-hero h1 {
    font-size: clamp(48px, 5.2vw, 74px);
    font-weight: 900;
    line-height: .96;
    letter-spacing: -.06em;
}

.seo-hub-hero__content > p,
.seo-city-hero__copy > p {
    font-size: 17px;
    font-weight: 500;
    line-height: 1.65;
}

.seo-hub-search-shell input {
    font-size: 14px;
    font-weight: 600;
}

.seo-hub-btn,
.seo-city-btn {
    font-size: 14px;
    font-weight: 800;
}

/* Titulares de sección: misma jerarquía que Explora. */
.seo-hub-section-head h2,
.seo-city-section-head h2,
.seo-city-story__copy h2,
.seo-hub-directory-head h2 {
    font-size: clamp(31px, 3.7vw, 50px);
    font-weight: 900;
    line-height: 1.02;
    letter-spacing: -.052em;
}

.seo-hub-section-head p,
.seo-city-section-head p,
.seo-city-story__copy p,
.seo-hub-directory-head p {
    font-size: 15px;
    font-weight: 500;
    line-height: 1.72;
}

/* Tarjetas y módulos: jerarquía de producto, no de cartel publicitario. */
.seo-ecosystem-card h3,
.seo-how-grid h3,
.seo-city-intent-card h3,
.seo-city-story__steps h3,
.seo-city-empty h3 {
    font-weight: 800;
    letter-spacing: -.03em;
}

.seo-ecosystem-card h3 { font-size: 23px; }
.seo-ecosystem-card p { font-size: 12px; line-height: 1.62; }
.seo-featured-card strong { font-size: 25px; font-weight: 850; letter-spacing: -.04em; }
.seo-featured-card small { font-size: 10px; }
.seo-how-grid h3 { font-size: 22px; }
.seo-how-grid p { font-size: 13px; line-height: 1.62; }

.seo-territory-panel__head span { font-size: 18px; font-weight: 850; }
.seo-territory-panel__head strong { font-size: 10px; font-weight: 750; }
.seo-municipality-card__copy strong { font-size: 11px; font-weight: 750; }
.seo-municipality-card__copy small { font-size: 8px; }
.seo-territory-tabs button,
.seo-territory-more { font-weight: 800; }

.seo-hub-final h2,
.seo-city-final h2 {
    font-size: clamp(30px, 3.35vw, 44px);
    font-weight: 900;
    line-height: 1.02;
    letter-spacing: -.045em;
}

.seo-hub-final p,
.seo-city-final p {
    font-size: 13px;
    line-height: 1.6;
}

/* Páginas locales */
.seo-city-scene__header strong,
.seo-city-scene__headline strong,
.seo-city-scene__stats strong {
    font-weight: 800;
}

.seo-city-intent-card h3 { font-size: 21px; }
.seo-city-intent-card p { font-size: 12px; line-height: 1.62; }
.seo-city-plan-card__body h3 { font-size: 18px; font-weight: 800; }
.seo-city-plan-card__body p { font-size: 10px; line-height: 1.45; }
.seo-city-plan-card__body b { font-size: 10px; font-weight: 800; }
.seo-city-empty h3 { font-size: 20px; }
.seo-city-empty p { font-size: 12px; line-height: 1.6; }
.seo-city-story__steps h3 { font-size: 19px; }
.seo-city-story__steps p { font-size: 11px; line-height: 1.6; }
.seo-city-related-grid strong { font-size: 11px; font-weight: 750; }
.seo-city-related-grid small { font-size: 8px; }

@media (max-width: 640px) {
    .seo-hub-kicker,
    .seo-city-kicker {
        font-size: 9px;
        font-weight: 800;
        letter-spacing: .11em;
    }

    .seo-hub-hero h1 {
        font-size: clamp(40px, 12.5vw, 54px);
        line-height: .96;
        letter-spacing: -.055em;
    }

    .seo-city-hero h1 {
        font-size: clamp(38px, 11.8vw, 52px);
        line-height: .97;
        letter-spacing: -.052em;
    }

    .seo-hub-hero__content > p,
    .seo-city-hero__copy > p {
        font-size: 14px;
        line-height: 1.62;
    }

    .seo-hub-search-shell input { font-size: 13px; }

    .seo-hub-btn,
    .seo-city-btn {
        font-size: 12px;
        font-weight: 800;
    }

    .seo-hub-section-head h2,
    .seo-city-section-head h2,
    .seo-city-story__copy h2,
    .seo-hub-directory-head h2 {
        font-size: clamp(29px, 8.6vw, 35px);
        line-height: 1.03;
        letter-spacing: -.046em;
    }

    .seo-hub-section-head p,
    .seo-city-section-head p,
    .seo-city-story__copy p,
    .seo-hub-directory-head p {
        font-size: 13px;
        line-height: 1.66;
    }

    .seo-ecosystem-card h3 { font-size: 21px; }
    .seo-ecosystem-card p { font-size: 11.5px; }
    .seo-featured-card strong { font-size: 23px; }
    .seo-how-grid h3 { font-size: 20px; }
    .seo-how-grid p { font-size: 11.5px; }

    .seo-hub-final h2,
    .seo-city-final h2 {
        font-size: clamp(27px, 8vw, 32px);
        line-height: 1.04;
    }

    .seo-city-intent-card h3 { font-size: 20px; }
    .seo-city-intent-card p { font-size: 11.5px; }
    .seo-city-plan-card__body h3 { font-size: 17px; }
    .seo-city-story__steps h3 { font-size: 18px; }
}

@media (max-width: 390px) {
    .seo-hub-hero h1 { font-size: clamp(38px, 12.2vw, 49px); }
    .seo-city-hero h1 { font-size: clamp(36px, 11.5vw, 47px); }
}