.campo-huespedes { 
            position: relative; 
        }
        .campo { 
            cursor: pointer; 
        }
        .panel-huespedes {
            display: none;
            position: absolute;
            top: 105%;
            left: 0;
            width: 320px;
            background: #fff;
            border-radius: 10px;
            box-shadow: 0 12px 25px rgba(0,0,0,.15);
            padding: 16px;
            z-index: 1000;
        }
        .fila {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 14px;
            color: #000;
        }
        .controles {
            display: flex;
            gap: 10px;
            align-items: center;
        }
        .controles button {
            width: 32px;
            height: 32px;
            border-radius: 50%;
            border: 1px solid #ccc;
            background: #fff;
            cursor: pointer;
        }
        .acciones {
            display: flex;
            justify-content: space-between;
            margin-top: 10px;
        }
        .cancelar {
            background: none;
            border: none;
            color: #e6007e;
            cursor: pointer;
        }
        .aplicar {
            background: #e6007e;
            color: #fff;
            border: none;
            padding: 8px 18px;
            border-radius: 6px;
            cursor: pointer;
        }
        .destino-wrapper{
            position:relative;
        }
        .sugerencias{
            display: none;
            position: absolute;
            top: 100%;     /* Debajo del input */
            left: 0;
            width: 100%;
            background: #fff;
            border-radius: 10px;
            box-shadow: 0 10px 25px rgba(0,0,0,.15);
            z-index: 9999;

            max-height: 260px;
            overflow-y: auto;
            padding: 10px 0;
        }
        .label-sugerencias{
            font-size:13px;
            color:#555;
            padding:10px 18px;
            margin:0;
        }
        /* IMPORTANTE: que esté oculta hasta que abras */
        .sugerencias.oculta{
            display:none;
        }
        .sugerencias .item{
            display:flex;
            gap: 10px;
            padding: 10px 15px;
            cursor:pointer;
        }
        .sugerencias .item:hover{
            background:#f7f7f7;
        }
        .sugerencias img{
            width:60px;
            height:60px;
            border-radius:10px;
            object-fit:cover;
        }
        .sugerencias strong{
            font-size:14px;
            color: #000000;
        }
        .sugerencias p{
            margin:0;
            font-size:12px;
            color:#777;
        }
        /* Caja blanca */
        .buscador-box{
            background:#fff;
            border-radius:12px;
            padding:25px 35px;
            max-width:1200px;
            margin:auto;
            display:flex;
            align-items:center;
            gap:45px;
        }

        /* Cada columna */
        .campo{
            flex:1;
        }

        .titulo{
            margin:0 0 8px;
            font-size:13px;
            color:#666;
        }

        /* Línea inferior gris con ícono */
        .input-linea{
            display:flex;
            align-items:center;
            gap:10px;
            border-bottom:1px solid #bfbfbf;
            padding-bottom:8px;
        }
        .input-linea i{
            color:#3a3a3a;
            font-size:17px;
        }
        .input-linea input{
            width:100%;
            border:none;
            outline:none;
            font-size:14px;
            color:#3a3a3a;
        }
        /* Botón rosa */
        .btn-buscar{
            background:#e5006a;
            border:none;
            color:white;
            padding:18px 35px;
            border-radius:10px;
            font-size:16px;
            font-weight:600;
            cursor:pointer;
        }
        .btn-buscar:hover{
            background:#c00056;
        }
        /* Responsive */
        @media(max-width:900px){
            .buscador-box{
                flex-wrap:wrap;
                display: grid;
            }
            .btn-buscar{
                width:100%;
            }
        }
        .guest-field {
            position: relative;
        }
        .input {
            border: 1px solid #ccc;
            padding: 10px;
            cursor: pointer;
        }
        .guest-dropdown {
            position: absolute;
            top: 60px;
            right: 0;
            background: #fff;
            border: 1px solid red;
            padding: 10px;
            display: none;
            z-index: 999;
        }
        .row {
            display: flex;
            justify-content: space-between;
            align-items: center;
            margin-bottom: 14px;
            color: #000000;
        }
        .counter {
            display: flex;
            align-items: center;
        }
        .counter button {
            width: 30px;
            height: 30px;
            border-radius: 50%;
            border: 1px solid #ccc;
            background: #fff;
            cursor: pointer;
            color: #000000;
        }
        .counter span {
            margin: 0 10px;
            min-width: 20px;
            text-align: center;
            color: #000;
        }
        .actions {
            display: flex;
            justify-content: space-between;
        }
        .actions .apply {
            background: #e6007e;
            color: #fff;
            border: none;
            padding: 8px 16px;
            border-radius: 6px;
        }
        .hero {
            background: #000c08;
            padding: 60px 20px;
            color: #fff;
        }
        .hero-content {
            max-width: 1200px;
            margin: auto;
        }

        .hero h1 {
            font-size: 44px;
            font-weight: 300;
            margin-bottom: 30px;
            color: #ffffff;
        }
        .hero p {
            top: 100px;
        }
        /* Buscador */
        .search-box {
            background: #fff;
            border-radius: 14px;
            padding: 20px;
            display: grid;
            grid-template-columns: 2fr 1.4fr 1.4fr auto;
            gap: 20px;
            align-items: end;
            box-shadow: 0 12px 30px rgba(0,0,0,.2);
        }
        .field label {
            display: block;
            font-size: 13px;
            color: #666;
            margin-bottom: 6px;
        }
        .input {
            border-bottom: 2px solid #e5e5e5;
            padding: 10px 4px;
            font-size: 15px;
            color: #333;
        }
        .btn-search {
            background: #e0007a;
            color: #fff;
            border: none;
            padding: 14px 30px;
            border-radius: 10px;
            font-size: 16px;
            cursor: pointer;
        }
        .btn-search:hover {
            opacity: 0.9;
        }
        /* Textos inferiores */
        .hero-info {
            margin-top: 18px;
            font-size: 14px;
        }
        .hero small {
            display: block;
            margin-top: 6px;
            font-size: 12px;
            opacity: .9;
        }
        /* Responsive */
        @media (max-width: 900px) {
            .search-box {
                grid-template-columns: 1fr;
            }
            .btn-search {
                width: 100%;
            }
            .hero h1 {
                font-size: 32px;
            }
            .menu {
                gap:18px;
                flex-wrap:wrap;
            }
        }
        .header {
            width:100%;
            background:#fff;
            border-bottom:1px solid #ddd;
            font-family: Arial;
        }
        /* TOP BAR */
        .top-bar {
            max-width:1200px;
            margin:auto;
            padding:10px 20px;
            display:flex;
            align-items:center;
            justify-content:space-between;
            gap:20px;
        }
        /* LOGO */
        .logo img {
            height: 40px;
        }
        /* MENU */
        .menu {
            display:flex;
            gap:20px;
            align-items: center;
        }
        .menu a {
            color:#333;
            font-size:14px;
            cursor:pointer;
            text-decoration:none;
        }
        .menu a i {
             margin-right:6px;
        }
        .menu a.active {
            color: #1d4896;
            font-weight:600;
            border-bottom: 3px solid #1d4896;
        }
        .menu a.active::after{
            content:"";
            position:absolute;
            width:45px;
            height:3px;
            background:#0d47a1;
            bottom:0;
            left:50%;
            transform:translateX(-50%);
            border-radius:10px;
        }
        /* ACTIONS */
        .actions {
            display: flex;
            align-items: center;
            gap: 20px;
            font-size: 14px;
        }
        .actions a {
            text-decoration: none;
            color: #333;
        }
        /* LANGUAGE */
        .lang {
            display: flex;
            align-items: center;
            gap: 5px;
        }
        .lang img {
            width: 20px;
            height: auto;
        }
        /* PHONE */
        .phone {
            display: flex;
            align-items: center;
            gap: 5px;
        }
        /* LOGIN BUTTON */
        .login {
            background: transparent;
            border: 1px solid #ccc;
            padding: 8px 14px;
            border-radius: 8px;
            cursor: pointer;
            font-weight: 500;
            display: flex;
            align-items: center;
            gap: 8px;
        }
        .login:hover {
            border-color: #e4007f;
            color: #e4007f;
        }
        .menu-toggle {
            display:none;
            font-size:22px;
            cursor:pointer;
        }
        /* RESPONSIVE */
        @media(max-width:900px) {
            .menu {
                position:fixed;
                top:0;
                left:-100%;
                width:260px;
                height:100vh;
                background:white;
                flex-direction:column;
                padding:60px 20px;
                gap:15px;
                transition:.3s;
                box-shadow:0 0 20px rgba(0,0,0,.2);
                z-index:20;
            }
            .menu.active {
                left:0;
            }
            .actions {
                display:none;
            }
            .menu-toggle {
                display:block;
            }
        }
        /* SEARCH BOX */
        .search-box {
            background: #fff;
            border-radius: 12px;
            padding: 20px;
            display: grid;
            grid-template-columns: 1.4fr 1fr 1fr auto;
            gap: 14px;
            align-items: end;
            max-width: 1100px;
        }
        .field label {
            font-size: 13px;
            color: #666;
            display: block;
            margin-bottom: 6px;
        }
        .field input {
            width: 100%;
            padding: 12px;
            border-radius: 8px;
            border: 1px solid #ddd;
            font-size: 14px;
        }
        .search-btn {
            background: #e4007f;
            color: #fff;
            border: none;
            padding: 14px 22px;
            border-radius: 10px;
            cursor: pointer;
            font-size: 15px;
            font-weight: bold;
        }
        .cuerpo {
            display: flex;
            justify-content: center;
            align-items: center;
            height: 5vh;
        }
        .form-container {
            display: flex;
            background: white;
            border-radius: 4px;
            overflow: hidden;
            box-shadow: 0px 2px 15px rgba(0,0,0,0.2);
            z-index: 10;
        }
        .form-left {
            padding: 20px;
            display: flex;
            flex-direction: column;
            justify-content: center;
        }
        .form-left label {
            font-size: 12px;
            font-weight: bold;
            margin-bottom: 5px;
            display: flex;
            align-items: center;
        }
        .form-left input {
            padding: 10px;
            border: 1px solid black;
            border-radius: 4px;
            width: 220px;
            background: #f2f2f2;
        }
        .form-right {
            background: #c62828; /* rojo */
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 0 30px;
            cursor: pointer;
            transition: background 0.3s;
        }
        .form-right:hover {
            background: #a01515;
        }
        .form-right button {
            background: none;
            border: none;
            color: white;
            font-size: 18px;
            font-weight: bold;
            cursor: pointer;
            letter-spacing: 1px;
        }
        /* WRAPPER */
        .login-wrapper {
            position: relative;
        }
        /* BOTÓN */
        .login-btn {
            background: transparent;
            border: 1px solid #ccc;
            padding: 8px 14px;
            border-radius: 8px;
            cursor: pointer;
            display: flex;
            align-items: center;
            gap: 8px;
            font-size: 14px;
        }
        .login-btn:hover {
            border-color: #1d4896;
            color: #1d4896;
        }
        /* DROPDOWN */
        .login-dropdown {
            position: absolute;
            top: 70px;
            right: 20px;
            width: 280px;
            background: #fff;
            border-radius: 12px;
            box-shadow: 0 10px 25px rgba(0,0,0,.15);
            padding: 15px;
            display: none;
            z-index: 9999;
        }
        .login-dropdown.show {
            display: block;
        }
        /* HEADER */
        .login-header {
            display: flex;
            gap: 12px;
            margin-bottom: 16px;
        }
        .avatar {
            width: 42px;
            height: 42px;
            border-radius: 50%;
            background: #f3f3f3;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #1d4896;
            font-size: 18px;
        }
        .login-header p {
            font-size: 13px;
            color: #333;
            line-height: 1.4;
        }
        /* CTA */
        .cta-login {
            width: 100%;
            background: #1d4896;
            color: #fff;
            border: none;
            padding: 12px;
            border-radius: 10px;
            font-size: 14px;
            font-weight: bold;
            cursor: pointer;
            margin-bottom: 14px;
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
        }
        /* MENU */
        .login-menu {
            list-style: none;
        }
        .login-menu li {
            display: flex;
            align-items: center;
            gap: 10px;
            padding: 10px 6px;
            font-size: 14px;
            cursor: pointer;
            color: #333;
        }
        .login-menu li i {
            width: 18px;
        }
        .login-menu li:hover {
            background: #f7f7f7;
            border-radius: 8px;
        }
        .offers-section {
            max-width: 1300px;
            margin: 60px auto;
            padding: 0 20px;
            font-family: Arial, sans-serif;
        }
        /* HEADER */
        .offers-header h2 {
            font-size: 26px;
            margin-bottom: 6px;
        }
        .offers-header p {
            color: #555;
            margin-bottom: 24px
        }
        /* DESTINATIONS */
        .destinations {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 18px;
        }
        .destination-card {
            position: relative;
            border-radius: 14px;
            overflow: hidden;
            cursor: pointer;
        }
        .destination-card img {
            width: 100%;
            height: 230px;
            object-fit: cover;
            transition: transform .3s;
        }
        .destination-card:hover img {
            transform: scale(1.05);
        }
        .destination-name {
            position: absolute;
            bottom: 36px;
            left: 16px;
            color: #fff;
            font-size: 20px;
            font-weight: bold;
            text-shadow: 0 2px 6px rgba(0,0,0,.6);
        }
        /* PAYMENTS */
        .payments-box {
            margin-top: 30px;
            padding: 22px;
            border: 1px solid #eee;
            border-radius: 14px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            flex-wrap: wrap;
            gap: 20px;
        }
        .payments-text h3 {
            font-size: 18px;
        }
        .payments-text a {
            color: #e4007f;
            font-size: 14px;
            text-decoration: none;
        }
        .payment-logos img {
            height: 16px;
            margin: 0 10px;
            vertical-align: middle;
        }
        /* INFO CARDS */
        .info-cardss {
            margin-top: 30px;
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 20px;
        }
        .info-card {
            display: flex;
            gap: 18px;
            border: 1px solid #eee;
            border-radius: 14px;
            padding: 22px;
            align-items: flex-start;
        }
        /* ICONO */
        .info-icon {
            min-width: 44px;
            height: 44px;
            border-radius: 50%;
            border: 1.5px solid #e4007f;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #e4007f;
            font-size: 18px;
        }
        /* TEXTO */
        .info-content h4 {
            font-size: 18px;
            margin-bottom: 6px;
        }
        .info-content p {
            color: #555;
            margin-bottom: 8px;
            font-size: 14px;
        }
        .info-content a {
            color: #e4007f;
            font-weight: bold;
            font-size: 14px;
            text-decoration: none;
        }
        /* RESPONSIVE */
        @media (max-width: 900px) {
            .destinations {
                grid-template-columns: 1fr;
            }
            .info-cards {
                grid-template-columns: 1fr;
            }
            .payments-box {
               grid-template-columns: 1fr; 
            }
        }
        .info-cards {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            max-width: 1200px;
            margin: -40px auto 40px;
            padding: 0 20px;
        }
        .card {
            background: #fff;
            border-radius: 14px;
            padding: 22px;
            display: flex;
            gap: 16px;
            align-items: flex-start;
            box-shadow: 0 10px 25px rgba(0,0,0,.1);
        }
        .card h3 {
            font-size: 16px;
            margin: 0 0 6px;
            color: #222;
        }
        .card p {
            font-size: 14px;
            margin: 0;
            color: #555;
        }
        .icon {
            font-size: 26px;
            color: #4b148c;
        }
        /* Responsive */
        @media (max-width: 900px) {
            .info-cardss {
                grid-template-columns: 1fr;
                margin-top: 20px;
            }
        }
        .hoteles-section {
            max-width: 1300px;
            margin: auto;
            padding: 20px;
            font-family: Arial, Helvetica, sans-serif;
        }
        .hoteles-section h2{
            font-size: 28px;
            margin-bottom: 5px;
        }
        .sub{
            color: #6b6b6b;
            margin-bottom: 20px;
        }
        /* CONTENEDOR */
        .hoteles-container{
            display: grid;
            grid-template-columns: repeat(3,1fr);
            gap: 25px;
        }
        /* CARD */
        .hotel-cards{
            position: relative;
            border-radius: 0 0 55px 0;
            overflow: hidden;
            cursor: pointer;
        }
        /* IMAGEN */
        .hotel-cards img{
            width: 100%;
            height: 100%;
            object-fit: cover;
        }
        /* TEXTO INFERIOR */
        .hotel-info {
            position: absolute;
            bottom: 0;
            width: 100%;
            padding: 25px;
            color: white;
            font-size: 22px;
            font-weight: bold;
            background: linear-gradient(transparent, rgba(0,0,0,.8));
        }
        /* BOTONES LATERALES */
        .arrow {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: white;
            border: none;
            width: 40px;
            height: 40px;
            border-radius: 50%;
            font-size: 18px;
            cursor: pointer;
            background: rgba(255,255,255,0.9);
        }
        .left{
            left: 15px;
        }
        .right{
            right: 15px;
        }
        /* RESPONSIVE */
        @media(max-width:900px) {
            .hoteles-container{
                grid-template-columns: repeat(2,1fr);
            }
        }
        @media(max-width:600px) {
            .hoteles-container{
                grid-template-columns: 1fr;
            }
            .info-cards{
                display: grid;
                grid-template-columns: repeat(1, 1fr);
                gap: 20px;
                max-width: 1200px;
                margin: -40px auto 40px;
                padding: 0 20px;
            }
            .travel-hero {
                padding: 20px;
            }
            .hero-text {
                left: 15px;
            }
        }
        .travel-hero {
            padding: 40px;
            font-family: system-ui, sans-serif;
        }
        .hero-bg {
            position: relative;
            height: 420px;
            border-radius: 28px;
            background-size: cover;
            background-position: center;
            overflow: visible;
        }
        .overlay {
            position: absolute;
            inset: 0;
            background: linear-gradient(to right, rgba(0,0,0,.6), transparent);
            border-radius: 28px;
        }
        .hero-text {
            position: absolute;
            left: 40px;
            bottom: 140px;
            color: white;
            z-index: 2;
        }
        .hero-text h1 {
            font-size: 36px;
            margin-bottom: 8px;
            color: #ffffff;
        }
        .hero-text p {
            font-size: 17px;
        }
        .hero-text a {
            color: white;
            text-decoration: none;
            font-weight: 600;
        }
        /* CARRUSEL */
        .destinations-carousel {
            position: absolute;
            bottom: -110px;
            left: 0;
            width: 100%;
            padding: 0 40px;
            display: flex;
            align-items: center;
            gap: 10px;
        }
        .cards-wrapper {
            overflow: hidden;
            width: 100%;
        }
        .cards {
            display: flex;
            gap: 5px;
            transition: transform .4s ease;
            align-items: center;
            justify-content: center;
        }
        .card {
            min-width: 190px;
            background: white;
        }
        .card img {
            width: 100%;
            height: 120px;
            object-fit: cover;
            border-radius: 16px;
        }
        .card h4 {
            margin: 10px 0 2px;
            font-size: 15px;
        }
        .card span {
            font-size: 13px;
            color: #666;
        }

        @media (max-width: 500px) {
            .cards{
                display: flex !important;
                transition: transform .4s ease !important;
                align-items: center !important;
                justify-content: start;
                gap: 16px !important;
            }
            .destinations-carousel{
                position: absolute !important;
                bottom: -110px !important;
                left: 0 !important;
                width: 100% !important;
                padding: 0px 60px !important;
                display: flex !important;
                align-items: center !important;
                gap: 10px !important;
            }
            .actions{
                display: grid !important;
            }
        }
        /* FLECHAS */
        .arrow {
            background: white;
            border: none;
            width: 44px;
            height: 44px;
            border-radius: 50%;
            font-size: 26px;
            cursor: pointer;
            box-shadow: 0 6px 18px rgba(0,0,0,.15);
            z-index: 10;
        }
        .left { 
            margin-right: 5px; 
        }
        .right { 
            margin-left: 5px; 
        }
        /* Mini tarjeta */
                            .map-card {
                                width:100%;
                                height:230px;    /* Ajusta si quieres más alto */
                                border-radius:20px;
                                overflow:hidden;
                                position:relative;
                                background:#eaeaea;
                            }
                            .map-card img {
                                width:100%;
                                height:100%;
                                object-fit:cover;          /* 🔥 Evita cortes feos */
                                object-position:center;
                                display:block;
                                transition:transform .35s ease;
                            }
                            .map-card:hover img {
                                transform: scale(1.06);
                            }
                            .map-card:hover { 
                                width:100%;
                                height:100%;
                                object-fit:cover;   /* 🔥 Hace que se vea como Booking */
                                display:block; 
                            }
                            .map-thumbnail {
                                width: 100%;
                                height: auto;
                            }
                            .map-label {
                                position: absolute;
                                top: 50%;
                                left: 50%;
                                transform: translate(-50%, -50%);
                                background: #0d6efd;
                                color: #fff;
                                border: none;
                                padding: 10px 22px;
                                border-radius: 30px;
                                font-size: 15px;
                                cursor: pointer;
                                font-weight: 600;
                                box-shadow: 0 5px 18px rgba(0, 0, 0, .25);
                            }
                            .map-label:hover {
                                background:#084dbf;
                            }
                            /* Responsive */
                            @media(max-width:768px) {
                                .map-card {
                                    height: 180px;
                                }
                            }
                            /* Modal */
                            .modal-map {
                                display: none;
                                position: fixed;
                                top: 0; left: 0;
                                width: 100%; height: 100%;
                                background: rgba(0,0,0,0.55);
                                justify-content: center;
                                align-items: center;
                                z-index: 9999;
                            }
                            .modal-content-map {
                                width: 95%;
                                height: 90%;
                                background: #ffffff;
                                border-radius: 12px;
                                position: relative;
                                padding: 0;
                                overflow: hidden;
                            }
                            .close-map {
                                position: absolute;
                                top: 12px;
                                right: 18px;
                                font-size: 32px;
                                cursor: pointer;
                                z-index: 990;
                            }
                            /* Contenedor del mapa */
                            #hotelMap {
                                width: 100%;
                                height: 100%;
                            }
                            /* Filtros tipo Expedia */
                            .map-filters {
                                position: absolute;
                                top: 15px;
                                left: 15px;
                                display: flex;
                                gap: 10px;
                                z-index: 999;
                            }
                            .chip {
                                background: #ffffff;
                                padding: 8px 16px;
                                border-radius: 50px;
                                border: none;
                                cursor: pointer;
                                font-size: 13px;
                                box-shadow: 0 2px 4px rgba(0,0,0,0.2);
                            }
                            /* Botón Buscar en esta zona */
                            .zone-btn {
                                position: absolute;
                                top: 70px;
                                left: 50%;
                                transform: translateX(-50%);
                                background: #1E63FF;
                                color: white;
                                padding: 10px 22px;
                                border-radius: 30px;
                                border: none;
                                font-weight: bold;
                                z-index: 999;
                                cursor: pointer;
                            }
                            .promo-bar {
                                background-color: #121936;
                                padding: 15px 25px;
                                border-radius: 12px;
                                width: 100%;
                                display: flex;
                                justify-content: center;
                                font-family: Arial, sams-serif;
                                box-sizing: border-box;
                                margin-bottom: 30px;
                            }
                            .promo-content {
                                width: 100%;
                                max-width: 1400px;
                                display: flex;
                                align-items: center;
                                justify-content: space-between;
                            }
                            .promo-left {
                                display: flex;
                                align-items: center;
                                gap: 12px;
                            }
                            .promo-left img {
                                width: 28px;
                                height: 28px;
                            }
                            .promo-left p {
                                color: #ffffff;
                                font-size: 16px;
                                margin: 0;
                            }
                            .promo-btn {
                                background-color: #1E63FF;
                                border: none;
                                padding: 8px 18px;
                                color: #fff;
                                border-radius: 25px;
                                font-size: 14px;
                                cursor: pointer;
                                transition: 0.2s ease;
                            }
                            .promo-btn:hover {
                                background-color: #0E4EEA;
                            }
                            .modal {
                                display: none;
                                position: fixed;
                                top: 0; 
                                left: 0;
                                width: 100%; 
                                height: 100%;
                                background: rgba(0,0,0,0.45);
                                justify-content: center;
                                align-items: center;
                                z-index: 99999;
                                backdrop-filter: blur(4px);
                            }
                            /* Caja principal dividida en 2 columnas */
                            .modal-box {
                                width: 90%;
                                max-width: 900px;
                                height: auto;
                                background: #ffffff;
                                border-radius: 14px;
                                display: flex;
                                overflow: hidden;
                                box-shadow: 0 15px 50px rgba(0,0,0,0.25);
                                animation: fadeIn .25s ease;
                            }
                            /* Columna de la imagen */
                            .modal-img-section {
                                width: 50%;
                                height: auto;
                                max-height: 100%;
                                display: flex;
                            }
                            .modal-img-section img {
                                width: 100%;
                                height: auto;
                                object-fit: cover;
                                flex-grow: 1;
                            }

                            /* Columna de información */
                            .modal-info-section {
                                width: 50%;
                                padding: 35px;
                                position: relative;
                                font-family: system-ui, sans-serif;
                            }
                            /* Botón cerrar */
                            .close-popup {
                                position: absolute;
                                right: 20px;
                                top: 15px;
                                font-size: 26px;
                                cursor: pointer;
                                color: #444;
                            }
                            h2 {
                                margin: 0;
                                font-size: 26px;
                                font-weight: 700;
                                color: #222;
                            }
                            .sub {
                                margin: 4px 0 12px;
                                font-size: 15px;
                                color: #888;
                            }
                            .desc {
                                font-size: 14px;
                                color: #555;
                                margin-bottom: 15px;
                            }
                            .precio-box {
                                font-size: 22px;
                                font-weight: bold;
                                color: #0077c8;
                                margin-bottom: 5px;
                            }
                            .total {
                                margin-bottom: 15px;
                                font-size: 16px;
                                font-weight: 600;
                                color: #333;
                            }
                            label {
                                display: block;
                                margin-top: 12px;
                                font-size: 14px;
                                font-weight: 600;
                            }
                            input {
                                width: 100%;
                                padding: 10px;
                                margin-top: 6px;
                                border-radius: 10px;
                                border: 1px solid #ccc;
                                font-size: 14px;
                                background: #f7f7f7;
                            }
                            .btn-reservar {
                                display: block;
                                margin-top: 22px;
                                text-align: center;
                                background: #0077c8;
                                color: white;
                                padding: 14px;
                                border-radius: 12px;
                                text-decoration: none;
                                font-weight: 600;
                                font-size: 16px;
                                transition: .2s;
                            }
                            .btn-reservar:hover {
                                background: #005fa0;
                            }
                            /* Fila de inputs */
                            .input-row {
                                display: flex;
                                gap: 15px;
                                margin-top: 12px;
                            }
                            /* Cada columna ocupa la mitad */
                            .input-col {
                                width: 50%;
                            }
                            /* Ajustes de los labels e inputs dentro de columnas */
                            .input-col label {
                                font-weight: 600;
                                font-size: 14px;
                                display: block;
                                margin-bottom: 5px;
                            }
                            .input-col input {
                                width: 100%;
                                padding: 12px;
                                border-radius: 10px;
                                border: 1px solid #ccc;
                                background: #f7f7f7;
                                font-size: 14px;
                            }
                            @keyframes fadeIn {
                                from { opacity: 0; transform: scale(.97); }
                                to { opacity: 1; transform: scale(1); }
                            }
                            /* Responsive - móvil */
                            @media(max-width: 780px){
                                .modal-box {
                                    flex-direction: column;
                                    max-width: 95%;
                                }
                                .modal-img-section,
                                .modal-info-section {
                                    width: 100%;
                                }
                                .modal-img-section img {
                                    height: 220px;
                                }
                            }

                            /* ------------ RESPONSIVE ------------ */
                            @media(max-width:900px) {
                                .hotel-card {
                                    grid-template-columns:1fr;
                                }
                                .price-box {
                                    border-left:0;
                                    border-top:1px solid #ddd;
                                }
                            }

                            /* Efecto hover elegante */
                            .contenedor-imagen:hover img {
                                transform: scale(1.05);
                                filter: brightness(1.05);
                            }
                            /* Fondo blanco con separación entre imágenes (como en tu imagen) */
                            .separador {
                                height: 25px;
                            }
                            /* CONTENEDOR GENERAL */
                            .pt-footer {
                                background: #f6f7fb;
                                padding: 40px 8%;
                                font-family: Arial, sans-serif;
                                color: #333;
                            }
                            /* SECCIÓN SUPERIOR */
                            .pt-top {
                                display: flex;
                                justify-content: space-between;
                                align-items: center;
                                flex-wrap: wrap;
                                gap: 25px;
                                padding-bottom: 25px;
                                border-bottom: 1px solid #ddd;
                            }
                            /* BOTONES CONTACTO */
                            .pt-contact-buttons {
                                display: flex;
                                gap: 15px;
                                flex-wrap: wrap;
                            }
                            .pt-btn {
                                display: flex;
                                align-items: center;
                                gap: 8px;
                                background: #fff;
                                padding: 10px 16px;
                                border-radius: 10px;
                                border: 1px solid #ddd;
                                font-size: 14px;
                                text-decoration: none;
                                color: #333;
                                transition: 0.3s;
                            }
                            .pt-btn:hover {
                                background: #e6e6e6;
                            }
                            .pt-btn.wa i {
                                color: #25D366;
                            }
                            .pt-btn.ms i {
                                color: #0084FF;
                            }
                            .pt-btn.call i {
                                color: #333;
                            }
                            /* DESCARGA APP */
                            .pt-apps {
                                text-align: center;
                            }
                            .pt-app-icons img {
                                height: 38px;
                                margin: 0 10px 20px;
                                cursor: pointer;
                            }
                            /* LÍNEA MULTICOLOR */
                            .pt-color-line {
                                height: 6px;
                                margin-top: 25px;
                                background: linear-gradient(90deg,
                                    #3b82f6 0%,
                                    #06b6d4 20%,
                                    #10b981 40%,
                                    #f59e0b 60%,
                                    #ef4444 80%,
                                    #8b5cf6 100%
                                );
                            }
                            /* MENÚ DE LINKS */
 
                            .pt-links {
                                margin-top: 35px;
                                display: grid;
                                grid-template-columns: 1.3fr 1fr 1.6fr;
                                gap: 40px;
                            }
                            .pt-col h4 {
                                font-size: 18px;
                                margin-bottom: 12px;
                            }
                            .pt-col img {
                                width: 250px;
                                margin-bottom: 15px;
                            }
                            .pt-col .stats {
                                display: flex;
                                gap: 20px;
                                margin: 20px 0;
                            }
                            .pt-col .socials {
                                display: flex;
                                gap: 12px;
                            }
                            .pt-col .socials a {
                                width: 52px;
                                height: 52px;
                                border-radius: 14px;
                                background: #fff;
                                box-shadow: 0 5px 15px rgba(0,0,0,0.08);
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                color: #2563eb;
                                transition: .3s;
                                box-shadow: 0 8px 20px rgba(0,0,0,0.12);
                                transition: transform .25s ease, box-shadow .25s ease, background .25s ease;
                            }
                            .pt-col .socials a i,
                            .pt-col .socials a svg {
                                font-size: 22px;
                                width: 22px;
                                height: 22px;
                            }
                            .pt-col .socials a:hover {
                                transform: translateY(-4px);
                                box-shadow: 0 14px 30px rgba(0,0,0,0.18);
                            }
                            .pt-col .socials a.facebook {
                                border: 1px solid #1877f2;
                                color: #1877f2;
                            }
                            .pt-col .socials a.instagram {
                                border: 1px solid #e1306c;
                                color: #e1306c;
                            }
                            .pt-col .socials a.tiktok {
                                border: 1px solid #000;
                                color: #000;
                            }
                            .pt-col .socials a.youtube {
                                border: 1px solid #ff0000;
                                color: #ff0000;
                            }
                            .pt-col .socials a:hover {
                                background: #fff;
                            }
                            .pt-col .stats div strong {
                                font-size: 25px;
                                color: #2563eb;
                            }
                            .pt-col .stats div span {
                                display: block;
                                font-size: 15px;
                            }
                            /* CONTACT */
                            .pt-col .contact-list{
                                display: flex;
                                flex-direction: column;
                                gap: 22px;
                                margin-top: 20px;
                            }
                            .pt-col .contact-card {
                                display: flex;
                                align-items: flex-start;
                                gap: 16px;
                            }
                            .pt-col .contact-card small {
                                font-size: 12px;
                                font-weight: 600;
                                color: #64748b;
                                letter-spacing: .05em;
                            }
                            .pt-col .contact-card p {
                                font-size: 14px;
                                color: #1f2937;
                                margin-top: 4px;
                                line-height: 1.5;
                            }
                            .pt-col .icon {
                                min-width: 44px;
                                height: 44px;
                                border-radius: 12px;
                                display: flex;
                                align-items: center;
                                justify-content: center;
                                font-size: 18px;
                            }
                            .pt-col .icon.blue {
                                background: #e0edff;
                                color: #2563eb;
                            }
                            
                            .pt-col .icon.green {
                                background: #dcfce7;
                                color: #16a34a;
                            }
                            .pt-col .icon.whatsapp {
                                background: #dcfce7;
                                color: #22c55e;
                            }
                            .pt-col .icon.purple {
                                background: #f3e8ff;
                                color: #7c3aed;
                            }
                            .pt-col .icon.orange {
                                background: #fff7ed;
                                color: #f97316;
                            }
                            .pt-col a {
                                display: block;
                                text-decoration: none;
                                margin-bottom: 8px;
                                color: #0061c2;
                                font-size: 14px;
                            }
                            .pt-col a:hover {
                                text-decoration: underline;
                            }
                            .pt-col p {
                                margin: 2px 0;
                                font-size: 16px;
                            }
                            .pt-col p a {
                                color: #0061c2;
                            }
                            .pt-col .map {
                                border-radius: 20px;
                                width: 100%;
                                height: 260px;
                                overflow: hidden;
                                box-shadow: 0 20px 35px rgba(0,0,0,.1);
                            }
                            .pt-col .map iframe {
                                width: 100%;
                                height: 100%;
                                border: 0;
                            }
                            .pt-col .map-text {
                                margin-top: 15px;
                            }
                            /* RESPONSIVE */
                            @media (max-width: 860px) {
                                .pt-links {
                                    grid-template-columns: 1fr 1fr;
                                }
                            }
                            @media (max-width: 580px) {
                                .pt-links {
                                    grid-template-columns: 1fr;
                                }
                                .pt-top {
                                    text-align: center;
                                    justify-content: center;
                                }
                            }
                            .contact-btn {
                                display: flex;
                                align-items: center;
                                gap: 8px;
                                background: #f7f7f9;
                                padding: 10px 18px;
                                border-radius: 12px;
                                font-size: 15px;
                                cursor: pointer;
                            }

                            .contact-btn img {
                                width: 20px;
                            }
                            .divider-vertical {
                                width: 1px;
                                height: 80px;
                                background: #d9d9d9;
                                margin: 0 30px;
                            }
                            .footer-left h3,
                            .footer-right h3 {
                                font-size: 20px;
                                font-weight: 700;
                                color: #333;
                                margin-bottom: 15px;
                            }
                            .contact-container {
                                display: flex;
                                gap: 15px;
                                flex-wrap: wrap;
                            }
                            .contact-btn {
                                display: flex;
                                align-items: center;
                                gap: 10px;
                                background: #fff;
                                padding: 12px 20px;
                                border-radius: 12px;
                                font-size: 15px;
                                color: #333;
                                border: 1px solid #e4e4e4;
                                cursor: pointer;
                                transition: 0.2s;
                            }
                            .contact-btn:hover {
                                background: #f0f0f0;
                            }
                            .affiliate {
                                background: linear-gradient(120deg, #ffd2b0, #ffb07a);
                                padding: 80px 20px;
                            }
                            .affiliate-container {
                                max-width: 1200px;
                                margin: auto;
                                display: grid;
                                grid-template-columns: 1.1fr 0.9fr;
                                gap: 50px;
                                align-items: center;
                            }
                            /* Texto */
                            .affiliate-content h1 {
                                font-size: 48px;
                                margin-bottom: 10px;
                                line-height: 1.2;
                            }
                            .affiliate-content h1 span {
                                color: #0047ff;
                            }
                            .affiliate-content p {
                                font-size: 16px;
                                line-height: 1.7;
                                margin-bottom: 15px;
                                color: #222;
                            }
                            .subtitle {
                                font-weight: 600;
                                margin-bottom: 20px;
                            }
                            /* Botón */
                            .btn-whatsapp {
                                display: inline-flex;
                                align-items: center;
                                gap: 10px;
                                background: #2ecc71;
                                color: #fff;
                                padding: 15px 28px;
                                border-radius: 10px;
                                text-decoration: none;
                                font-weight: 600;
                                margin-top: 20px;
                                box-shadow: 0 10px 25px rgba(0,0,0,.15);
                            }
                            /* Imagen */
                            .affiliate-image {
                                position: relative;
                                background: rgba(255,255,255,.35);
                                border-radius: 20px;
                                padding: 30px;
                            }
                            .affiliate-image img {
                                width: 100%;
                                border-radius: 20px;
                            }
                            /* Badges */
                            .badge {
                                position: absolute;
                                background: #fff;
                                color: #000;
                                padding: 10px 16px;
                                border-radius: 12px;
                                font-size: 14px;
                                font-weight: 600;
                                box-shadow: 0 8px 20px rgba(0,0,0,.15);
                                display: flex;
                                align-items: center;
                                gap: 8px;
                            }
                            .badge-top {
                                top: 30px;
                                left: -20px;
                            }
                            .badge-middle {
                                right: -20px;
                                top: 45%;
                            }
                            .badge-bottom {
                                bottom: 30px;
                                left: 40px;
                            }
                            /* Responsive */
                            @media (max-width: 900px) {
                                .affiliate-container {
                                    grid-template-columns: 1fr;
                                }
                                .affiliate-content h1 {
                                    font-size: 36px;
                                }
                                .badge {
                                    position: static;
                                    margin-top: 15px;
                                }
                            }
                            /* ------------ CARD GENERAL ------------ */
                            .hotel-card {
                                display:grid;
                                grid-template-columns: 330px 1fr 260px;
                                gap:0;
                                background:#fff;
                                border-radius:16px;
                                overflow:hidden;
                                border:1px solid #ddd;
                                box-shadow:0 10px 25px rgba(0,0,0,.1);
                                margin-bottom:25px;
                                transition:.3s;
                            }
                            .hotel-card:hover {
                                transform: translateY(-3px);
                                box-shadow:0 18px 35px rgba(0,0,0,.15);
                            }
                            /* ------------ IMAGEN ------------ */
                            .hotel-img {
                                position:relative;
                            }
                            .hotel-img img {
                                width:100%;
                                height:100%;
                                object-fit:cover;
                            }
                            /* Badge superior */
                            .hotel-img .badge {
                                position:absolute;
                                top:12px;
                                left:12px;
                                background:white;
                                padding:6px 14px;
                                border-radius:25px;
                                font-size:13px;
                                display:flex;
                                align-items:center;
                                gap:6px;
                            }
                            /* Botones flechas */
                            .hotel-img .arrow {
                                position:absolute;
                                top:50%;
                                transform:translateY(-50%);
                                width:34px;
                                height:34px;
                                border-radius:50%;
                                background:white;
                                display:flex;
                                align-items:center;
                                justify-content:center;
                                box-shadow:0 4px 12px rgba(0,0,0,.25);
                                cursor:pointer;
                            }
                            .hotel-img .arrow.left { 
                                left:10px; 
                            }
                            .hotel-img .arrow.right { 
                                right:10px; 
                            }
                            /* Corazón */
                            .hotel-img .fav {
                                position:absolute;
                                top:12px;
                                right:12px;
                                width:36px;
                                height:36px;
                                background:white;
                                border-radius:50%;
                                display:flex;
                                align-items:center;
                                justify-content:center;
                                box-shadow:0 4px 12px rgba(0,0,0,.25);
                            }
                            .carousel {
                                position:relative;
                                width:100%;
                                height:100%;
                                overflow:hidden;
                            }

                            .carousel img {
                                position:absolute;
                                top:0;
                                left:0;
                                width:100%;
                                height:100%;
                                object-fit:cover;
                                opacity:0;
                                transition:opacity .4s ease;
                            }
                            .carousel img.active {
                                opacity:1;
                            }
                            /* ------------ CONTENIDO CENTRAL ------------ */
                            .hotel-content {
                                padding:18px 22px;
                            }
                            /* anuncio label */
                            .hotel-content small {
                                color:#888;
                                font-size:12px;
                            }
                            /* título */
                            .hotel-title {
                                font-size:20px;
                                font-weight:800;
                                margin-top:5px;
                                line-height:1.2;
                            }
                            /* ubicación */
                            .hotel-location a{
                                color:#0077ff;
                                text-decoration:none;
                                font-size:13px;
                                line-height:1.2;
                            }
                            .hotel-location {
                                margin:2px 0;
                            }
                            /* rating */
                            .rate-box {
                                display:flex;
                                align-items:center;
                                gap:6px;
                                margin-top:4px;
                            }
                            .rate-number {
                                background:#0a8f6b;
                                color:white;
                                padding:1px 5px;
                                border-radius:6px;
                                font-size:13px;
                            }
                            .services-mini {
                                display:flex;
                                gap:10px;
                                font-size:16px;
                                margin:6px 0;
                                line-height:1;
                            }
                            .badge-grey {
                                background:#e9ecef;
                                padding:1em;
                                border-radius:10px;
                                font-size:13px;
                                line-height:1.2;
                            }
                            /* ------------ COLUMNA DERECHA ------------ */
                            .price-box {
                                border-left:1px solid #ddd;
                                padding:18px;
                                line-height: 1.2;
                            }
                            .offer {
                                background:#ff7d00;
                                color:white;
                                padding:5px 10px;
                                display:inline-block;
                                border-radius:6px;
                                font-size:13px;
                                margin-bottom:6px;
                                line-height:1;
                            }
                            .nights {
                                font-size:13px;
                                color:#555;
                                margin:2px 0;
                                line-height:1.2;
                            }
                            .old-price {
                                text-decoration:line-through;
                                color:#999;
                                margin:2px 0;
                                line-height:1.2;
                                font-size:13px;
                            }

                            .final-price {
                                font-size:26px;
                                font-weight:900;
                                margin:2px 0;
                                line-height:1.1;
                            }

                            .tax {
                                font-size:12px;
                                color:#666;
                                margin:2px 0;
                                line-height:1.2;
                            }

                            .addflight {
                                margin:6px 0;
                                color:#0077ff;
                                cursor:pointer;
                                line-height:1.2;
                                font-size:13px;
                                font-weight:900;
                            }

                            .actions {
                                display:flex;
                                gap:10px;
                            }

                            /* Botón carrito */
                            .price-box .cart-btn{
                                width:46px;
                                height:46px;
                                background:#fff;
                                border:1px solid #0d5bc1;
                                border-radius:10px;
                                font-size:18px;
                                color:#0d5bc1;
                                display:flex;
                                align-items:center;
                                justify-content:center;
                                padding:0;
                                flex-shrink:0;
                            }

                            /* Botón principal */
                            .price-box .btnReservar{
                                flex:1;
                                background:#0759c1;
                                color:white;
                                padding:12px;
                                border-radius:10px;
                                border:0;
                                font-size:15px;
                                cursor:pointer;
                            }
                            .info-icon{
                                width:16px;
                                height:16px;
                                min-width:16px;
                                min-height:16px;
                                border-radius:50%;
                                border:1px solid #0d5bc1;
                                color:#0d5bc1;
                                font-size:11px;
                                font-weight:700;

                                display:inline-flex;   /* CLAVE */
                                align-items:center;
                                justify-content:center;

                                line-height:1;         /* CLAVE */
                                flex-shrink:0;         /* CLAVE */
                            }
                            .actions{
                                display:flex;
                                gap:10px;
                            }

                            .cart-btn{
                                width:46px;
                                height:46px;
                                background:#fff;
                                border:1px solid #0d5bc1;
                                border-radius:10px;
                                font-size:18px;
                                color:#0d5bc1;
                                display:flex;
                                align-items:center;
                                justify-content:center;
                                padding:0;
                            }
                            .price-row{
                                display:flex;
                                align-items:center;
                                gap:6px;
                                flex-wrap:nowrap;
                            }

                            /* ------------ RESPONSIVE ------------ */
                            @media(max-width:900px){
                                .hotel-card{
                                    grid-template-columns:1fr;
                                }
                                .price-box{
                                    border-left:0;
                                    border-top:1px solid #ddd;
                                }
                                .hotel-img {
                                    height: 200px !important; /* o el valor que uses en desktop */
                                    min-height: 200px;
                                    overflow: visible;
                                }
                                
                                .carousel {
                                    height: 100%;
                                    display: block !important;
                                }
                                
                                .carousel img {
                                    height: 100%;
                                    width: 100%;
                                    object-fit: cover;
                                    border-radius: 20px;
                                }
                            }