/* =========================================================
   ChatCooL Home Portal
   ========================================================= */

.home-hero {
    position: relative;
    overflow: hidden;

    padding: 74px 0 62px;

    background:
        radial-gradient(
            circle at 88% 14%,
            rgba(0, 228, 253, .25),
            transparent 27%
        ),
        radial-gradient(
            circle at 4% 80%,
            rgba(5, 90, 223, .13),
            transparent 28%
        ),
        linear-gradient(
            135deg,
            #ffffff 0%,
            #f1f8ff 55%,
            #e8f8ff 100%
        );
}

.home-hero-grid {
    display: grid;

    grid-template-columns:
        minmax(0, 1.08fr)
        minmax(380px, .92fr);

    gap: 58px;

    align-items: center;
}

.adult-badge {
    display: inline-flex;
    align-items: center;

    padding: 8px 13px;

    color: #fff;

    background: var(--navy);

    border-radius: 999px;

    font-size: 12px;
    font-weight: 900;
    letter-spacing: .03em;
}

.adult-badge b {
    margin-right: 7px;

    color: var(--cyan);
}

.home-hero h1 {
    max-width: 760px;

    margin: 20px 0 18px;

    color: var(--navy);

    font-size: clamp(47px, 6.5vw, 76px);
    line-height: .98;
    letter-spacing: -3px;
}

.home-hero h1 span {
    color: var(--blue);
}

.home-hero-lead {
    max-width: 700px;

    color: var(--muted);

    font-size: 18px;
    line-height: 1.75;
}

.hero-values {
    display: flex;
    flex-wrap: wrap;

    gap: 10px 18px;

    margin-top: 22px;

    color: #546b95;

    font-size: 13px;
    font-weight: 800;
}

.hero-values span::before {
    content: "✓";

    margin-right: 6px;

    color: var(--blue);
}

.hero-visual {
    position: relative;

    min-height: 430px;

    overflow: hidden;

    border-radius: 30px;

    background:
        radial-gradient(
            circle at 73% 24%,
            rgba(0,228,253,.35),
            transparent 23%
        ),
        linear-gradient(
            145deg,
            #0b337f,
            #03113f
        );

    box-shadow:
        0 35px 75px rgba(9, 47, 112, .20);
}

.hero-visual img {
    display: block;

    width: 100%;
    height: 430px;

    object-fit: cover;
}

.hero-visual::after {
    content: "";

    position: absolute;
    inset: 0;

    pointer-events: none;

    background:
        linear-gradient(
            180deg,
            transparent 42%,
            rgba(2, 12, 48, .75)
        );
}

.hero-visual-copy {
    position: absolute;
    z-index: 2;

    left: 28px;
    right: 28px;
    bottom: 27px;

    color: white;
}

.hero-visual-copy small {
    display: block;

    margin-bottom: 6px;

    color: var(--cyan);

    font-weight: 900;
}

.hero-visual-copy strong {
    display: block;

    font-size: 28px;
    line-height: 1.1;
}


/* BUSCADOR */

.room-search-wrap {
    position: relative;
    z-index: 10;

    margin-top: -28px;
}

.room-search-box {
    padding: 20px;

    background: white;

    border: 1px solid #dce8f7;
    border-radius: 20px;

    box-shadow:
        0 20px 55px rgba(18, 63, 125, .12);
}

.room-search-row {
    display: grid;

    grid-template-columns:
        minmax(0,1fr)
        auto;

    gap: 10px;
}

.room-search {
    width: 100%;

    min-height: 54px;

    padding: 0 17px;

    color: var(--navy);

    background: #f7faff;

    border: 1px solid #dae7f6;
    border-radius: 12px;

    outline: none;

    font-size: 15px;
}

.room-search:focus {
    border-color: var(--blue);

    box-shadow:
        0 0 0 3px rgba(5,90,223,.08);
}

.search-button {
    min-width: 120px;

    border: 0;
    border-radius: 12px;

    color: white;

    background:
        linear-gradient(
            135deg,
            var(--blue),
            var(--blue-2)
        );

    font-weight: 900;
    cursor: pointer;
}

.search-results {
    display: none;

    margin-top: 10px;

    overflow: hidden;

    background: white;

    border: 1px solid #dfe9f6;
    border-radius: 13px;
}

.search-results.visible {
    display: block;
}

.search-result {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 15px;

    padding: 12px 14px;

    border-bottom: 1px solid #edf2f8;
}

.search-result:last-child {
    border-bottom: 0;
}

.search-result:hover {
    background: #f3f8ff;
}

.search-result strong {
    color: var(--navy);
}

.search-result span {
    color: var(--muted);

    font-size: 12px;
}


/* STATS */

.portal-stats {
    display: grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap: 13px;

    margin-top: 27px;
}

.portal-stat {
    padding: 18px;

    text-align: center;

    background: white;

    border: 1px solid #dfe9f6;
    border-radius: 15px;
}

.portal-stat strong {
    display: block;

    color: var(--navy);

    font-size: 26px;
}

.portal-stat span {
    display: block;

    margin-top: 3px;

    color: var(--muted);

    font-size: 12px;
    font-weight: 700;
}


/* CATEGORY CARDS */

.portal-section {
    padding: 78px 0;
}

.portal-section.white {
    background: #fff;
}

.portal-heading {
    max-width: 780px;

    margin-bottom: 30px;
}

.portal-heading.center {
    margin-left: auto;
    margin-right: auto;

    text-align: center;
}

.portal-heading .kicker {
    color: var(--blue);

    font-size: 12px;
    font-weight: 900;
    letter-spacing: .13em;
    text-transform: uppercase;
}

.portal-heading h2 {
    margin: 8px 0 10px;

    color: var(--navy);

    font-size: clamp(31px,4vw,45px);
    letter-spacing: -1.5px;
}

.portal-heading p {
    margin: 0;

    color: var(--muted);

    line-height: 1.7;
}

.category-grid {
    display: grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap: 17px;
}

.category-card {
    position: relative;

    min-height: 245px;

    overflow: hidden;

    border-radius: 21px;

    background:
        linear-gradient(
            145deg,
            #124997,
            #05164c
        );

    box-shadow:
        0 16px 35px rgba(15,55,113,.10);

    transition:
        transform .18s ease,
        box-shadow .18s ease;
}

.category-card:hover {
    transform: translateY(-5px);

    box-shadow:
        0 25px 48px rgba(15,55,113,.16);
}

.category-card img {
    width: 100%;
    height: 245px;

    display: block;

    object-fit: cover;
}

.category-card::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(3,11,45,.02),
            rgba(3,11,45,.90)
        );
}

.category-copy {
    position: absolute;
    z-index: 2;

    left: 20px;
    right: 20px;
    bottom: 19px;

    color: white;
}

.category-copy small {
    color: var(--cyan);

    font-size: 11px;
    font-weight: 900;
}

.category-copy h3 {
    margin: 4px 0;

    font-size: 21px;
}

.category-copy p {
    margin: 0;

    color: #d2def3;

    font-size: 12px;
}


/* CIUDADES */

.city-grid {
    display: grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap: 14px;
}

.city-card {
    position: relative;

    min-height: 170px;

    overflow: hidden;

    padding: 20px;

    border-radius: 18px;

    background:
        linear-gradient(
            145deg,
            #e9f5ff,
            #dbeeff
        );

    border: 1px solid #d6e7f5;
}

.city-card.has-image {
    color: white;
}

.city-card img {
    position: absolute;
    inset: 0;

    width: 100%;
    height: 100%;

    object-fit: cover;
}

.city-card.has-image::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.02),
            rgba(2,12,48,.80)
        );
}

.city-copy {
    position: absolute;
    z-index: 2;

    left: 18px;
    right: 18px;
    bottom: 17px;
}

.city-card:not(.has-image) .city-copy {
    color: var(--navy);
}

.city-copy strong {
    display: block;

    font-size: 19px;
}

.city-copy span {
    display: block;

    margin-top: 3px;

    color: inherit;

    opacity: .82;

    font-size: 12px;
}


/* FEATURED ROOMS */

.featured-grid {
    display: grid;

    grid-template-columns:
        repeat(4,minmax(0,1fr));

    gap: 13px;
}

.featured-room {
    padding: 18px;

    background: white;

    border: 1px solid #dce8f7;
    border-radius: 15px;

    transition: .15s ease;
}

.featured-room:hover {
    transform: translateY(-3px);

    border-color: #93c9ff;
}

.featured-room small {
    display: block;

    margin-bottom: 5px;

    color: var(--blue);

    font-size: 11px;
    font-weight: 900;
}

.featured-room strong {
    display: block;

    color: var(--navy);

    font-size: 16px;
}

.featured-room span {
    display: block;

    margin-top: 7px;

    color: var(--muted);

    font-size: 12px;
}


/* +18 GLOBAL NOTICE */

.global-adult-notice {
    padding: 30px 0;

    color: white;

    background:
        linear-gradient(
            135deg,
            #061445,
            #0a2c75
        );
}

.adult-notice-inner {
    display: flex;

    align-items: center;
    justify-content: space-between;

    gap: 30px;
}

.adult-notice-inner strong {
    display: block;

    font-size: 21px;
}

.adult-notice-inner p {
    max-width: 750px;

    margin: 5px 0 0;

    color: #b9cae9;

    line-height: 1.55;
}

.adult-18 {
    flex: 0 0 auto;

    width: 72px;
    height: 72px;

    display: grid;
    place-items: center;

    color: var(--navy);

    background: var(--cyan);

    border-radius: 50%;

    font-size: 23px;
    font-weight: 950;
}


/* SEO HOME */

.home-seo {
    display: grid;

    grid-template-columns:
        minmax(0,1fr)
        minmax(0,1fr);

    gap: 55px;
}

.home-seo h2 {
    margin: 0 0 16px;

    color: var(--navy);

    font-size: 31px;
}

.home-seo h3 {
    margin: 28px 0 10px;

    color: var(--navy);

    font-size: 21px;
}

.home-seo p {
    color: #586d94;

    line-height: 1.85;
}


/* MOBILE */

@media (max-width: 980px) {

    .home-hero-grid {
        grid-template-columns: 1fr;
    }

    .hero-visual {
        min-height: 330px;
    }

    .category-grid,
    .city-grid,
    .featured-grid {
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .home-seo {
        grid-template-columns: 1fr;
    }

}

@media (max-width: 620px) {

    .home-hero {
        padding-top: 55px;
    }

    .home-hero h1 {
        font-size: 45px;
        letter-spacing: -2px;
    }

    .room-search-row {
        grid-template-columns: 1fr;
    }

    .search-button {
        min-height: 48px;
    }

    .portal-stats {
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

    .category-grid,
    .city-grid,
    .featured-grid {
        grid-template-columns: 1fr;
    }

    .adult-notice-inner {
        align-items: flex-start;
    }

}


/* =========================================================
   MAPA INTERACTIVO ESPAÑA
   ========================================================= */

.portal-map-section {
    background:
        linear-gradient(
            180deg,
            #f5f9ff 0%,
            #eef7ff 100%
        );
}

.portal-map-layout {
    display: grid;

    grid-template-columns:
        minmax(0,1.55fr)
        minmax(300px,.45fr);

    gap: 24px;

    align-items: stretch;
}

.portal-map-card {
    min-height: 570px;

    display: flex;
    align-items: center;

    padding: 30px;

    background: #fff;

    border: 1px solid #dce8f7;
    border-radius: 26px;

    box-shadow:
        0 22px 55px rgba(18,63,125,.09);
}

.spain-map {
    width: 100%;
    min-height: 500px;

    display: grid;
    place-items: center;
}

.spain-map svg {
    display: block;

    width: 100%;
    height: auto;

    max-height: 510px;
}

.spain-map path {
    fill: #d8eaff;

    stroke: #fff;
    stroke-width: 1.4;

    vector-effect:
        non-scaling-stroke;

    cursor: pointer;

    transition:
        fill .15s ease,
        filter .15s ease,
        transform .15s ease;
}

.spain-map a:hover path,
.spain-map a:focus path {
    fill: #00e4fd;

    filter:
        drop-shadow(
            0 4px 6px rgba(5,90,223,.25)
        );
}

.portal-provinces {
    padding: 22px;

    background: #fff;

    border: 1px solid #dce8f7;
    border-radius: 26px;

    box-shadow:
        0 22px 55px rgba(18,63,125,.07);
}

.portal-provinces-title {
    margin-bottom: 15px;

    color: #061445;

    font-size: 17px;
    font-weight: 900;
}

.portal-province-list {
    max-height: 510px;

    overflow-y: auto;

    display: grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap: 7px;

    padding-right: 4px;
}

.portal-province-list a {
    padding: 9px 10px;

    color: #536a94;

    background: #f6f9fd;

    border: 1px solid #e2ebf7;
    border-radius: 9px;

    font-size: 12px;
    font-weight: 700;

    transition: .15s ease;
}

.portal-province-list a:hover {
    color: #fff;

    background: #055adf;
    border-color: #055adf;
}

.map-loading {
    color: #8396b8;

    font-size: 14px;
}


@media (max-width: 900px) {

    .portal-map-layout {
        grid-template-columns: 1fr;
    }

    .portal-map-card {
        min-height: auto;
    }

    .portal-province-list {
        max-height: none;
    }

}


@media (max-width: 560px) {

    .portal-map-card {
        padding: 10px;
    }

    .spain-map {
        min-height: 330px;
    }

    .portal-province-list {
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

}


/* =========================================================
   MAPA INTERACTIVO ESPAÑA
   ========================================================= */

.portal-map-section {
    background:
        linear-gradient(
            180deg,
            #f5f9ff 0%,
            #eef7ff 100%
        );
}

.portal-map-layout {
    display: grid;

    grid-template-columns:
        minmax(0,1.55fr)
        minmax(300px,.45fr);

    gap: 24px;

    align-items: stretch;
}

.portal-map-card {
    min-height: 570px;

    display: flex;
    align-items: center;

    padding: 30px;

    background: #fff;

    border: 1px solid #dce8f7;
    border-radius: 26px;

    box-shadow:
        0 22px 55px rgba(18,63,125,.09);
}

.spain-map {
    width: 100%;
    min-height: 500px;

    display: grid;
    place-items: center;
}

.spain-map svg {
    display: block;

    width: 100%;
    height: auto;

    max-height: 510px;
}

.spain-map path {
    fill: #d8eaff;

    stroke: #fff;
    stroke-width: 1.4;

    vector-effect:
        non-scaling-stroke;

    cursor: pointer;

    transition:
        fill .15s ease,
        filter .15s ease,
        transform .15s ease;
}

.spain-map a:hover path,
.spain-map a:focus path {
    fill: #00e4fd;

    filter:
        drop-shadow(
            0 4px 6px rgba(5,90,223,.25)
        );
}

.portal-provinces {
    padding: 22px;

    background: #fff;

    border: 1px solid #dce8f7;
    border-radius: 26px;

    box-shadow:
        0 22px 55px rgba(18,63,125,.07);
}

.portal-provinces-title {
    margin-bottom: 15px;

    color: #061445;

    font-size: 17px;
    font-weight: 900;
}

.portal-province-list {
    max-height: 510px;

    overflow-y: auto;

    display: grid;

    grid-template-columns:
        repeat(2,minmax(0,1fr));

    gap: 7px;

    padding-right: 4px;
}

.portal-province-list a {
    padding: 9px 10px;

    color: #536a94;

    background: #f6f9fd;

    border: 1px solid #e2ebf7;
    border-radius: 9px;

    font-size: 12px;
    font-weight: 700;

    transition: .15s ease;
}

.portal-province-list a:hover {
    color: #fff;

    background: #055adf;
    border-color: #055adf;
}

.map-loading {
    color: #8396b8;

    font-size: 14px;
}


@media (max-width: 900px) {

    .portal-map-layout {
        grid-template-columns: 1fr;
    }

    .portal-map-card {
        min-height: auto;
    }

    .portal-province-list {
        max-height: none;
    }

}


@media (max-width: 560px) {

    .portal-map-card {
        padding: 10px;
    }

    .spain-map {
        min-height: 330px;
    }

    .portal-province-list {
        grid-template-columns:
            repeat(2,minmax(0,1fr));
    }

}


/* =========================================================
   HERO FOTOGRÁFICO
   ========================================================= */

.home-hero {
    min-height: 540px;

    display: flex;
    align-items: center;

    background:
        linear-gradient(
            90deg,
            rgba(2, 10, 48, .92) 0%,
            rgba(2, 10, 48, .84) 38%,
            rgba(2, 10, 48, .35) 70%,
            rgba(2, 10, 48, .12) 100%
        ),
        linear-gradient(135deg, rgba(5,90,223,.38), rgba(0,228,253,.10))
        center center / cover no-repeat;
}

.home-hero-grid {
    grid-template-columns: minmax(0, 720px);
}

.home-hero h1 {
    color: #fff;
}

.home-hero h1 span {
    color: #00e4fd;
}

.home-hero-lead {
    color: #d8e6ff;
}

.home-hero .hero-values {
    color: #e3efff;
}

.home-hero .hero-values span::before {
    color: #00e4fd;
}

.home-hero .button-outline {
    color: #fff;

    background: rgba(255,255,255,.10);

    border-color: rgba(255,255,255,.30);

    backdrop-filter: blur(6px);
}

/* la fotografía ya ocupa el hero completo */
.home-hero .hero-visual {
    display: none;
}


.category-card img {
    transition:
        transform .35s ease,
        filter .35s ease;
}

.category-card:hover img {
    transform: scale(1.045);
}

.category-card::after {
    background:
        linear-gradient(
            180deg,
            rgba(2,10,48,.02) 20%,
            rgba(2,10,48,.92) 100%
        );
}


@media (max-width: 700px) {

    .home-hero {
        min-height: 570px;

        background-position: 62% center;
    }

    .home-hero::before {
        content: "";

        position: absolute;
        inset: 0;

        background:
            rgba(2,10,48,.28);

        pointer-events: none;
    }

    .home-hero-grid {
        position: relative;
        z-index: 2;
    }
}


/* =========================================================
   MEJORA VISUAL FOTOGRAFÍAS
   ========================================================= */


/* CATEGORÍAS */

.category-card {
    min-height: 275px;
}

.category-card img {
    height: 275px;
}

.category-copy {
    bottom: 18px;
}

.category-copy h3 {
    font-size: 22px;
}


/* CIUDADES */

.city-card {
    min-height: 190px;
    padding: 0;
}

.city-card img {
    transition:
        transform .35s ease,
        filter .35s ease;
}

.city-card:hover img {
    transform: scale(1.055);
}

.city-card::after {
    background:
        linear-gradient(
            180deg,
            rgba(0,0,0,.02) 25%,
            rgba(1,8,37,.88) 100%
        ) !important;
}

.city-copy strong {
    color: #fff;

    font-size: 20px;
}

.city-copy span {
    color: #dce9ff;
}


/* Con una foto genérica podemos variar el encuadre
   mientras llegan las fotos específicas de cada ciudad */

.city-card:nth-child(2) img {
    object-position: 65% center;
}

.city-card:nth-child(3) img {
    object-position: 35% center;
}

.city-card:nth-child(4) img {
    object-position: 75% center;
}

.city-card:nth-child(5) img {
    object-position: 25% center;
}

.city-card:nth-child(6) img {
    object-position: 58% center;
}

.city-card:nth-child(7) img {
    object-position: 42% center;
}

.city-card:nth-child(8) img {
    object-position: 70% center;
}


/* SALAS DESTACADAS */

.featured-room {
    padding: 0;

    overflow: hidden;

    background: #fff;
}

.featured-thumb {
    position: relative;

    width: 100%;
    height: 125px;

    overflow: hidden;

    background: #eaf3ff;
}

.featured-thumb::after {
    content: "";

    position: absolute;
    inset: 0;

    background:
        linear-gradient(
            180deg,
            rgba(2,10,48,0),
            rgba(2,10,48,.24)
        );
}

.featured-thumb img {
    display: block;

    width: 100%;
    height: 100%;

    object-fit: cover;

    transition:
        transform .35s ease;
}

.featured-room:hover .featured-thumb img {
    transform: scale(1.055);
}

.featured-body {
    padding: 15px 16px 17px;
}

.featured-body small {
    color: #055adf;
}

.featured-body strong {
    margin-top: 2px;

    color: #061445;

    font-size: 16px;
}

.featured-body span {
    margin-top: 8px;

    color: #7184a7;
}


/* FOTO HERO */

.home-hero {
    background-position:
        center 42%;
}


/* Las imágenes tienen protagonismo sin
   convertir la página en un mosaico recargado */

.category-card,
.city-card,
.featured-room {
    isolation: isolate;
}



/* CHATCOOL NO-IMAGE DESIGN 20261005 */

/* ==========================================================
   HERO
   ========================================================== */

.home-hero {
    position: relative;
    overflow: hidden;
    padding: 82px 0 78px;

    background:
        radial-gradient(
            circle at 82% 12%,
            rgba(0,228,253,.24),
            transparent 26%
        ),
        radial-gradient(
            circle at 65% 92%,
            rgba(8,124,255,.22),
            transparent 31%
        ),
        linear-gradient(
            135deg,
            #010522 0%,
            #020a30 42%,
            #04134c 72%,
            #055adf 140%
        ) !important;
}

.home-hero::before {
    content: "";
    position: absolute;
    width: 520px;
    height: 520px;
    right: -220px;
    top: -290px;

    border: 1px solid rgba(255,255,255,.12);
    border-radius: 50%;

    box-shadow:
        0 0 0 80px rgba(255,255,255,.025),
        0 0 0 160px rgba(0,228,253,.018);

    pointer-events: none;
}

.home-hero::after {
    content: "";
    position: absolute;
    left: 42%;
    bottom: -220px;

    width: 430px;
    height: 430px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(0,228,253,.12),
            transparent 66%
        );

    pointer-events: none;
}

.home-hero-grid {
    position: relative;
    z-index: 2;

    grid-template-columns:
        minmax(0,1.18fr)
        minmax(300px,.62fr);

    gap: 58px;
}

.home-hero h1 {
    color: #fff !important;
    max-width: 820px;
}

.home-hero-lead {
    color: rgba(255,255,255,.78) !important;
}

.home-hero .eyebrow,
.home-hero .kicker {
    color: #00e4fd !important;
}

.hero-values {
    border-color: rgba(255,255,255,.12) !important;
}

.hero-values strong {
    color: #fff !important;
}

.hero-values span {
    color: rgba(255,255,255,.65) !important;
}


/* ==========================================================
   PANEL ABSTRACTO DEL HERO
   ========================================================== */

.hero-visual {
    position: relative;
    display: grid !important;
    place-items: center;

    min-height: 350px;
    padding: 38px;

    overflow: hidden;

    border: 1px solid rgba(255,255,255,.15);
    border-radius: 34px;

    background:
        radial-gradient(
            circle at 75% 20%,
            rgba(0,228,253,.24),
            transparent 26%
        ),
        linear-gradient(
            145deg,
            rgba(255,255,255,.09),
            rgba(255,255,255,.025)
        ) !important;

    box-shadow:
        inset 0 1px 0 rgba(255,255,255,.12),
        0 35px 80px rgba(0,0,0,.25);

    backdrop-filter: blur(12px);
}

.hero-visual img {
    display: none !important;
}

.hero-visual::before {
    content: "561";

    position: absolute;
    top: 54px;

    color: #fff;

    font-size: clamp(76px,9vw,122px);
    line-height: .85;
    font-weight: 950;
    letter-spacing: -7px;

    text-shadow:
        0 0 45px rgba(0,228,253,.20);
}

.hero-visual::after {
    content: "SALAS PARA CONECTAR";

    position: absolute;
    top: 165px;

    color: #00e4fd;

    font-size: 13px;
    font-weight: 900;
    letter-spacing: 2.8px;
}

.hero-visual-copy {
    position: relative !important;
    z-index: 3;

    align-self: end;

    width: 100%;
    padding-top: 195px;

    color: rgba(255,255,255,.75) !important;
    text-align: center;
}


/* ==========================================================
   BUSCADOR
   ========================================================== */

.room-search-wrap {
    position: relative;
    z-index: 4;

    margin-top: -27px;
}

.room-search-wrap .container {
    border-radius: 24px;
}


/* ==========================================================
   CATEGORÍAS
   ========================================================== */

.category-grid {
    gap: 18px !important;
}

.category-card {
    position: relative;

    min-height: 205px;
    padding: 29px 27px !important;

    overflow: hidden;

    border: 1px solid #e3ebf7 !important;
    border-radius: 24px !important;

    background:
        linear-gradient(
            145deg,
            #ffffff 0%,
            #f7fbff 100%
        ) !important;

    box-shadow:
        0 14px 40px rgba(10,45,100,.07) !important;

    transition:
        transform .22s ease,
        box-shadow .22s ease,
        border-color .22s ease;
}

.category-card:hover {
    transform: translateY(-5px);

    border-color: rgba(5,90,223,.24) !important;

    box-shadow:
        0 22px 55px rgba(10,45,100,.12) !important;
}

.category-card img,
.category-card .category-thumb {
    display: none !important;
}

.category-card::before {
    content: "";

    display: block;

    width: 46px;
    height: 7px;

    margin-bottom: 24px;

    border-radius: 99px;

    background:
        linear-gradient(
            90deg,
            #00e4fd,
            #087cff
        );
}

.category-card::after {
    content: "";

    position: absolute;
    width: 130px;
    height: 130px;

    top: -70px;
    right: -70px;

    border-radius: 50%;

    background:
        radial-gradient(
            circle,
            rgba(0,228,253,.14),
            rgba(0,228,253,0) 70%
        );

    pointer-events: none;
}

.category-copy {
    position: relative;
    z-index: 2;
}


/* ==========================================================
   CIUDADES
   ========================================================== */

.city-grid {
    gap: 14px !important;
}

.city-card,
.city-card.has-image {
    position: relative;

    min-height: 118px !important;

    padding: 24px 22px 22px 58px !important;

    overflow: hidden;

    border: 1px solid #e3ebf7 !important;
    border-radius: 20px !important;

    background:
        #fff !important;

    box-shadow:
        0 10px 30px rgba(10,45,100,.055) !important;
}

.city-card:hover {
    border-color: rgba(5,90,223,.25) !important;
    transform: translateY(-3px);
}

.city-card img {
    display: none !important;
}

.city-card::before {
    content: "";

    position: absolute;

    left: 24px;
    top: 29px;

    width: 15px;
    height: 15px;

    border: 5px solid #087cff;
    border-radius: 50%;

    box-shadow:
        0 0 0 6px rgba(8,124,255,.09);
}

.city-card::after {
    content: "";

    position: absolute;

    left: 31px;
    top: 48px;

    width: 2px;
    height: 11px;

    background: #087cff;

    transform: rotate(28deg);
    border-radius: 2px;
}

.city-copy {
    position: relative !important;
    inset: auto !important;

    color: inherit !important;
}


/* ==========================================================
   DESTACADAS
   ========================================================== */

.featured-grid {
    gap: 16px !important;
}

.featured-room {
    position: relative;

    overflow: hidden;

    border: 1px solid #e0e9f6 !important;
    border-radius: 22px !important;

    background:
        linear-gradient(
            135deg,
            #fff,
            #f7fbff
        ) !important;

    box-shadow:
        0 13px 35px rgba(8,38,90,.065) !important;
}

.featured-room::before {
    content: "#";

    position: absolute;

    right: 18px;
    top: 7px;

    color: rgba(5,90,223,.07);

    font-size: 82px;
    line-height: 1;
    font-weight: 950;

    pointer-events: none;
}

.featured-thumb,
.featured-room img {
    display: none !important;
}

.featured-body {
    position: relative;
    z-index: 2;

    padding: 25px !important;
}


/* ==========================================================
   MAPA
   ========================================================== */

.spain-map {
    border-radius: 28px !important;

    background:
        radial-gradient(
            circle at 50% 20%,
            rgba(0,228,253,.08),
            transparent 38%
        ),
        linear-gradient(
            180deg,
            #f8fbff,
            #eef6ff
        ) !important;

    border: 1px solid #deebfa !important;

    box-shadow:
        0 18px 52px rgba(14,55,110,.08);
}


/* ==========================================================
   SECCIONES
   ========================================================== */

.portal-section {
    padding-top: 72px;
    padding-bottom: 72px;
}

.portal-section.white {
    background: #fff;
}


/* ==========================================================
   MÓVIL
   ========================================================== */

@media (max-width: 900px) {

    .home-hero {
        padding: 62px 0 58px;
    }

    .home-hero-grid {
        grid-template-columns: 1fr !important;
        gap: 35px;
    }

    .hero-visual {
        min-height: 280px;
    }

    .hero-visual::before {
        top: 44px;
        font-size: 86px;
    }

    .hero-visual::after {
        top: 132px;
    }

    .hero-visual-copy {
        padding-top: 155px;
    }
}

@media (max-width: 600px) {

    .home-hero {
        padding-top: 48px;
    }

    .hero-visual {
        min-height: 245px;
        border-radius: 25px;
    }

    .category-card {
        min-height: auto;
    }

    .city-card,
    .city-card.has-image {
        min-height: 100px !important;
    }
}