/* ==========================================================
   CHATCOOL — HOME POWER
   Diseño sin fotografías
   ========================================================== */

:root {
    --cc-navy: #010522;
    --cc-navy2: #020a30;
    --cc-navy3: #04134c;
    --cc-blue: #055adf;
    --cc-electric: #087cff;
    --cc-cyan: #00e4fd;

    --cc-text: #071634;
    --cc-muted: #61708a;
    --cc-line: #dde8f5;
    --cc-soft: #f4f8fd;
}


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

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

    padding:
        88px 0
        125px !important;

    background:
        radial-gradient(
            circle at 76% 18%,
            rgba(0,228,253,.22),
            transparent 23%
        ),
        radial-gradient(
            circle at 92% 85%,
            rgba(8,124,255,.30),
            transparent 32%
        ),
        linear-gradient(
            115deg,
            #010522 0%,
            #020a30 38%,
            #04134c 68%,
            #055adf 150%
        ) !important;
}


/* halo superior */
.home-hero::before {
    content: "";

    position: absolute;
    width: 800px;
    height: 800px;

    right: -380px;
    top: -570px;

    border-radius: 50%;

    border:
        1px solid rgba(255,255,255,.10);

    box-shadow:
        0 0 0 85px rgba(255,255,255,.025),
        0 0 0 170px rgba(0,228,253,.018),
        0 0 0 255px rgba(8,124,255,.014);

    pointer-events: none;
}


/* trama inferior */
.home-hero::after {
    content: "";

    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;

    height: 190px;

    opacity: .22;

    background-image:
        linear-gradient(
            rgba(255,255,255,.08) 1px,
            transparent 1px
        ),
        linear-gradient(
            90deg,
            rgba(255,255,255,.08) 1px,
            transparent 1px
        );

    background-size: 42px 42px;

    mask-image:
        linear-gradient(
            to top,
            black,
            transparent
        );

    pointer-events: none;
}


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

    display: block !important;

    max-width: 1000px;

    margin:
        0 auto !important;

    text-align: center;
}


.home-hero h1 {
    max-width: 950px !important;

    margin:
        20px auto 22px !important;

    color:
        #fff !important;

    font-size:
        clamp(58px,7vw,92px) !important;

    line-height:
        .91 !important;

    letter-spacing:
        -4.5px !important;

    font-weight:
        950 !important;
}


.home-hero h1 strong,
.home-hero h1 span {
    color:
        var(--cc-cyan) !important;
}


.home-hero-lead {
    max-width:
        730px !important;

    margin:
        0 auto 31px !important;

    color:
        rgba(255,255,255,.74) !important;

    font-size:
        19px !important;

    line-height:
        1.7 !important;
}


/* +18 */
.home-hero .eyebrow,
.home-hero .kicker {
    display:
        inline-flex !important;

    align-items:
        center;

    gap:
        8px;

    padding:
        8px 13px;

    border:
        1px solid rgba(0,228,253,.25);

    border-radius:
        999px;

    background:
        rgba(0,228,253,.09);

    color:
        var(--cc-cyan) !important;

    font-size:
        12px !important;

    font-weight:
        900 !important;

    letter-spacing:
        .4px !important;
}


/* Eliminamos el panel 561 de la derecha */
.hero-visual {
    display:
        none !important;
}


/* Botones */
.hero-actions {
    justify-content:
        center !important;

    margin-top:
        28px !important;

    gap:
        12px !important;
}


.hero-actions a {
    min-height:
        52px;

    padding:
        0 25px !important;

    display:
        inline-flex;

    align-items:
        center;

    justify-content:
        center;

    border-radius:
        13px !important;

    font-weight:
        850 !important;

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


.hero-actions a:hover {
    transform:
        translateY(-2px);
}


.hero-actions a:first-child {
    box-shadow:
        0 14px 35px
        rgba(8,124,255,.35);
}


/* Valores inferiores */
.hero-values {
    justify-content:
        center !important;

    gap:
        22px !important;

    margin-top:
        24px !important;

    color:
        rgba(255,255,255,.70) !important;

    font-size:
        13px !important;
}


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


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

.room-search-wrap {
    position:
        relative;

    z-index:
        20;

    margin-top:
        -48px !important;

    margin-bottom:
        0 !important;
}


.room-search-wrap .container {
    max-width:
        950px;

    padding:
        13px !important;

    border:
        1px solid rgba(7,36,83,.08);

    border-radius:
        22px !important;

    background:
        rgba(255,255,255,.97) !important;

    box-shadow:
        0 25px 70px
        rgba(8,37,87,.16) !important;
}


.room-search-wrap input {
    min-height:
        58px;

    padding-left:
        21px !important;

    border:
        0 !important;

    background:
        #f4f8fd !important;

    font-size:
        16px !important;
}


.room-search-wrap button {
    min-width:
        135px;

    min-height:
        58px;

    border-radius:
        13px !important;

    background:
        linear-gradient(
            135deg,
            var(--cc-electric),
            var(--cc-blue)
        ) !important;

    box-shadow:
        0 11px 25px
        rgba(5,90,223,.24);
}


/* ==========================================================
   STATS
   ========================================================== */

.stats-grid,
.home-stats {
    gap:
        12px !important;

    margin-top:
        22px !important;
}


.stats-grid > *,
.home-stats > * {
    border:
        1px solid #e2ebf6 !important;

    border-radius:
        18px !important;

    background:
        #fff !important;

    box-shadow:
        0 8px 27px rgba(12,44,90,.045);
}


.stats-grid strong,
.home-stats strong {
    color:
        var(--cc-navy) !important;

    font-size:
        25px !important;
}


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

.portal-section {
    padding:
        90px 0 !important;
}


.portal-section:nth-of-type(even) {
    background:
        #f5f9fe;
}


.portal-section-header,
.section-head {
    max-width:
        760px;

    margin:
        0 auto 44px !important;

    text-align:
        center;
}


.portal-section h2 {
    color:
        var(--cc-navy) !important;

    font-size:
        clamp(38px,4vw,54px) !important;

    line-height:
        1.02 !important;

    letter-spacing:
        -2.3px !important;
}


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

.category-grid {
    display:
        grid;

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

    gap:
        16px !important;
}


.category-card {
    position:
        relative;

    min-height:
        240px !important;

    padding:
        29px !important;

    overflow:
        hidden;

    border:
        1px solid #dfe9f5 !important;

    border-radius:
        25px !important;

    background:
        #fff !important;

    box-shadow:
        0 14px 38px
        rgba(8,39,91,.055) !important;

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


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

    border-color:
        rgba(8,124,255,.32) !important;

    box-shadow:
        0 27px 58px
        rgba(8,39,91,.12) !important;
}


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


/* gran identificador */
.category-card::before {
    display:
        grid;

    place-items:
        center;

    width:
        58px;

    height:
        58px;

    margin-bottom:
        27px;

    border-radius:
        18px;

    background:
        linear-gradient(
            135deg,
            rgba(0,228,253,.16),
            rgba(8,124,255,.12)
        );

    color:
        var(--cc-blue);

    font-size:
        19px;

    font-weight:
        950;
}


/* textos por categoría */
.category-card:nth-child(1)::before {
    content:
        "💬";
}

.category-card:nth-child(2)::before {
    content:
        "ES";
}

.category-card:nth-child(3)::before {
    content:
        "40+";
}

.category-card:nth-child(4)::before {
    content:
        "G";
}

.category-card:nth-child(5)::before {
    content:
        "L";
}

.category-card:nth-child(6)::before {
    content:
        "+18";
}

.category-card:nth-child(7)::before {
    content:
        "🌍";
}

.category-card:nth-child(8)::before {
    content:
        "#";
}


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

    position:
        absolute;

    right:
        24px;

    bottom:
        22px;

    color:
        var(--cc-electric);

    font-size:
        25px;

    font-weight:
        900;

    transition:
        transform .18s ease;
}


.category-card:hover::after {
    transform:
        translateX(5px);
}


.category-copy {
    position:
        relative !important;

    inset:
        auto !important;

    color:
        var(--cc-text) !important;
}


.category-copy span,
.category-copy small {
    color:
        var(--cc-electric) !important;

    font-weight:
        850 !important;
}


.category-copy h3,
.category-copy strong {
    color:
        var(--cc-navy) !important;

    font-size:
        22px !important;
}


.category-copy p {
    color:
        var(--cc-muted) !important;

    line-height:
        1.55 !important;
}


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

.city-grid {
    display:
        grid !important;

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

    gap:
        14px !important;
}


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

    display:
        flex !important;

    align-items:
        center !important;

    min-height:
        108px !important;

    padding:
        20px 18px 20px 66px !important;

    overflow:
        hidden;

    border:
        1px solid #dde8f5 !important;

    border-radius:
        20px !important;

    background:
        #fff !important;

    box-shadow:
        0 9px 25px
        rgba(8,39,91,.045) !important;

    transition:
        .18s ease;
}


.city-card:hover {
    transform:
        translateY(-4px);

    border-color:
        rgba(8,124,255,.35) !important;

    box-shadow:
        0 18px 40px
        rgba(8,39,91,.09) !important;
}


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


/* pin */
.city-card::before {
    content:
        "";

    position:
        absolute;

    left:
        24px;

    top:
        34px;

    width:
        18px;

    height:
        18px;

    border:
        5px solid var(--cc-electric);

    border-radius:
        50%;

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


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

    position:
        absolute;

    left:
        32px;

    top:
        54px;

    width:
        3px;

    height:
        14px;

    border-radius:
        5px;

    background:
        var(--cc-electric);

    transform:
        rotate(27deg);
}


.city-copy {
    position:
        static !important;

    display:
        block !important;

    opacity:
        1 !important;

    transform:
        none !important;

    color:
        var(--cc-text) !important;
}


.city-copy h3,
.city-copy strong {
    display:
        block !important;

    margin:
        0 0 5px !important;

    color:
        var(--cc-navy) !important;

    font-size:
        18px !important;

    font-weight:
        900 !important;
}


.city-copy span,
.city-copy small,
.city-copy p {
    display:
        block !important;

    color:
        #66809f !important;

    font-size:
        12px !important;

    font-weight:
        700 !important;
}


/* ==========================================================
   MAPA DE ESPAÑA
   ========================================================== */

.spain-map {
    position:
        relative;

    overflow:
        hidden;

    border:
        1px solid #d8e6f6 !important;

    border-radius:
        28px !important;

    background:
        #fff !important;

    box-shadow:
        0 20px 55px
        rgba(11,46,96,.075) !important;
}


.spain-map svg {
    filter:
        drop-shadow(
            0 14px 18px
            rgba(8,66,140,.12)
        );
}


.spain-map svg path {
    fill:
        #bcd9fa !important;

    stroke:
        #fff !important;

    stroke-width:
        1.2px !important;

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


.spain-map svg path:hover {
    fill:
        var(--cc-cyan) !important;

    cursor:
        pointer;
}


/* panel provincias */
.province-list,
.province-panel {
    border:
        1px solid #dbe6f3 !important;

    border-radius:
        24px !important;

    background:
        #fff !important;

    box-shadow:
        0 16px 45px
        rgba(8,41,95,.07);
}


.province-list a,
.province-panel a {
    border:
        1px solid #dfebf7 !important;

    border-radius:
        10px !important;

    background:
        #f6f9fd !important;

    color:
        #17416f !important;

    transition:
        .15s ease;
}


.province-list a:hover,
.province-panel a:hover {
    border-color:
        var(--cc-electric) !important;

    background:
        var(--cc-electric) !important;

    color:
        #fff !important;
}


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

.featured-grid {
    display:
        grid;

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

    gap:
        15px !important;
}


.featured-room {
    position:
        relative;

    min-height:
        170px;

    padding:
        0 !important;

    overflow:
        hidden;

    border:
        1px solid #dfe9f5 !important;

    border-radius:
        22px !important;

    background:
        linear-gradient(
            145deg,
            #fff,
            #f5f9ff
        ) !important;

    box-shadow:
        0 11px 30px
        rgba(8,39,91,.055) !important;

    transition:
        .18s ease;
}


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

    border-color:
        rgba(8,124,255,.34) !important;
}


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

    position:
        absolute;

    right:
        17px;

    top:
        5px;

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

    font-size:
        92px;

    line-height:
        1;

    font-weight:
        950;
}


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


.featured-body {
    position:
        relative;

    z-index:
        2;

    padding:
        28px !important;
}


.featured-body h3,
.featured-body strong {
    color:
        var(--cc-navy) !important;

    font-size:
        20px !important;
}


.featured-body p,
.featured-body span {
    color:
        var(--cc-muted);
}


/* ==========================================================
   +18 NOTICE
   ========================================================== */

.global-adult-notice {
    background:
        linear-gradient(
            135deg,
            #010522,
            #061858
        ) !important;

    color:
        #fff !important;
}


.global-adult-notice h2,
.global-adult-notice strong {
    color:
        #fff !important;
}


.global-adult-notice p {
    color:
        rgba(255,255,255,.72) !important;
}


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

@media (max-width: 1050px) {

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

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


@media (max-width: 760px) {

    .home-hero {
        padding:
            62px 0
            105px !important;
    }

    .home-hero h1 {
        font-size:
            clamp(48px,13vw,66px) !important;

        letter-spacing:
            -3px !important;
    }

    .home-hero-lead {
        font-size:
            17px !important;
    }

    .hero-values {
        flex-wrap:
            wrap !important;

        gap:
            10px 16px !important;
    }

    .room-search-wrap {
        margin-top:
            -40px !important;
    }

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

    .category-card {
        min-height:
            205px !important;
    }

    .portal-section {
        padding:
            65px 0 !important;
    }

    .portal-section h2 {
        font-size:
            38px !important;
    }
}


/* ==========================================================
   CHATCOOL — OVERRIDES FINALES
   ========================================================== */

/* ELIMINAR DEFINITIVAMENTE PANEL DEL HERO */
.home-hero .hero-visual {
    display: none !important;
}

.home-hero .home-hero-grid {
    display: block !important;
    grid-template-columns: none !important;
}

.home-hero .home-hero-grid > div:first-child {
    width: 100% !important;
    max-width: 980px !important;
    margin: 0 auto !important;
    text-align: center !important;
}


/* CATEGORÍAS: recuperar todos los textos */
.category-card,
.category-card * {
    text-shadow: none !important;
}

.category-card .category-copy {
    position: static !important;
    inset: auto !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
}

.category-card .category-copy h3,
.category-card .category-copy strong {
    color: #010522 !important;
    opacity: 1 !important;
}

.category-card .category-copy p {
    color: #61708a !important;
    opacity: 1 !important;
}

.category-card .category-copy span,
.category-card .category-copy small {
    color: #087cff !important;
    opacity: 1 !important;
}


/* CIUDADES: recuperar nombre y llamada */
.city-card,
.city-card * {
    text-shadow: none !important;
}

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

    display: block !important;

    opacity: 1 !important;
    visibility: visible !important;

    transform: none !important;
}

.city-card .city-copy h3,
.city-card .city-copy strong,
.city-card .city-copy a {
    color: #010522 !important;
    opacity: 1 !important;
    visibility: visible !important;
}

.city-card .city-copy span,
.city-card .city-copy small,
.city-card .city-copy p {
    color: #6a7f9c !important;
    opacity: 1 !important;
    visibility: visible !important;
}


/* MAPA: MÁS CONTRASTE */
.spain-map {
    background: #ffffff !important;
}

.spain-map svg path {
    fill: #82bdf7 !important;
    stroke: #ffffff !important;
    stroke-width: 1.4px !important;
}

.spain-map svg path:hover {
    fill: #00e4fd !important;
}


/* SALAS DESTACADAS */
.featured-room,
.featured-room * {
    text-shadow: none !important;
}

.featured-room h3,
.featured-room strong {
    color: #010522 !important;
}

.featured-room p,
.featured-room span {
    color: #61708a !important;
}