@media (hover: hover){

    a:hover > .text-swap > span,
    button:hover > .text-swap > span {
        transform: translateY(-100%);
    }
    .custom-option:hover {
        background-color: var(--primary-color);
    }
    
    header.start-style:hover {
        background-color: var(--primary-white);
        box-shadow: 0px 4px 4px rgba(0, 0, 0, 0.25);
        color: var(--primary-black);
    }
    .room-card::after {
        transition: background-color .3s ease-out;
    }
    .room-card:hover::after {
        background-color: rgba(0, 0, 0, .2);
    }
    .btn-tertiary:hover {
        border-bottom-color: currentColor;
    }
    .btn-outline:hover {
        border-color: var(--primary-color);
        background-color: var(--primary-color);
        color: var(--primary-black);
    }
    .gallery-thumb img {
        transition: transform .4s ease-out;
    }
    .gallery-thumb:hover img {
        transform: scale(1.04);
    }
}
@media (min-width: 1200px) {
    .gallery-slider {
        padding-left: calc((100% - 1120px) / 2);
    }
}
@media (min-width: 1200px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl {
        max-width: 1120px;
        margin-right: auto;
        margin-left: auto;
        padding-left: 0;
        padding-right: 0;
    }
}
@media (min-width: 1300px) {
    .container, .container-lg, .container-md, .container-sm, .container-xl, .container-xxl {
        max-width: 1120px;
        width: calc(100% - 160px);
        margin-right: auto;
        margin-left: auto;
    }
}
@media (max-width: 768px) {
    .custom-container {
        padding-left: 16px;
        padding-right: 16px;
        max-width: 100%;
        margin-left: 0;
        margin-right: 0;
    }
}

@media(min-width: 1600px) {
    
}
@media (min-width: 992px) {
    .room-info p{
        min-height: 42px;
    }
}
@media(max-width: 991px) {
    .mt-16m{margin-top: 16px;}
    .mt-37m{margin-top: 37px;}
    .mt-24m{margin-top: 24px;}
    .mt-40m{margin-top: 40px;}
    .mb-16m{margin-bottom: 16px;}
    .mb-24m{margin-bottom: 24px;}
    .pb-24m{padding-bottom: 24px;}
    .pl-0m{padding-right: 0px;}
    .mb-40m{margin-bottom: 40px;}
    .pad-40m{padding: 40px 0;}
    .pad-60m{padding: 60px 0;}
    .mb-8m{margin-bottom: 8px;}
    .mt-8m{margin-top: 8px;}
    .mb-9m{margin-bottom: 9px;}
    .pt-0m{padding-top: 0px;}
    .prl-0m{padding-left: 0; padding-right: 0;}
    .pt-24m{padding-top: 24px;}
    .pt-40m{padding-top: 40px;}
    .m-0m{margin: 0;}
    .mt-8m{margin-top: 8px;}
    .mt-16m{margin-top: 16px;}
    .mt-18m{margin-top: 18px;}
    .mt-20m{margin-top: 20px;}
    .mt-22m{margin-top: 22px;}
    .mt-24m{margin-top: 24px;}
    .mt-40m{margin-top: 40px;}
    .mt-38m{margin-top: 38px;}
    .mt-26m{margin-top: 26px;}
    .mt-32m{margin-top: 32px;}
    .mb-0m{margin-bottom: 0px;}
    .mb-32m{margin-bottom: 32px;}
    .mb-37m{margin-bottom: 38px;}
    .mb-39m{margin-bottom: 39px;}
    .mb-40m{margin-bottom: 40px;}
    .mb-42m{margin-bottom: 42px;}
    .p-24m{padding: 24px;}
    .pb-40m{padding-bottom: 40px;}
    .pb-20m{padding-bottom: 20px;}
    .pad-40m {padding: 40px 0;}
    .plr-0{padding-left: 0; padding-right: 0;}
    .gap-0m{gap: 0px;}
    .gap-8m{gap: 8px;}
    .gap-9m{gap: 9px;}
    .h-25m{height: 25px;}
}

@media(max-width: 768px) {
    
    header {
        --header-h: 48px;
    }
    .header-brand {
        width: 60px;
        height: 30px;
    }
    .header-actions {
        gap: 16px;
    }
    .icon-arrow {
        width: 14px;
        height: 14px;
    }
    .btn-menu {
        width: 24px;
        height: 24px;
    }
    
    header::after {
        display: none;
    }
    .menu-panel {
        height: calc(100vh - var(--header-h));
        height: calc(100svh - var(--header-h));
        padding: 16px 0;
        box-shadow: 1px 2px 4px rgba(0, 0, 0, 0.25);
    }
    .menu-list {
        position: static;
        width: auto;
        gap: 24px;
        align-items: flex-end;
    }
    
    .menu-inner {
        height: 100%;
    }
    .w-80m{
        width: 80%;
    }
    .mt-0m{margin-top: 0px;}
    .mt-40m{ margin-top: 40px;}
    .menu-media {
        left: 16px;
        top: auto;
        bottom: 42px;
        width: 164px;
        height: 227px;
    }
    
    .menu-link {
        padding: 6px 32px 6px 0;
        opacity: 1;
    }
    .menu-link-text {
        transform: none;
    }
    .menu-arrow {
        width: 24px;
        height: 24px;
        margin-top: -12px;
        opacity: 1;
        transform: none;
    }
    .menu-copy {
        top: initial;
        left: 16px;
        right: 16px;
        bottom: 16px;
        text-align: left;
    }
    .text-p-desk {
        color: inherit;
    }
    .btn-outline {
        height: 26px;
    }
    .intro.pad-60m {
        padding-bottom: 58px;
    }
    .rooms-section {
        border-radius: 16px 16px 0 0;
    }
    .room-card {
        height: auto;
        overflow: visible;
    }
    .room-card img {
        position: static;
        border-radius: 8px;
    }
    .room-card::after {
        display: none;
    }
    .room-info {
        position: static;
        margin-top: 8px;
    }
    .rooms-slider .swiper-slide:first-child .room-card,
    .rooms-slider .swiper-slide:last-child .room-card {
        border-radius: 0;
    }
    .slider-dots {
        display: flex;
    }
    .slider-dots.dots-40t{
        margin-top: 40px;
    }
    .amenity-card picture {
        margin-bottom: 8px;
    }
    .amenity-card img {
        height: auto;
    }
    .testimonials-section {
        border-radius: 8px 8px 0 0;
    }
    .testimonial-body {
        gap: 16px;
        padding-bottom: 8px;
    }
    .testimonial-quote {
        margin-bottom: 24px;
    }
    .testimonial-avatar {
        width: 36px;
        height: 36px;
    }
    .closing-section {
        border-radius: 0 0 8px 8px;
        align-items: flex-end;
        min-height: 612px;
        padding: 60px 0;
    }
    .closing-content {
        text-align: center;
    }
    .closing-isotipo {
        width: 31px;
        height: 40px;
        margin: 0 auto 8px;
    }
    .closing-text {
        max-width: none;
    }
    .gallery-slider .swiper-slide {
        width: 223px;
    }
    .gallery-slider img {
        height: 170px;
    }
    .thanks-section {
        min-height: 348px;
        padding: 108px 0 60px;
    }
    .page-hero {
        padding: 72px 0 60px;
    }
    .page-hero-card {
        align-items: flex-start;
        height: 638px;
        padding: 24px 16px;
        justify-content: center;
    }
    body[data-section="rooms"] .page-hero-content{ width: 75%;}
    .rooms-tabs {
        flex-wrap: wrap;
        justify-content: center;
        gap: 16px;
        width: 100%;
    }
    .room-tab {
        width: calc(50% - 8px);
        padding: 8px 10px;
    }
    .rooms-panel {
        height: auto;
        padding: 16px;
        border: 1px solid var(--primary-color);
        border-radius: 8px;
    }
    .rooms-info {
        position: relative;
        width: auto;
        height: auto;
        margin-bottom: 16px;
    }
    .rooms-arrows {
        top: auto;
        right: 16px;
        bottom: 352px;
    }
    .slider-arrow {
        width: 26px;
        height: 26px;
    }
    .slider-arrow svg {
        width: 16px;
        height: 16px;
    }
    .rooms-tabs{
        margin-bottom: 40px;
    }
    .rooms-gallery {
        position: relative;
        left: auto;
        right: auto;
        height: 320px;
        border-radius: 8px;
    }
    .rooms-gallery .swiper-slide {
        width: 100%;
        height: 320px;
        margin-top: 0;
    }
    .rooms-gallery .slider-dots {
        position: absolute;
        right: 0;
        bottom: 16px !important;
        left: 0;
        z-index: 1;
        margin: 0;
        color: var(--primary-white);
    }
    .rooms-gallery-dots.dots-white-gray .swiper-pagination-bullet{
        background-color: var(--color-light-gray);
    }
    .rooms-gallery-dots.dots-white-gray .swiper-pagination-bullet-active{
        background-color: var(--primary-white);
    }
    .nearby-slider .swiper-slide {
        width: 225px;
    }
    .nearby-card picture {
        margin-bottom: 16px;
    }
    .nearby-card img {
        height: 241px;
    }
    .nearby-list {
        gap: 8px;
    }
    .map-canvas {
        height: 345px;
    }
    .map-embed-home .map-canvas {
        height: 292px;
        aspect-ratio: auto;
    }
    .map-marker .map-label {
        top: 6px;
        height: 17px;
        padding: 0 7px;
        border-radius: 8px;
        font-size: 10px;
    }
    .map-marker .map-label-down {
        top: 34px;
    }
    .divider-section {
        height: 462px;
        padding-bottom: 58px;
        border-radius: 0 0 8px 8px;
    }
    .event-img {
        height: auto;
        object-fit: cover;
    }
    .divider-band {
        height: 240px;
        padding-bottom: 58px;
        border-radius: 8px;
    }
    .divider-top {
        padding-bottom: 46px;
        border-radius: 8px 8px 0 0;
    }
    .grupos-section {
        border-radius: 8px;
        min-height: 778px;
    }
    .map-img {
        height: 292px;
        object-fit: cover;
    }
    .lubina-section {
        height: auto;
        min-height: 462px;
        align-items: flex-end;
        padding: 40px 0;
        border-radius: 8px 8px 0 0;
    }
    .btn-lubina {
        padding: 6px 27.6px;
    }
    .btn-lubinam {
        padding: 6px 38px;
    }
    .lubina-content {
        text-align: center;
    }
    .lubina-logo {
        width: 159px;
        margin: 0 auto 16px;
    }
    .btn-map {
        padding: 6px 23.52px;
    }
    .promo-section {
        padding-bottom: 60px;
    }
    .promo-col-main {
        width: calc(100% + 8px);
        max-width: none;
        padding: 0;
        margin: 0 -4px;
    }
    .promo-col-main picture {
        width: 100%;
    }
    .promo-col-main img {
        height: 250px;
        border-radius: 0 0 8px 8px;
    }
    .promo-col-top {
        margin-top: 24px;
        margin-bottom: 0;
    }
    .promo-col-top img {
        height: 199px;
        border-radius: 8px;
    }
    .promo-content {
        margin-top: 94px;
        padding-right: 0;
    }
    .promo-logo {
        width: 152px;
    }
    .benefits-section {
        border-radius: 0 0 8px 8px;
    }
    .benefits-section .row {
        --bs-gutter-x: 16px;
    }
    .benefit {
        gap: 24px;
    }
    
    .benefits-section .row > [class*="col-"]:nth-child(-n+2) {
        margin-bottom: 32px;
    }
    
    .footer-isotipo {
        width: 47px;
        height: 60px;
    }
    .footer-top > [class*="col-"]:not(:last-child) {
        margin-bottom: 24px;
    }
    .footer-nav {
        gap: 16px;
    }
    .footer-nav a {
        padding: 6px 0;
    }
    
    .footer-bottom {
        flex-direction: column;
        align-items: flex-start;
        gap: 24px;
        margin-top: 96px;
    }
    .footer-legal {
        order: -1;
        flex-direction: column;
        gap: 16px;
    }
    
    .footer-copy {
        max-width: calc(100% - 56px);
    }
    
    .footer-social {
        position: absolute;
        top: 0;
        right: 0;
        flex-direction: column;
        justify-content: space-between;
        height: 112px;
    }
    
    .hero-section {
        padding-top: 72px;
    }
    .hero-content {
        padding-bottom: 40px;
    }
    .lubina-hero .page-hero-content {
        justify-content: flex-start;
        padding: 0;
    }
    .lubina-hero-logo {
        width: 159px;
        height: 25px;
        margin-bottom: 0;
    }
    .benefits-lubina {
        border-radius: 0;
    }
    .stage-viewport {
        display: block;
    }
    .stage-head {
        position: static;
        flex-direction: column;
        gap: 8px;
        padding-top: 0;
        padding-bottom: 40px;
    }
    .stage-head p {
        max-width: none;
    }
    .stage-track::after {
        display: none;
    }
    /* Card stack (patrón de angelus): cada card se pega un escalón más abajo que
       la anterior y la tapa, dejando visible solo su título — la fila de 44px del
       Figma. El scroll de la página nunca se retiene, por eso se siente natural. */
    .stage-item {
        position: sticky;
        flex-direction: column;
        align-items: stretch;
        gap: 0;
        margin-bottom: 0;
        padding-bottom: 24px;
        background-color: var(--color-cream);
        box-shadow: none;
    }
    .stage-item:nth-child(even) {
        flex-direction: column;
    }
    /* 48 = alto del header móvil; el escalón de 44 es la fila del Figma
       (2 del borde + 16 de padding + 22 del título) */
    .stage-item:nth-child(1) { top: 48px; }
    .stage-item:nth-child(2) { top: 92px; }
    .stage-item:nth-child(3) { top: 136px; }
    .stage-item:nth-child(4) { top: 180px; }
    .stage-item::before {
        content: '';
        display: block;
        height: 2px;
        background-color: currentColor;
    }
    /* La primera no lleva línea, pero sí su hueco: así todas las filas miden igual */
    .stage-item:first-child::before {
        background-color: transparent;
    }
    .stage-item h3 {
        padding: 16px 0 8px;
    }
    .stage-details {
        gap: 16px;
        padding-top: 0;
    }
    .stage-media {
        order: 2;
        width: 100%;
        height: 187px;
        margin-top: 16px;
    }
    .stage-media img {
        height: 100%;
    }
    .divider-round {
        border-radius: 16px;
        padding-bottom: 20px;
    }
    .divider-closing {
        padding-bottom: 46px;
    }
    .services-row > [class*="col-"]:nth-child(-n+3) {
        margin-bottom: 0;
    }
    .service-card {
        border-bottom: .5px solid var(--primary-color);
        padding-bottom: 0;
        transition: padding .55s cubic-bezier(.16, 1, .3, 1);
    }
    .service-card.is-open {
        padding-bottom: 16px;
    }
    .service-title {
        padding: 13px 0 12px;
        margin-bottom: 0;
        color: var(--primary-black);
        cursor: pointer;
    }
    .services-row > [class*="col-"]:first-child .service-card.is-open .service-title {
        padding-top: 0;
    }
    .service-card.is-open .service-title {
        padding-bottom: 8px;
        color: var(--primary-color);
        cursor: default;
    }
    .service-body {
        display: grid;
        grid-template-rows: 1fr;
        transition: grid-template-rows .55s cubic-bezier(.16, 1, .3, 1);
    }
    .service-body-inner {
        overflow: hidden;
    }
    .service-media {
        order: 3;
        width: 100%;
        height: auto;
        margin: 16px 0 0;
        transition: height .55s cubic-bezier(.16, 1, .3, 1), margin .55s cubic-bezier(.16, 1, .3, 1), opacity .4s ease-out;
    }
    .service-media img {
        height: auto;
    }
    .service-card:not(.is-open) .service-body {
        grid-template-rows: 0fr;
    }
    .service-card:not(.is-open) .service-media {
        height: 0;
        margin: 0;
        opacity: 0;
    }
    .divider-lubina {
        height: 462px;
        padding: 40px 0;
        color: var(--color-cream);
    }
    .divider-lubina-content {
        text-align: center;
    }
    .lubina-lockup {
        width: 125px;
        height: 30px;
        margin: 0 auto 16px;
    }
}

@media (min-width: 769px) {
    .hero-section {
        height: 90vh;
        height: 90svh;
    }
    .page-hero-card {
        height: calc(90vh - 200px);
        height: calc(90svh - 200px);
        min-height: 400px;
    }
}

@media (min-width: 769px) and (min-height: 1020px) {
    .page-hero-card {
        height: calc(70vh - 200px);
        height: calc(70svh - 200px);
    }
}

@media(max-width: 375px) {

}
@media(max-width: 320px) {
	
}