/* ========================= modernize.css — Go Travel (2025) Scope: body.modern … (añade class="modern" al ) ========================= */ /* 0) Tokens */ body.modern{ /*--button-bgcolor:#c0392b;*/ /* Rojo de marca (ajústalo si usas otro) */ --button-bgcolor-ink:#fff; --ink:#111827; --muted:#6b7280; --bg:#fafafa; --surface:#fff; --border:#e5e7eb; --radius-sm:.5rem; --radius-md:1rem; --radius-lg:1.25rem; --shadow-1:0 1px 2px rgba(17,24,39,.06); --shadow-2:0 12px 28px rgba(17,24,39,.10); --step--1:1.500rem;--step-0:1rem;--step-1:1.125rem;--step-2:1.375rem;--step-3:1.75rem;--step-4:2.25rem; } /* 1) Base tipográfica y reset suave */ body.modern, body.modern *{box-sizing:border-box} body.modern{ background:var(--bg); color:var(--ink); line-height:1.6; font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Inter, Roboto, "Open Sans", Lato, Arial, "Noto Sans"; -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility; } body.modern img{ max-width:80%; height:auto; width: auto; max-height: 130px; display:block; margin: 0px; } body.modern .listitem2 img { width: 100%; height: 100%; object-fit: cover; /* similar a background-size: cover */ object-position: center;/* similar a background-position: center */ display: block; max-width: none; max-height: none; } body.modern .prev img, body.modern .next img {margin: 10px;} body.modern h1,h2,h3,h4{margin:0 0 .5em; font-weight:700; letter-spacing:-.01em} body.modern h2{font-size:var(--step-4)} body.modern h6{margin:.25rem 0} /* 2) HEADER / NAVBAR */ body.modern .navbar-wrapper2.navbar-fixed-top{ position:sticky; top:0; z-index:60; backdrop-filter:saturate(160%) blur(8px); background:color-mix(in oklab,var(--bg) 30%, transparent); border-bottom:1px solid var(--border); } body.modern .navbar.mtnav{box-shadow:none} body.modern .navbar-brand .logo{max-height:80px; max-width:175px;} body.modern .navbar .nav>li>a{ color:#1f2937; font-weight:600; padding:18px 12px; transition:opacity .2s ease, background .2s ease; } body.modern .navbar .nav>li>a:hover{opacity:.85; background:transparent; text-decoration:none} body.modern .navbar-toggle .icon-bar{background:#1f2937} /* 3) HERO (fondo “vacaciones”) + caja de búsqueda */ body.modern #dajy.fullscreen-container.sliderbg.fixed{ background:#e9eef3; /* fallback si no carga imagen del slider */ } body.modern .wrap.cstyle03{background:transparent} /* Tabs (Hoteles / Tours / Traslados) -> estilo pill */ body.modern .bs-example-tabs.cstyle04 #myTab{ display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; border:0; margin:0 0 .75rem; } body.modern #myTab>li{float:none; margin:0; border:0} body.modern #myTab>li>a{ display:inline-flex; align-items:center; gap:.5rem; padding:.5rem .9rem; border:1px solid var(--border); border-radius:999px; background:#fff; color:#111827; font-weight:700; } body.modern #myTab>li.active>a, body.modern #myTab>li>a:focus, body.modern #myTab>li>a:hover{ background:var(--button-bgcolor); color:var(--button-bgcolor-ink); border-color:transparent; text-decoration:none; } /* Caja del buscador (tabbox + inputs) */ body.modern .tab-content2{border:0; background:transparent} body.modern .tab-content2{ background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-1); padding:1rem .75rem; margin-bottom:1rem; } @media(min-width:992px){ body.modern .tabbox{padding:1.25rem} } body.modern .tabbox .opensans.size18{display:block; font-weight:700; margin:-13px 0 .35rem; color:#111827} body.modern .tabbox .size13 b{font-weight:700} /* Inputs y selects del buscador */ body.modern .tabbox input.form-control, body.modern .tabbox select.form-control{ border:1px solid var(--border); border-radius:.75rem; background:#fff; color:var(--ink); height:auto; padding:.7rem .9rem; box-shadow:none; outline:0; transition:border .15s ease, box-shadow .15s ease; } body.modern .tabbox input.form-control:focus, body.modern .tabbox select.form-control:focus{ border-color:color-mix(in oklab, var(--button-bgcolor) 60%, black); box-shadow:0 0 0 4px color-mix(in oklab, var(--button-bgcolor) 18%, white); } /* Línea de búsqueda inferior con botón */ body.modern .searchbg4{ background:transparent; border:0; box-shadow:none; padding:.5rem 0 0; } body.modern .btn-search.ladda-button{ border:0; background:var(--button-bgcolor); color:var(--button-color); padding:.85rem 1.25rem; border-radius:1rem; font-weight:800; letter-spacing:.01em; box-shadow:var(--shadow-1); transition:transform .06s ease, box-shadow .2s ease, opacity .2s ease; } body.modern .btn-search.ladda-button:hover{transform:translateY(-1px); box-shadow:var(--shadow-2)} /* 4) GRID / utilidades legacy */ body.modern .pt-6{padding-top:.5rem} @media(min-width:992px){ body.modern .pt-6{padding-top:.75rem} } /* 5) OFERTAS DESTACADAS (carousel -> cards modernas) */ body.modern h2{margin-bottom:1rem} body.modern .list_carousel{position:relative} body.modern #foo{list-style:none; padding:0; margin:0; display:flex; gap:1rem} body.modern #foo>li{ background:var(--surface); border:1px solid var(--border); border-radius:1rem; overflow:hidden; box-shadow:var(--shadow-1); transition:transform .12s ease, box-shadow .2s ease; width:255px; /* respeta tu ancho de imagen actual */ } body.modern #foo>li:hover{transform:translateY(-2px); box-shadow:var(--shadow-2)} /* Head info (precio/fechas) sobre imagen */ body.modern #foo>li .HDinfo{ position:absolute; inset:auto 0 auto 0; top:.5rem; left:.5rem; right:.5rem; display:flex; justify-content:space-between; gap:.5rem; pointer-events:none; } body.modern #foo>li .Precio{ background:rgba(255,255,255,.92); color:#111827; padding:.25rem .5rem; border-radius:.6rem; font-weight:800; box-shadow:var(--shadow-1); pointer-events:auto; } body.modern #foo>li .Precio small{display:block; font-weight:700; color:#374151} body.modern #foo>li .HotelName{ background:rgba(17,24,39,.75); color:#fff; padding:.25rem .5rem; border-radius:.6rem; font-weight:700; box-shadow:var(--shadow-1); pointer-events:auto; text-align:right; } /* Imagen (forzamos ratio y redondeo superior) */ body.modern #foo>li>a>img{ width:100% !important; height:auto !important; aspect-ratio:16/10; object-fit:cover; display:block; border-top-left-radius:1rem; border-top-right-radius:1rem; } /* Body de la card */ body.modern #foo>li .m1{padding:.85rem 1rem} body.modern #foo>li .m1 h6.dark{font-size:var(--step-1); font-weight:800} body.modern #foo>li .m1 h6.green{font-size:var(--step--1); color:#ef4444; font-weight:700} /* ciudad en rojo marca */ /* Flechas del carrusel */ body.modern .list_carousel .prev, body.modern .list_carousel .next{ position:absolute; top:40%; transform:translateY(-50%); z-index:2; width:38px; height:38px; border-radius:999px; border:1px solid var(--border); background:#fff url('/ws/Pasaportia/images/spacer.png') center/0 no-repeat; box-shadow:var(--shadow-1); text-indent:-9999px; } body.modern .list_carousel .prev{left:-.5rem} body.modern .list_carousel .next{right:-.5rem} body.modern .list_carousel .prev:hover, .list_carousel .next:hover{box-shadow:var(--shadow-2)} body.modern .list_carousel li { height: 240px !important; } /* 6) BLOQUE DE VIDEO “Visual Promotions” */ body.modern .parallax.global-map-area{background:transparent} body.modern .promo-box.honeymoon{margin:0} body.modern .vc_row.vc_row-has-fill{ border-radius:var(--radius-lg); overflow:hidden; border:1px solid var(--border); box-shadow:var(--shadow-2); } /* Imagen de fondo existente */ body.modern .vc_custom_1497864694729{ background-size:cover !important; background-position:center !important; filter:saturate(105%) contrast(104%); } /* Mask para legibilidad (degradado sutil) */ body.modern .vc_row .bg-mask{ background:linear-gradient(180deg, rgba(2,6,23,.30) 0%, rgba(2,6,23,.55) 80%); border-radius:inherit; } /* Contenedor del TV/video + overlay */ body.modern .cover{height:100%; border-radius:inherit} body.modern .tv{height:100%; border-radius:inherit; overflow:hidden} body.modern .tv .screen{border-radius:inherit} /* 7) FOOTER */ body.modern .footerbg{ background:var(--footer-bgcolor); border-top:1px solid var(--border); color:var(--footer-color); } body.modern .footer{padding:1.25rem 0; font-size:var(--step--1); color:var(--footer-links);} body.modern .footer a{color:var(--footer-links); float:left;} body.modern .footer a:hover{color:#111827} body.modern .footerbg3black a.social1{float:left;} body.modern .footerbg3black a.social2{float:left;} body.modern .footerbg3black a.social3{float:left;} body.modern .footerbg3black a.social4{float:left;} /* 8) Botones genéricos utilizable en el sitio */ body.modern .btn-search4, body.modern .btn-search.right, body.modern .btn-search{ border-radius:1rem; } /* 9) Pequeños fixes legacy */ body.modern .container.offset-3{margin-left:0} /* evita offset antiguo en header */ body.modern .mt-430{margin-top:0} /* neutraliza salto old del hero */ body.modern .featurette-divider2{border-color:var(--border)} body.modern .gotop{opacity:.75} body.modern .gotop:hover{opacity:1} /* 10) Responsivo */ @media(max-width:991px){ body.modern .navbar .nav>li>a{padding:12px} body.modern #foo{gap:.75rem} body.modern #foo>li{width:calc(50% - .75rem)} } @media(max-width:640px){ body.modern #foo>li{width:100%} body.modern .list_carousel .prev, body.modern .list_carousel .next{display:none} } /* ===== FIX: caja de búsqueda debe ser sólida (sin transparencia) ===== */ /* Forzamos fondo sólido y sin efectos heredados */ body.modern .bs-example-tabs.cstyle04, body.modern .bs-example-tabs.cstyle04 .tab-content2, body.modern .bs-example-tabs.cstyle04 .tab-content2 > .tab-pane, body.modern .tabbox{ background: var(--surface) !important; /* #fff */ opacity: 0.95 !important; filter: none !important; /* IE legacy */ backdrop-filter: none !important; box-shadow: none !important; padding-bottom: 0px !important; } body.modern .bs-example { border: 1px solid #c3c3c3; } /* Estilo final de la caja (bordes/sombra) */ body.modern .tabboxOriginal{ border: 1px solid var(--border) !important; border-radius: var(--radius-lg) !important; box-shadow: var(--shadow-1) !important; } /* Tabs tipo pill: fondo blanco real (no translúcido) */ body.modern #myTab>li>a{ background-color:#fff !important; border:1px solid var(--border) !important; } body.modern #myTab>li.active>a{ background-color: var(--button-bgcolor) !important; color:var(--button-color) !important; } /* La franja del botón "Buscar" sin sombras/opacidad heredada */ body.modern .searchbg4{ background: transparent !important; border:0 !important; box-shadow:none !important; } body.modern .mt-430 { opacity: 1 !important; border-radius: 10px; padding: 10px; } body.modern .nav-tabs > li { background: #ffffff !important; } body.modern .cstyle04{ border-radius: 10px; padding: 15px; } /* ===== Z-INDEX STACK ===== header (1000) > buscador (11) > hero (0) ---------------------------------------- */ /* 1) el header siempre arriba */ body.modern .navbar-wrapper2.navbar-fixed-top{ position: sticky; /* ya lo tienes, lo dejamos explícito */ top: 0; z-index: 1000 !important; /* ↑ más alto que cualquier z-index legacy */ } /* 2) contenedor del buscador por debajo del header pero encima del fondo */ body.modern .container.mt-430.z-index100{ position: relative !important; /* crea stacking context controlado */ z-index: 10 !important; } /* 3) la caja del buscador y sus tabs, un pelín por encima de su contenedor */ body.modern .cstyle04, body.modern .tabbox{ position: relative; z-index: 11; } /* 4) el hero/slider y wrappers NO deben tener z-index alto */ body.modern #dajy, body.modern #dajy.fullscreen-container.sliderbg.fixed, body.modern .fullscreen-container{ position: absolute !important; z-index: 0 !important; } /* ===== OFERTAS DESTACADAS — compatible con carouFredSel ===== */ /* Restauramos el

a block (no flex) para no pelear con el plugin */ body.modern .list_carousel #foo{ display:block !important; margin:0; padding:0; list-style:none; white-space:normal; } /* Cada tarjeta del carrusel */ body.modern .list_carousel #foo > li{ position:relative; /* ¡clave! para que .HDinfo se ancle aquí */ float:left; /* lo usa carouFredSel */ width:255px; /* coincide con tu imagen */ margin-right:20px; /* el plugin ya inyecta este inline; lo reafirmamos */ background:#fff; border:1px solid var(--border); border-radius:1rem; overflow:hidden; box-shadow:var(--shadow-1); transition:transform .12s ease, box-shadow .2s ease; } body.modern .list_carousel #foo > li:hover{ transform:translateY(-2px); box-shadow:var(--shadow-2); } /* Imagen */ body.modern .list_carousel #foo > li > a > img{ display:block; width:100% !important; height:160px !important; /* ratio agradable; anula los 179px inline */ object-fit:cover; border-top-left-radius:1rem; border-top-right-radius:1rem; } /* Encabezado (precio y fechas) – ahora sí dentro de la card */ body.modern .list_carousel #foo > li .HDinfo{ position:absolute; top:.1rem; left:.5rem; right:.5rem; display:flex; justify-content:space-between; gap:.5rem; height: 50px; z-index:2; pointer-events:none; /* que no bloquee clicks a la imagen */ } body.modern .list_carousel #foo > li .Precio{ pointer-events:auto; background:rgba(255,255,255,.95); color:#111827; padding:.25rem .5rem; border-radius:.6rem; font-weight:800; box-shadow:var(--shadow-1); } body.modern .list_carousel #foo > li .Precio small{ display:block; font-weight:700; color:#374151; } body.modern .list_carousel #foo > li .HotelName{ pointer-events:auto; background:rgba(17,24,39,.75); color:#fff; padding:.25rem 2.7rem; border-radius:.6rem; font-weight:700; box-shadow:var(--shadow-1); text-align:right; } /* Cuerpo de la card */ body.modern .list_carousel #foo > li .m1{ padding:.0px; } body.modern .list_carousel #foo > li .m1 h6.dark{ font-size:var(--step-1); font-weight:800; margin:0 0 .25rem } body.modern .list_carousel #foo > li .m1 h6.green{ font-size:var(--step--1); color:#ef4444; font-weight:700; margin:0 } /* Flechas del carrusel */ body.modern .list_carousel .prev, body.modern .list_carousel .next{ position:absolute; top:50%; transform:translateY(-50%); width:38px; height:38px; border-radius:999px; border:1px solid var(--border); background:#fff; box-shadow:var(--shadow-1); text-indent:-9999px; z-index:3; } body.modern .list_carousel .prev{ left:-.5rem } body.modern .list_carousel .next{ right:-.5rem } body.modern .list_carousel .prev:hover, body.modern .list_carousel .next:hover{ box-shadow:var(--shadow-2) } /* Wrapper del plugin: que no herede rarezas */ body.modern .caroufredsel_wrapper{ overflow:hidden !important; background:transparent !important; border:0 !important; } /* Título de sección */ body.modern .cstyle06 h2{ margin:0 0 1rem } /* ===== FIX: badges arriba del card (precio no se parte) ===== */ body.modern .list_carousel #foo > li .HDinfo{ align-items:center; /* centra verticalmente ambos badges */ gap:.5rem; background: none !important; } body.modern .list_carousel #foo > li .Precio{ display:inline-flex; /* contenido en línea y flexible */ align-items:baseline; gap:.35rem; white-space:nowrap; /* evita salto de línea en $ 10,500.00 */ flex-shrink:0; /* NO se contrae: mantiene su ancho */ padding:.35rem .55rem; font-variant-numeric: tabular-nums; } body.modern .list_carousel #foo > li .Precio small{ line-height:1; font-weight:700; margin-right:.25rem; } body.modern .list_carousel #foo > li .Precio .skin-color{ margin-left:.25rem; font-size:.75em; opacity:.9; } /* El texto de fechas puede encogerse y recortar con … si hace falta */ body.modern .list_carousel #foo > li .HotelName{ display:flex; align-items:center; justify-content:flex-end; flex:1 1 auto; /* ocupa el resto del espacio */ min-width:0; /* permite elipsis */ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:.80rem; /* un poco más pequeño para que quepa */ padding:.35rem .55rem; border-radius:.6rem; } /* === Ofertas: precio arriba-izq, fechas abajo-der === */ body.modern #foo>li{ position: relative; } /* ancla para overlays */ /* El contenedor de overlays cubre toda la imagen */ body.modern #foo>li .HDinfo{ position:absolute; inset:0; /* ocupa toda la tarjeta */ pointer-events:none; /* deja clickeable la imagen */ } /* Precio: se mantiene igual, pero fijado arriba-izquierda */ body.modern #foo>li .Precio{ position:absolute; top:.5rem; left:.5rem; display:inline-flex; align-items:baseline; gap:.35rem; white-space:nowrap; flex-shrink:0; /* no se parte */ padding:.35rem .55rem; border-radius:.6rem; background:rgba(255,255,255,.92); color:#111827; box-shadow:var(--shadow-1); pointer-events:auto; } body.modern #foo>li .Precio small{line-height:1; font-weight:700; margin-right:.25rem;} body.modern #foo>li .Precio .skin-color{margin-left:.25rem; font-size:.75em; opacity:.9} /* Fechas: abajo-derecha, con fondo oscuro y elipsis si no cabe */ body.modern #foo>li .HotelName{ position:absolute; right:.5rem; bottom:.5rem; max-width:70%; /* evita chocar con el precio */ overflow:hidden; text-overflow:ellipsis; white-space:nowrap; padding:.35rem .55rem; border-radius:.6rem; background:rgba(17,24,39,.78); color:#fff; font-weight:700; box-shadow:var(--shadow-1); pointer-events:auto; /* texto seleccionable */ } @media (max-width: 640px){ body.modern #foo>li .HotelName{max-width:85%; font-size:.78rem} } body.modern .ui-datepicker { z-index: 102 !important; } /* ========================= RESULTADOS (listado + filtros) ========================= */ body.modern .breadcrub { margin-top:25px; margin-bottom: 30px; } /* --- barra superior de filtros rápidos (si está) --- */ body.modern .topfilters, body.modern .currentFilters{ background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-1); padding:.75rem; margin-bottom:1rem; } body.modern .currentFilters .btn, body.modern .topfilters .btn{ border-radius:999px; } /* --- sidebar de filtros --- */ body.modern .filters{ position:sticky; top:90px; /* mismas referencias que portada */ } body.modern .filters .filter{ background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-1); padding:1rem; margin-bottom:1rem; } body.modern .filters .filter h4, body.modern .filters .fcapstrong{ font-weight:800; margin:0 0 .5rem; color:#111827; } body.modern .filters .filter input[type="text"], body.modern .filters .filter select{ width:100%; border:1px solid var(--border); border-radius:.75rem; background:#fff; padding:.6rem .8rem; height:auto; box-shadow:none; } /* --- cada resultado (card) --- */ body.modern .itemscontainer .listitem2{ background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-1); overflow:hidden; margin-bottom:1rem; /*padding: .75rem; */ /* suaviza los bordes de la imagen */ } /* imagen */ body.modern .itemscontainer .listitem2 .h a img{ width:100% !important; height:auto !important; aspect-ratio:16/10; object-fit:cover; border-radius: .75rem; /* radios internos coherentes */ } /* layout de la parte derecha (texto + CTAs) */ body.modern .itemscontainer .listitem2 .itemlabel3{ display:flex; gap:1rem; align-items:flex-start; justify-content:space-between; padding:.25rem .25rem .5rem; } body.modern .itemscontainer .listitem2 .labelleft2{ flex:1 1 auto; min-width:0 } body.modern .itemscontainer .listitem2 .labelleft2 b{ font-size:1.05rem } /* precio, disponibilidad y CTAs a la derecha */ body.modern .itemscontainer .listitem2 .labelright{ flex:0 0 260px; text-align:right; } body.modern .itemscontainer .listitem2 .labelright h4{ margin:.25rem 0 .35rem; font-size:1.35rem; font-weight:800; color:#111827; } body.modern .itemscontainer .listitem2 .labelright .size11{ color:var(--muted) } /* botón DETALLES (ghost) */ body.modern .itemscontainer .listitem2 .labelright .bookbtn{ display:inline-flex; align-items:center; justify-content:center; padding:.6rem .9rem; border:1px solid var(--border); border-radius:1rem; background:#fff; color:#111827; font-weight:700; line-height:1; transition:box-shadow .2s ease, transform .06s ease; } body.modern .itemscontainer .listitem2 .labelright .bookbtn:hover{ box-shadow:var(--shadow-2); transform:translateY(-1px); background:var(--footer-links) !important; color:var(--footer-color) !important; } /* botón RESERVAR (primario) – el HTML trae id="reservar" */ body.modern .itemscontainer .listitem2 .labelright a#reservar, body.modern .itemscontainer .listitem2 .labelright a[id^="reservar"]{ display:inline-flex; align-items:center; justify-content:center; padding:.65rem 1rem; margin-left:.35rem; background:var(--button-bgcolor); color:var(--button-bgcolor-ink); border-radius:1rem; font-weight:800; border:0; line-height:1; box-shadow:var(--shadow-1); transition:box-shadow .2s ease, transform .06s ease, opacity .2s; } .listitem2:hover img{ height:120%; width:120%; margin-left:0%; margin-top:0%; -webkit-transition:.3s; -moz-transition:.3s; transition:.3s; } body.modern .itemscontainer .listitem2 .labelright a#reservar:hover, body.modern .itemscontainer .listitem2 .labelright a[id^="reservar"]:hover{ box-shadow:var(--shadow-2); transform:translateY(-1px); } /* badges (disponible / no reembolsable, etc.) */ body.modern .itemscontainer .listitem2 .labelright .green, body.modern .itemscontainer .listitem2 .labelright .grey{ display:inline-block; padding:.25rem .5rem; border-radius:.6rem; background:#f3f4f6; color:#111827; font-weight:700; margin-bottom:.35rem; } body.modern .itemscontainer .listitem2 .labelright .green{ background:#e8f8f0; color:#065f46 } /* texto de ubicación en rojo marca */ body.modern .itemscontainer .listitem2 .labelleft2 .grey{ color:#ef4444; font-weight:700 } /* responsive */ @media(max-width:991px){ body.modern .itemscontainer .listitem2 { padding:.5rem } body.modern .itemscontainer .listitem2 .itemlabel3{ flex-direction:column; gap:.5rem; } body.modern .itemscontainer .listitem2 .labelright{ width:100%; text-align:left; } body.modern .itemscontainer .listitem2 .labelright a#reservar, body.modern .itemscontainer .listitem2 .labelright a[id^="reservar"]{ margin-left:0; margin-top:.35rem; } } /* ========================= Resultados — Filtros (sidebar) ========================= */ /* 0) sin sticky (por ahora) */ body.modern .filters{ position: static !important; top:auto !important; } /* (opcional) solo sticky en pantallas grandes @media (min-width: 1280px){ body.modern .filters{ position: sticky !important; top: 92px !important; align-self: flex-start; max-height: calc(100vh - 110px); overflow:auto; -webkit-overflow-scrolling: touch; } } */ /* 1) tarjetas del panel */ body.modern .filters .sbox1, body.modern .filters .filterby, body.modern .filters .hpadding20{ background:#fff; border:1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); } body.modern .filters .sbox1{ padding: 14px 16px; } body.modern .filters .filterby{ padding: 14px 16px; margin-top: 14px; } body.modern .filters .hpadding20{ padding: 14px 16px; } body.modern .filters .line3{ display:none; } /* líneas grises antiguas */ /* 2) encabezados de cada bloque (estilo limpio) */ body.modern .filters .filterby h3, body.modern .filters .collapsebtn{ margin:0 0 10px; font-size: 1rem; font-weight: 800; color: var(--ink); background: transparent; border: 0; padding: 0; } /* 3) inputs dentro del panel */ body.modern .filters .form-control{ border:1px solid var(--border); border-radius: .75rem; height:auto; padding:.6rem .8rem; box-shadow:none; } /* 4) checkboxes modernos (sin tocar HTML) */ body.modern .filters input[type="checkbox"]{ appearance:none; -webkit-appearance:none; -moz-appearance:none; width:18px; height:18px; margin:0 8px 0 0; vertical-align:middle; border:1.5px solid #cbd5e1; border-radius:6px; background:#fff; transition:all .15s ease; position:relative; top:-1px; } body.modern .filters input[type="checkbox"]:checked{ background:var(--button-bgcolor); border-color:var(--button-bgcolor); box-shadow:0 0 0 3px color-mix(in oklab, var(--button-bgcolor) 20%, #fff); } body.modern .filters input[type="checkbox"]:checked::after{ content:""; position:absolute; left:4px; top:1px; width:6px; height:10px; border:2px solid #fff; border-left:0; border-top:0; transform:rotate(45deg); } body.modern .filters label{ font-weight:600; color:#1f2937; } /* 5) rango de precio (jQuery UI slider) */ body.modern .filters .ui-slider{ height:4px; background:#e5e7eb; border-radius:999px; margin-top:10px; } body.modern .filters .ui-slider .ui-slider-range{ background:var(--button-bgcolor); } body.modern .filters .ui-slider .ui-slider-handle{ width:18px; height:18px; top:-7px; border-radius:999px; background:var(--button-bgcolor); border:2px solid #fff; box-shadow: var(--shadow-1); } /* 6) aviso superior “Encontramos N hoteles…”: suavizar o esconder */ body.modern .filters .filtertip{ background:#fff; color:#111827; border:1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-1); } body.modern .filters .filtertip .size18{ font-weight:800; } body.modern .filters .filtertip .label label-warning{ background:transparent; color:var(--button-bgcolor); } /* 7) pequeñas utilidades de separación */ body.modern .filters .mt15{ margin-top:12px !important; } body.modern .filters .mb15{ margin-bottom:12px !important; } /* ========= RESULTADOS: encabezado tipo H1 a partir del breadcrumb ========= */ body.modern .breadcrub { padding: 8px 0 0; background: transparent; } body.modern .breadcrub .brlines { display: none; } /* quitamos línea punteada */ body.modern .breadcrub .homebtn { display: none; } /* UL como contenedor flexible */ body.modern .breadcrub .bcrumbs{ list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; align-items:center; gap:.25rem; } /* Ocultamos los “/” y el crumb de “Hoteles” */ body.modern .breadcrub .bcrumbs li:nth-child(1), body.modern .breadcrub .bcrumbs li:nth-child(2), body.modern .breadcrub .bcrumbs li:nth-child(3), body.modern .breadcrub .bcrumbs li:nth-child(5), body.modern .breadcrub .bcrumbs li:nth-child(7), body.modern .breadcrub .bcrumbs li:nth-child(9){ display:none; } /* 1) Ubicación como H1 (es el li #4 en tu HTML) */ body.modern .breadcrub .bcrumbs li:nth-child(4){ order:1; flex:0 0 100%; font-size:clamp(1.75rem, 3vw, 2.5rem); font-weight:800; letter-spacing:-.02em; color:#111827; line-height:1.15; } body.modern .breadcrub .bcrumbs li:nth-child(4) a{ color:inherit; text-decoration:none; } body.modern .breadcrub .bcrumbs li:nth-child(4) a::before{ content:"Resultados en "; font-weight:800; margin-right:.25rem; } /* 2) Metadatos: fechas (#6), ocupación (#8), habitaciones (#10) en la segunda línea */ body.modern .breadcrub .bcrumbs li:nth-child(6), body.modern .breadcrub .bcrumbs li:nth-child(8), body.modern .breadcrub .bcrumbs li:nth-child(10){ order:2; display:inline-flex; align-items:center; font-size:clamp(1rem, 1.4vw, 1.125rem); color:#111827; } /* Separadores puntito entre meta */ body.modern .breadcrub .bcrumbs li:nth-child(6)::after, body.modern .breadcrub .bcrumbs li:nth-child(8)::after{ content:"·"; margin:0 .5rem; color:#9ca3af; font-weight:700; } /* Afinado responsive: apretar metadatos en móviles */ @media (max-width:640px){ body.modern .breadcrub .bcrumbs li:nth-child(4){ font-size:1.5rem; } body.modern .breadcrub .bcrumbs li:nth-child(6), body.modern .breadcrub .bcrumbs li:nth-child(8), body.modern .breadcrub .bcrumbs li:nth-child(10){ font-size:.95rem; } } /* ===== Resultados: layout 2 columnas (tipo Expedia) ===== */ body.modern .results-row{ --sidebar-w: 320px; /* ancho del panel de filtros */ --gap: 24px; display: grid; grid-template-columns: minmax(260px, var(--sidebar-w)) minmax(0,1fr); gap: var(--gap); align-items: start; } /* Anular floats/anchos heredados (Bootstrap/tema) dentro del wrapper */ body.modern .results-row .col-md-3, body.modern .results-row .col-md-9{ float: none !important; width: auto !important; padding-left: 0 !important; padding-right: 0 !important; } /* Columnas limpias y sin scroll forzado */ body.modern .results-aside, body.modern .results-main{ width: auto !important; float: none !important; min-width: 0; /* evita overflows en la columna derecha */ position: static !important; /* sin sticky por ahora */ overflow: visible !important; /* quita la barra de scroll del aside */ } /* Limitar el ancho total del contenedor de resultados */ body.modern .container.pagecontainer.offset-0{ max-width: 1200px; /* ajusta si quieres más/menos ancho */ margin: 0 auto; padding: 0 12px; } /* Si algo dentro del aside se desborda, fuerza a no crecer más que su columna */ body.modern .results-aside *{ max-width: 100%; } /* Responsive: una columna en móvil */ @media (max-width: 991px){ body.modern .results-row{ grid-template-columns: 1fr; gap: 16px; } } /* ===== Resultados: layout en 2 columnas ===== */ /* 1) Contenedor padre en grid */ body.modern .results-row{ display:grid; grid-template-columns: clamp(260px, 23vw, 320px) minmax(0,1fr); column-gap:24px; row-gap:24px; } /* 2) Mata los clearfix de la fila bootstrap (evitan que el grid funcione) */ body.modern .results-row::before, body.modern .results-row::after{ content:none !important; display:none !important; } /* 3) Resetea floats/anchos heredados de Bootstrap dentro del grid */ body.modern .results-row > .filters, body.modern .results-row > .rightcontent{ float:none !important; width:auto !important; margin:0 !important; padding:0; /* ajusta si necesitas */ box-sizing:border-box; } /* 4) Asigna cada hijo a su columna y evita overflow del main */ body.modern .results-row > .filters{ /* columna izquierda */ grid-column:1; align-self:start; } body.modern .results-row > .rightcontent{ /* columna derecha */ grid-column:2; min-width:0; /* importante para que no desborde */ } /* 5) Sin sticky por ahora (causaba problemas). Si luego lo quieres, descomenta y ajusta: */ /* body.modern .results-row > .filters{ position: sticky; top: 88px; // o lo que mida tu navbar + margen max-height: calc(100vh - 88px); overflow:auto; } */ /* 6) Resp. móvil: stack en una sola columna */ @media (max-width: 992px){ body.modern .results-row{ display:block; } } /* Panel de filtros como card */ body.modern .results-aside{ background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); padding:16px; box-shadow:var(--shadow-1); } /* Separación entre bloques del contenido derecho */ body.modern .results-main > * + *{ margin-top:16px; } /* Ajuste de spacing general dentro del aside (opcional) */ body.modern .results-aside h3, body.modern .results-aside h4, body.modern .results-aside .title{ margin:8px 0 12px; font-weight:700; } body.modern .results-aside .form-group, body.modern .results-aside .row + .row{ margin-top:12px; } /* ===== Resultados: contenedor sin caja (fondo, borde, sombra) ===== */ body.modern .pagecontainer.results-row, body.modern .results-row { background: transparent !important; border: 0 !important; box-shadow: none !important; } /* Columnas: sin caja */ body.modern .results-aside, body.modern .filters, /* alias legacy */ body.modern .results-main, body.modern .rightcontent { /* alias legacy */ background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; /* evita “marco” por padding del contenedor */ } /* mantenemos el aire entre columnas con el gap del grid */ body.modern .results-row { gap: 24px; /* ajusta si quieres más/menos separación */ } /* ====== Aside: "Filtrar por:" como título (sin tarjeta) ====== */ /* quita look de caja al wrapper */ body.modern .results-aside .hpadding20 { background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; margin: .25rem 0 1rem !important; } /* convierte el h3 en un título como el de "Resultados en…" */ body.modern .results-aside .hpadding20 > h3.opensans.dark{ /* ignora la fuente de .opensans solo en la variante modern */ font-family: inherit !important; font-weight: 800; font-size: clamp(22px, 2.2vw, 26px); line-height: 1.15; letter-spacing: -.01em; color: var(--ink); margin: 0; } /* por si el contenedor del aside usa tarjeta (cstyle06) */ body.modern .results-aside .cstyle06{ background: transparent !important; border: 0 !important; box-shadow: none !important; } /* ===== Sidebar cards (reutilizable) ===== */ body.modern .aside-card{ background:#fff; border:1px solid var(--border); border-radius:var(--radius-lg); box-shadow:var(--shadow-1); padding:14px; margin:12px 0 16px; } /* Búsqueda dentro de su tarjeta */ body.modern .search-card .form-control{ border:1px solid var(--border); border-radius:12px; height:auto; padding:.65rem .9rem; box-shadow:none; } body.modern .search-card .btn-search{ width:100%; border-radius:12px; margin-top:.25rem; } /* Encabezado "Filtrar por:" con estilo de sección (como “Resultados en…”) */ body.modern .hpadding20 h3.opensans.dark{ font-family: inherit; /* neutraliza Open Sans solo en modo modern */ font-weight:800; font-size:var(--step-2); color:#0f172a; letter-spacing:-.01em; margin:8px 0 10px; } /* Separadores ligeros entre grupos (si NO los pones en card) */ body.modern .results-aside .filtergroup + .filtergroup, body.modern .results-aside .hpadding20 + *{ border-top:1px dashed #e5e7eb; padding-top:12px; margin-top:12px; } /* Ajustes finos */ body.modern .results-aside .control-group + .control-group{ margin-top:10px; } body.modern .results-aside label{ font-weight:600; color:#111827; } /* ===== POLISH: Aside cards y layout ===== */ /* separación pareja entre aside y resultados */ body.modern .results-row{ gap: 22px; /* suaviza el espacio entre columnas */ } /* card base (ya la tienes, le sumamos hover sutil) */ body.modern .aside-card{ transition: box-shadow .18s ease, transform .06s ease; } body.modern .aside-card:hover{ box-shadow: var(--shadow-2); transform: translateY(-1px); } /* botones dentro de la card de búsqueda: ancho completo y radios coherentes */ body.modern .search-card .btn, body.modern .search-card .btn-search{ width: 100%; border-radius: 12px; } /* inputs de búsqueda: unificamos tamaños/espacio vertical */ body.modern .search-card .form-control{ height: auto; padding: .65rem .9rem; } /* título "Filtrar por:" estilo de sección (ya activo), agrego una línea tenue abajo */ body.modern .hpadding20 h3.opensans.dark{ border-bottom: 1px solid #eef0f3; padding-bottom: 6px; margin-bottom: 10px; } /* si quieres separar visualmente cada grupo sin cards */ body.modern .results-aside .filtergroup + .filtergroup{ border-top: 1px dashed #e9edf3; padding-top: 12px; margin-top: 12px; } /* ===== RESPONSIVE ===== */ @media (max-width: 991px){ /* columna de filtros arriba, resultados abajo, con buen respiro */ body.modern .results-row{ display: block; } body.modern .results-aside{ margin-bottom: 16px; } body.modern .aside-card{ margin: 10px 0 14px; } } /* Tarjeta del resultado */ body.modern .result-card{ background:#fff; border:1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-1); padding: 12px; margin: 0; } /* Contenedor de los CTA arriba (opcional si lo tienes) */ body.modern .result-card .hotel-cta{ display:flex; gap:.5rem; align-items:center; flex-wrap:wrap; } /* Panel de habitaciones colapsable por defecto */ body.modern .result-card .rates{ max-height: 0; overflow: hidden; opacity: 0; transition: max-height .35s ease, opacity .2s ease; margin-top: 8px; border-top: 1px solid var(--border); padding-top: 8px; } /* Al abrir la tarjeta mostramos las tarifas */ body.modern .result-card.is-open .rates{ max-height: 1600px; /* suficientemente grande para la mayoría */ opacity: 1; } /* Botón “Ver habitaciones” */ body.modern .btn-toggle-rates{ border:0; background: var(--button-bgcolor); color:#fff; font-weight: 800; padding:.6rem 1rem; border-radius: 12px; box-shadow: var(--shadow-1); } body.modern .btn-toggle-rates:hover{ box-shadow: var(--shadow-2); transform: translateY(-1px); } /* Botón secundario (Detalles) por si quieres estilo outline */ body.modern .btn-outline{ background:#fff; color:#111827; border:1px solid var(--border); border-radius:12px; padding:.55rem .9rem; font-weight:700; } /* Un poco de orden en la tabla/lista de tarifas */ body.modern .rates .row, body.modern .rates .table > tbody > tr{ border-bottom:1px solid var(--border); } /* El contenedor que tenga dentro .btn-toggle-rates se vuelve un flex con wrap */ body.modern .result-card *:has(> .btn-toggle-rates){ display:flex; flex-wrap:wrap; gap:.5rem; justify-content:flex-end; /* Detalles y Reservar a la derecha */ max-width: 175px; } /* ========================= Result item: layout limpio, rates full-width (NO HTML changes) ========================= */ /* 1) Card base (el contenedor blanco de cada resultado) */ body.modern .hotel-item, body.modern .searchresult, body.modern .result-item, body.modern [class*="result"][class*="item"] { background:#fff; border:1px solid var(--border); border-radius:18px; box-shadow:var(--shadow-1); padding:18px; margin:18px 0; overflow:hidden; /* evita que nada se salga */ display:grid; grid-template-columns: 380px 1fr;/* imagen | contenido */ gap:20px; align-items:start; } /* 2) Columna de imagen (intenta agarrar tus wrappers habituales) */ body.modern .searchresult .thumb, body.modern .searchresult [class*="image"], body.modern .searchresult [class*="img"], body.modern .searchresult .col-md-4:first-child { border-radius:16px; overflow:hidden; } /* Imagen dentro del wrapper: siempre contenida */ body.modern .searchresult .thumb img, body.modern .searchresult [class*="image"] img, body.modern .searchresult [class*="img"] img { display:block; width:100%; height:260px; /* ajusta si quieres */ object-fit:cover; border-radius:16px; } /* 3) Columna de contenido principal (título, meta, texto, precio, botones) */ body.modern .searchresult .content, body.modern .searchresult [class*="content"], body.modern .searchresult .col-md-8, body.modern .searchresult .col-md-5, body.modern .searchresult .col-md-6 { min-width:0; /* evita desbordes de texto largos */ } /* Título y metas un poco más limpios */ body.modern .searchresult h4, body.modern .searchresult .dark { margin:0 0 .35rem; font-weight:800; font-size:1.25rem; /* ~20px */ line-height:1.25; } body.modern .searchresult .meta, body.modern .searchresult [class*="meta"], body.modern .searchresult .opensans.size13 { color:var(--muted); } /* 4) Precio + botones en la COLUMNA DE CONTENIDO, no a la derecha fija */ body.modern .searchresult .pricebox, body.modern .searchresult [class*="price"], body.modern .searchresult [class*="aside"] { margin-top:.75rem; background:#fafbfc; border:1px solid var(--border); border-radius:14px; padding:14px; display:flex; align-items:center; gap:12px; flex-wrap:wrap; /* para que en móvil se bajen ordenados */ } body.modern .searchresult .pricebox .total, body.modern .searchresult [class*="price"] .total { font-size:1.35rem; font-weight:800; color:var(--button-bgcolor); } /* Botones coherentes */ body.modern .searchresult .btn, body.modern .searchresult .ladda-button { border-radius:12px; } body.modern .searchresult .btn-ghost, body.modern .searchresult .btn-default { background:#fff; border:1px solid var(--border); color:#111827; } body.modern .searchresult .btn-primary, body.modern .searchresult .btn-search { background:var(--button-bgcolor); color:#fff; border:0; } /* 5) RATES: muévelo visualmente debajo y a ancho completo */ body.modern .searchresult .rates, body.modern .searchresult [class*="rate-"], body.modern .searchresult [class*="rates"], body.modern .searchresult table + .clearfix + div, /* fallback común */ body.modern .searchresult table[class*="habit"] { /* p.ej. la tabla de habitaciones */ grid-column: 1 / -1; /* ocupa todo el ancho del grid */ width:100%; margin-top:14px; } /* Estética de las filas de rate (si usas tabla, se verá más limpio) */ body.modern .searchresult .rates .row, body.modern .searchresult [class*="rate-"] .row, body.modern .searchresult table[class*="habit"] tr { border-radius:12px; } body.modern .searchresult table[class*="habit"] td, body.modern .searchresult table[class*="habit"] th { padding:.75rem .9rem; vertical-align:middle; } /* Chips “Reembolsable”, etc. */ body.modern .searchresult .chip, body.modern .searchresult [class*="reembolso"] { display:inline-block; padding:.25rem .55rem; border-radius:999px; border:1px solid var(--border); background:#fff; font-weight:700; font-size:.8rem; } body.modern .searchresult [class*="reembolso"] { color:#059669; border-color:#bbf7d0; background:#ecfdf5; } /* 6) El link “Ver/Ocultar habitaciones” va DESPUÉS de los botones */ body.modern .searchresult .toggle-rates, body.modern .searchresult [class*="ver"][class*="habit"], body.modern .searchresult [class*="ocultar"][class*="habit"] { display:inline-block; margin-left:auto; /* se pega al extremo si hay espacio */ font-weight:700; color:#374151; text-decoration:underline; } /* 7) Responsivo */ @media (max-width: 1024px){ body.modern .hotel-item, body.modern .searchresult, body.modern .result-item { grid-template-columns: 320px 1fr; gap:16px; } body.modern .searchresult .thumb img, body.modern .searchresult [class*="image"] img { height:220px; } } @media (max-width: 768px){ body.modern .hotel-item, body.modern .searchresult, body.modern .result-item { grid-template-columns: 1fr; /* apilado */ } body.modern .searchresult .thumb img, body.modern .searchresult [class*="image"] img { height:200px; } body.modern .searchresult .pricebox { justify-content:flex-start; } body.modern .searchresult .toggle-rates { margin-left:0; } }