html {
margin: 0 !important;
padding: 0 !important;
width: 100%;
overflow-x: hidden;
height: 100%;
}
html, body {
margin: 0 !important;
padding: 0 !important;
width: 100%;
height: 100%;
}
body {
margin: 0 !important;
padding: 0 !important;
width: 100%;
overflow-x: hidden;
}
/* Eliminar cualquier espacio en el top del body cuando hay hero */
body:has(.hero-search-wrapper) {
margin-top: 0 !important;
padding-top: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
body:has(.hero-search-wrapper) {
margin: 0 !important;
padding: 0 !important;
margin-top: 0 !important;
padding-top: 0 !important;
}
body {
font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
margin: 0;
padding: 0;
background-color: #fafafa;
color: #2c3e50;
line-height: 1.6;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
width: 100%;
overflow-x: hidden;
}
/* General container for main content */
.contenedor {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
/* Removed margin-top to allow sticky positioning to work relative to viewport */
}
/* Padding del body ajustado para nueva cabecera - se maneja más abajo */
/* Content area below header */
.cotenido {
padding: 20px 0;
}
h2 {
font-size: 28px;
font-weight: 600;
color: #1a1a1a;
margin-top: 30px;
margin-bottom: 20px;
}
/* ============================================
NUEVA CABECERA NETZERD
============================================ */
/* Barra superior oscura */
.site-header-overlay {
margin: 0;
padding: 0;
height: 0;
}
.header-top-dark-bar {
background: linear-gradient(135deg, rgba(44, 62, 80, 0.3) 0%, rgba(52, 73, 94, 0.3) 100%);
position: fixed;
top: 0;
left: 0;
right: 0;
width: 100%;
z-index: 1003;
margin: 0;
padding: 0;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
backdrop-filter: blur(2px);
-webkit-backdrop-filter: blur(2px);
height: auto;
min-height: auto;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
transform: translateY(0);
}
/* Evita que la barra fija capture clics fuera de sus elementos visibles. */
.header-top-dark-bar {
pointer-events: none;
}
.header-top-dark-bar a,
.header-top-dark-bar button,
.header-top-dark-bar input,
.header-top-dark-bar select,
.header-top-dark-bar textarea,
.header-top-dark-bar [role="button"] {
pointer-events: auto;
}
.header-top-dark-bar.hide-on-scroll {
transform: translateY(-100%);
}
body.header-bars-hidden .header-top-dark-bar {
transform: translateY(-100%) !important;
}
.header-top-dark-content {
max-width: 1400px;
margin: 0 auto;
padding: 4px 20px;
display: flex;
justify-content: space-between;
align-items: center;
min-height: 50px;
height: 50px;
}
.header-top-dark-left {
display: flex;
align-items: center;
gap: 8px;
}
.en-vivo-tv-link {
display: inline-block;
text-decoration: none;
transition: opacity 0.3s ease;
}
.en-vivo-tv-link:hover {
opacity: 0.8;
}
.en-vivo-tv-icon {
width: auto;
height: 35px;
margin-right: 6px;
object-fit: contain;
}
.header-top-dark-right {
display: flex;
align-items: center;
gap: 20px;
}
.netzerd-register-top {
font-size: 14px;
font-weight: 700;
color: #ffffff;
letter-spacing: 0.5px;
cursor: pointer;
transition: opacity 0.3s ease;
display: flex;
align-items: center;
gap: 6px;
text-decoration: none;
}
.register-icon {
width: 20px;
height: 20px;
object-fit: contain;
}
.netzerd-register-top:hover {
opacity: 0.8;
}
.btn-comprar-coins-top {
background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
border: none;
color: #ffffff;
padding: 6px 16px;
border-radius: 20px;
font-size: 11px;
font-weight: 600;
letter-spacing: 0.5px;
cursor: pointer;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(255, 107, 107, 0.4);
text-decoration: none;
display: inline-block;
}
.btn-comprar-coins-top:hover {
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(255, 107, 107, 0.6);
}
/* Elementos sobre la imagen (Registra tu negocio y Comprar Coins) - por encima de la barra blanca */
.hero-top-elements {
position: absolute;
top: 15px;
left: 0;
right: 0;
width: 100%;
z-index: 1002;
pointer-events: none;
display: none; /* Ocultar ya que ahora está en la barra superior oscura */
}
.hero-top-elements-content {
max-width: 1400px;
margin: 0 auto;
padding: 0 20px;
display: flex;
justify-content: flex-end;
align-items: center;
gap: 20px;
pointer-events: auto;
}
.netzerd-register-overlay {
font-size: 13px;
font-weight: 500;
color: #ffffff;
letter-spacing: 0.8px;
text-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
opacity: 0.95;
transition: opacity 0.3s ease;
}
.netzerd-register-overlay:hover {
opacity: 1;
}
.btn-comprar-coins-overlay {
background: linear-gradient(135deg, #ff6b6b 0%, #ee5a6f 100%);
color: white;
border: none;
padding: 8px 20px;
border-radius: 25px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 0.8px;
box-shadow: 0 4px 15px rgba(255, 107, 107, 0.5);
position: relative;
overflow: hidden;
}
.btn-comprar-coins-overlay::before {
content: '';
position: absolute;
top: 0;
left: -100%;
width: 100%;
height: 100%;
background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.3), transparent);
transition: left 0.5s;
}
.btn-comprar-coins-overlay:hover::before {
left: 100%;
}
.btn-comprar-coins-overlay:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(255, 107, 107, 0.6);
background: linear-gradient(135deg, #ff5252 0%, #e53935 100%);
}
/* Barra blanca elegante sobre la imagen */
.nav-container-white-bar {
background: rgba(255, 255, 255, 0.98);
box-shadow: 0 4px 25px rgba(0, 0, 0, 0.1);
position: fixed;
top: 50px;
left: 50%;
transform: translateX(-50%) translateY(0);
max-width: 1200px;
width: calc(100% - 40px);
z-index: 1004;
border-bottom: 1px solid rgba(0, 0, 0, 0.08);
box-sizing: border-box;
margin: 0 !important;
padding: 0 !important;
margin-top: 0 !important;
padding-top: 0 !important;
backdrop-filter: blur(15px);
-webkit-backdrop-filter: blur(15px);
border-radius: 50px;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
will-change: transform;
}
/* Igual para la barra blanca: solo elementos interactivos reciben clic. */
.nav-container-white-bar {
pointer-events: none;
}
.nav-container-white-bar a,
.nav-container-white-bar button,
.nav-container-white-bar input,
.nav-container-white-bar select,
.nav-container-white-bar textarea,
.nav-container-white-bar [role="button"] {
pointer-events: auto;
}
.nav-container-white-bar.hide-on-scroll {
transform: translateX(-50%) translateY(-200px);
pointer-events: none;
}
body.header-bars-hidden .nav-container-white-bar {
transform: translateX(-50%) translateY(-200px) !important;
pointer-events: none !important;
}
@media (min-width: 1240px) {
.nav-container-white-bar {
width: 1200px;
}
}
body:has(.hero-search-wrapper) .nav-container-white-bar {
position: fixed;
top: 50px;
left: 50%;
transform: translateX(-50%) translateY(0);
max-width: 1200px;
width: calc(100% - 40px);
z-index: 1004;
margin: 0 !important;
padding: 0 !important;
margin-top: 0 !important;
padding-top: 0 !important;
transition: transform 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}
body:has(.hero-search-wrapper) .nav-container-white-bar.hide-on-scroll {
transform: translateX(-50%) translateY(-200px);
pointer-events: none;
}
@media (min-width: 1240px) {
body:has(.hero-search-wrapper) .nav-container-white-bar {
width: 1200px;
}
}
.header-content-white-bar {
max-width: 1200px;
width: 100%;
margin: 0 auto;
padding: 0 20px;
box-sizing: border-box;
}
body:has(.hero-search-wrapper) .header-content-white-bar {
margin-top: 0 !important;
padding-top: 0 !important;
}
.header-white-bar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 2px 0;
background: transparent;
gap: 30px;
margin: 0;
min-height: auto;
box-sizing: border-box;
}
body:has(.hero-search-wrapper) .header-white-bar {
margin-top: 0 !important;
padding-top: 2px;
padding-bottom: 2px;
min-height: auto;
}
/* Información superior en barra blanca */
.header-top-info-white {
display: flex;
align-items: center;
gap: 15px;
}
.netzerd-social-text-white {
font-size: 13px;
font-weight: 500;
color: #666;
letter-spacing: 0.5px;
}
.btn-comprar-cookies-white {
background: #dc3545;
color: white;
border: none;
padding: 6px 16px;
border-radius: 4px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 0.5px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.btn-comprar-cookies-white:hover {
background: #c82333;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(220, 53, 69, 0.4);
}
.header-content-new {
max-width: 1400px;
margin: 0 auto;
padding: 0 20px;
margin-top: 0;
padding-top: 0;
}
/* Top bar eliminada - elementos movidos a header-main-bar */
/* Left section para Netzerd TV */
.header-left-section {
display: flex;
align-items: center;
min-width: 150px;
}
.netzerd-tv-placeholder {
/* Placeholder para Netzerd TV - se agregará luego */
display: block;
}
.netzerd-social-text {
font-size: 13px;
font-weight: 500;
color: #fff;
letter-spacing: 0.5px;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
/* Navegación en barra blanca elegante */
.header-nav-item-white {
display: flex;
flex-direction: column;
align-items: center;
text-decoration: none;
color: #444;
padding: 10px 16px;
font-size: 14px;
font-weight: 500;
transition: all 0.3s ease;
border-radius: 10px;
position: relative;
gap: 5px;
}
.header-nav-item-white i {
font-size: 20px;
margin-bottom: 2px;
transition: transform 0.3s ease;
}
.header-nav-icon {
width: 22px;
height: 22px;
object-fit: contain;
margin-bottom: 2px;
transition: transform 0.3s ease;
}
/* Ajuste visual específico para el icono de Red Social */
.header-nav-icon-red-social {
width: 21px;
height: 21px;
object-fit: contain;
image-rendering: -webkit-optimize-contrast;
image-rendering: crisp-edges;
opacity: 0.92;
filter: grayscale(1) brightness(0.12);
}
.header-nav-item-white span {
font-size: 14px;
font-weight: 500;
}
.header-nav-item-white:hover .header-nav-icon {
transform: scale(1.1);
}
.header-nav-item-white:hover .header-nav-icon-red-social {
opacity: 1;
filter: invert(45%) sepia(25%) saturate(1026%) hue-rotate(202deg) brightness(95%) contrast(93%);
}
.header-nav-item-white:hover {
color: #667eea;
background: linear-gradient(135deg, rgba(102, 126, 234, 0.08) 0%, rgba(118, 75, 162, 0.08) 100%);
transform: translateY(-2px);
}
.header-nav-item-white:hover i {
transform: scale(1.15);
color: #667eea;
}
.header-nav-item-white.active {
color: #667eea;
background: linear-gradient(135deg, rgba(102, 126, 234, 0.12) 0%, rgba(118, 75, 162, 0.12) 100%);
font-weight: 600;
}
.header-nav-item-white.active .header-nav-icon-red-social {
opacity: 1;
filter: invert(45%) sepia(25%) saturate(1026%) hue-rotate(202deg) brightness(95%) contrast(93%);
}
.header-nav-item-white.active::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 70%;
height: 3px;
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
border-radius: 3px 3px 0 0;
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.4);
}
/* Iconos en barra blanca */
.header-right-white {
display: flex;
align-items: center;
gap: 12px;
}
/* Enlaces de autenticación cuando no hay sesión */
.header-auth-links {
display: flex;
align-items: center;
gap: 8px;
}
.header-auth-link {
color: #444;
text-decoration: none;
font-size: 14px;
font-weight: 500;
padding: 6px 12px;
border-radius: 6px;
transition: all 0.3s ease;
}
.header-auth-link:hover {
color: #667eea;
background: rgba(102, 126, 234, 0.1);
}
.header-auth-separator {
color: #ccc;
font-size: 14px;
}
.header-icon-btn-white {
background: none;
border: none;
color: #555;
font-size: 20px;
padding: 4px;
cursor: pointer;
border-radius: 8px;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
position: relative;
width: 40px;
height: 40px;
}
.header-icon-btn-white:hover {
background: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
color: #667eea;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2);
}
.header-icon-btn-white i {
font-size: 18px;
}
.header-icon-img {
width: 26px;
height: 26px;
object-fit: contain;
}
/* Iconos de usuario */
.user-icons-header {
display: flex;
align-items: center;
gap: 8px;
height: 36px;
}
.user-icon-link {
display: flex;
align-items: center;
justify-content: center;
background: none;
border: none;
padding: 0;
cursor: pointer;
text-decoration: none;
transition: transform 0.3s ease;
height: 32px;
width: 32px;
vertical-align: middle;
}
.user-icon-link:hover {
transform: scale(1.1);
}
.user-icon-header {
width: 32px;
height: 32px;
object-fit: contain;
transition: transform 0.3s ease;
display: block;
}
.user-icon-header:hover {
transform: scale(1.1);
}
.user-menu-toggle-white {
display: flex;
align-items: center;
justify-content: center;
padding: 0;
margin: 0;
height: 32px;
width: 32px;
}
.notification-bell-wrapper-white {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.notification-bell-header-white {
position: relative;
display: flex;
align-items: center;
justify-content: center;
}
.notification-badge-header-white {
position: absolute;
top: 5px;
right: 5px;
background: #ef5350;
color: white;
border-radius: 50%;
width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: bold;
animation: pulse 2s infinite;
}
.user-menu-dropdown-white {
position: relative;
display: inline-block;
}
.user-menu-toggle-white {
display: inline-block;
background: none;
border: none;
padding: 0;
cursor: pointer;
}
.btn-comprar-cookies {
background: #dc3545;
color: white;
border: none;
padding: 6px 16px;
border-radius: 4px;
font-size: 12px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
text-transform: uppercase;
letter-spacing: 0.5px;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
}
.btn-comprar-cookies:hover {
background: #c82333;
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(220, 53, 69, 0.5);
}
/* Main header bar */
.header-main-bar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 2px 0 !important;
background: transparent;
margin: 0 !important;
height: auto;
min-height: auto;
}
.header-logo-link {
text-decoration: none;
display: flex;
align-items: center;
}
.header-logo {
display: flex;
align-items: center;
}
.header-logo {
display: flex;
align-items: center;
}
.header-logo img {
height: 40px;
width: auto;
object-fit: contain;
}
/* Logo en barra blanca (sin sombra) */
.nav-container-white-bar .header-logo img {
filter: none;
}
/* Navigation */
.header-nav {
display: flex;
gap: 30px;
align-items: center;
flex: 1;
justify-content: center;
margin: 0 40px;
}
.header-nav-item {
display: flex;
flex-direction: column;
align-items: center;
text-decoration: none;
color: #fff;
padding: 8px 12px;
font-size: 14px;
font-weight: 500;
transition: all 0.3s ease;
border-radius: 8px;
position: relative;
gap: 4px;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.header-nav-item i {
font-size: 20px;
margin-bottom: 2px;
transition: transform 0.3s ease;
}
.header-nav-item span {
font-size: 13px;
}
.header-nav-item:hover {
color: #fff;
background-color: rgba(255, 255, 255, 0.2);
}
.header-nav-item:hover i {
transform: scale(1.1);
}
.header-nav-item.active {
color: #fff;
background-color: rgba(255, 255, 255, 0.25);
font-weight: 600;
}
.header-nav-item.active::after {
content: '';
position: absolute;
bottom: 0;
left: 50%;
transform: translateX(-50%);
width: 60%;
height: 3px;
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
border-radius: 2px 2px 0 0;
}
/* Right section con Social Travel, Coins e icons */
.header-right-section {
display: flex;
flex-direction: column;
align-items: flex-end;
gap: 8px;
}
.header-top-info {
display: flex;
align-items: center;
gap: 15px;
}
/* Right side icons */
.header-icons {
display: flex;
align-items: center;
gap: 12px;
}
.header-icon-btn {
background: none;
border: none;
color: #fff;
font-size: 20px;
padding: 10px;
cursor: pointer;
border-radius: 8px;
transition: all 0.3s ease;
display: flex;
align-items: center;
justify-content: center;
position: relative;
width: 40px;
height: 40px;
text-shadow: 0 1px 3px rgba(0, 0, 0, 0.3);
}
.header-icon-btn:hover {
background-color: rgba(255, 255, 255, 0.2);
color: #fff;
transform: translateY(-2px);
}
.header-icon-btn i {
font-size: 18px;
}
/* Notification bell nuevo */
.notification-bell-wrapper-new {
position: relative;
}
.notification-bell-header-new {
position: relative;
}
.notification-badge-header-new {
position: absolute;
top: 5px;
right: 5px;
background: #ef5350;
color: white;
border-radius: 50%;
width: 18px;
height: 18px;
display: flex;
align-items: center;
justify-content: center;
font-size: 10px;
font-weight: bold;
animation: pulse 2s infinite;
}
/* User menu nuevo */
.user-menu-dropdown-new {
position: relative;
display: inline-block;
}
.user-menu-toggle-new {
/* Hereda estilos de .header-icon-btn */
/* No necesita estilos adicionales, usa .header-icon-btn */
display: inline-block;
}
/* Responsive */
@media (max-width: 768px) {
.header-nav {
gap: 15px;
margin: 0 20px;
}
.header-nav-item span {
font-size: 11px;
}
.header-nav-item i {
font-size: 18px;
}
.netzerd-social-text {
font-size: 11px;
}
.btn-comprar-cookies {
padding: 5px 12px;
font-size: 11px;
}
}
/* Ocultar navegación antigua en index */
body:has(.hero-search-wrapper) .category-nav {
display: none !important;
}
/* Ajustar padding del body para nueva cabecera */
body:not(:has(.hero-search-wrapper)) {
padding-top: 100px;
}
/* Micrositios: dejar más aire para que el título conecte visualmente con la top bar fija */
body.page-detalle_hotel,
body.page-detalle_noticia {
padding-top: 128px !important;
}
/* Consolidar todas las reglas para body con hero-search-wrapper */
body:has(.hero-search-wrapper) {
padding-top: 0 !important;
margin: 0 !important;
margin-top: 0 !important;
padding-bottom: 0 !important;
margin-bottom: 0 !important;
background-color: transparent;
overflow-x: hidden;
position: relative;
height: auto;
}
/* Eliminar espacios del navegador por defecto */
* {
box-sizing: border-box;
}
body:has(.hero-search-wrapper) > header:first-child {
margin-top: 0 !important;
padding-top: 0 !important;
margin-bottom: 0 !important;
padding-bottom: 0 !important;
display: block;
line-height: 0;
}
body:has(.hero-search-wrapper) > .hero-search-wrapper:first-of-type {
margin-top: 0 !important;
padding-top: 0 !important;
}
body:has(.hero-search-wrapper) > header + .hero-search-wrapper {
margin-top: 0 !important;
padding-top: 0 !important;
display: block;
line-height: 0;
}
body:has(.hero-search-wrapper) > header {
margin-bottom: 0 !important;
padding-bottom: 0 !important;
}
body:has(.hero-search-wrapper) > header + * {
margin-top: 0 !important;
}
body:has(.hero-search-wrapper) header ~ .hero-search-wrapper {
margin-top: 0 !important;
padding-top: 0 !important;
display: block;
line-height: 0;
}
body:has(.hero-search-wrapper) header {
display: block;
line-height: 0;
margin-bottom: 0 !important;
margin-top: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
}
body:has(.hero-search-wrapper) header * {
line-height: normal;
}
body:has(.hero-search-wrapper) .hero-search-wrapper * {
line-height: normal;
}
/* Ajustar hero para que comience desde el top */
body:has(.hero-search-wrapper) .hero-search-wrapper {
padding-top: 0 !important;
margin-top: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
/* Forzar que no haya espacios antes del hero */
body:has(.hero-search-wrapper) > *:first-child {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* Asegurar que el body no tenga espacios */
body:has(.hero-search-wrapper),
body:has(.hero-search-wrapper) * {
margin-top: 0;
}
body:has(.hero-search-wrapper) > header,
body:has(.hero-search-wrapper) > .hero-search-wrapper {
margin-top: 0 !important;
padding-top: 0 !important;
}
body:has(.hero-search-wrapper) .hero-section-netzerd {
padding-top: 150px !important;
}
body:has(.hero-search-wrapper) .hero-search-wrapper {
margin-top: 0 !important;
padding-top: 0 !important;
position: relative;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
background-position: center 0 !important;
margin-bottom: 0 !important;
margin-left: 0 !important;
margin-right: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
body:has(.hero-search-wrapper) header {
margin: 0 !important;
padding: 0 !important;
position: absolute;
top: 0 !important;
left: 0 !important;
right: 0 !important;
width: 100% !important;
z-index: 1000;
height: auto;
margin-top: 0 !important;
padding-top: 0 !important;
background: transparent;
}
body:has(.hero-search-wrapper) .nav-container-new {
margin: 0 !important;
padding: 0 !important;
}
body:has(.hero-search-wrapper) > *:not(.hero-search-wrapper):not(header) {
background-color: #fafafa;
}
/* Asegurar que el hero no tenga márgenes del contenedor */
body:has(.hero-search-wrapper) .contenedor {
margin: 0;
padding: 0;
max-width: 100%;
}
body:has(.hero-search-wrapper) .hero-search-wrapper {
margin-left: 0 !important;
margin-right: 0 !important;
padding-left: 0 !important;
padding-right: 0 !important;
margin-top: 0 !important;
padding-top: 0 !important;
}
/* Eliminar cualquier espacio antes del hero */
body:has(.hero-search-wrapper) > *:first-child {
margin-top: 0 !important;
padding-top: 0 !important;
}
/* ============================================
FIN NUEVA CABECERA
============================================ */
/* Contenedor principal de la barra superior */
.nav-container {
background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
padding-bottom: 10px;
position: fixed; /* Changed to fixed */
top: 0; /* Position at the top */
width: 100%; /* Full width */
z-index: 100; /* Ensure it's above other content */
border-bottom: 1px solid rgba(0,0,0,0.05);
animation: slideDown 0.5s ease-out;
}
@keyframes slideDown {
from {
opacity: 0;
transform: translateY(-20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* Contenedor del contenido para centrar */
.header-content {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
/* --- TOP BAR (Logo y Info de Venta) --- */
.top-bar {
display: flex;
justify-content: space-between;
align-items: center;
padding: 10px 0;
}
.auth-links {
display: flex;
gap: 15px;
align-items: center;
flex-direction: row;
flex-wrap: nowrap;
position: relative;
}
.auth-links .nav-item {
display: flex;
flex-direction: row;
align-items: center;
padding: 5px 10px;
font-size: 14px;
min-width: unset;
white-space: nowrap;
}
.auth-links .nav-item i {
margin-bottom: 0;
margin-right: 5px;
font-size: 16px;
}
/* Menú desplegable del usuario */
.user-menu-dropdown {
position: relative;
display: inline-block;
}
.user-menu-toggle {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 15px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
border-radius: 25px;
cursor: pointer;
font-size: 14px;
font-weight: 500;
transition: all 0.3s ease;
box-shadow: 0 2px 10px rgba(102, 126, 234, 0.3);
}
.user-menu-toggle:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.4);
}
.user-menu-toggle:active {
transform: translateY(0);
}
.user-avatar {
width: 32px;
height: 32px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
font-size: 20px;
}
.user-name {
font-weight: 600;
max-width: 150px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.dropdown-arrow {
font-size: 12px;
transition: transform 0.3s ease;
}
.user-menu-toggle.active .dropdown-arrow {
transform: rotate(180deg);
}
.user-menu-dropdown-content {
display: none;
position: absolute;
right: 0;
top: calc(100% + 10px);
background: rgba(255, 255, 255, 0.95);
backdrop-filter: blur(10px);
-webkit-backdrop-filter: blur(10px);
min-width: 320px;
max-width: 380px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.15);
border-radius: 12px;
z-index: 1001;
overflow: hidden;
animation: slideDownMenu 0.3s ease;
border: 1px solid rgba(0, 0, 0, 0.1);
}
@keyframes slideDownMenu {
from {
opacity: 0;
transform: translateY(-10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.user-menu-dropdown-content.show {
display: block;
}
/* Nuevo diseño del menú desplegable */
.user-menu-header-new {
position: relative;
padding: 0;
overflow: hidden;
border-radius: 12px 12px 0 0;
}
.user-menu-bg-image {
width: 100%;
height: 80px;
background: linear-gradient(135deg, #ff6b6b 0%, #4ecdc4 50%, #45b7d1 100%);
background-image: url('data:image/svg+xml,');
background-size: cover;
background-position: center;
position: relative;
}
/* Si hay imagen de portada, se aplicará como background-image inline y sobrescribirá estos estilos */
.user-menu-bg-image[style*="background-image"] {
background-blend-mode: normal;
}
.user-menu-bg-image[style*="background-image"]::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(255, 107, 107, 0.2) 0%, rgba(78, 205, 196, 0.2) 50%, rgba(69, 183, 209, 0.2) 100%);
background-image: url('data:image/svg+xml,');
background-size: cover;
background-position: center;
opacity: 0.4;
z-index: 1;
pointer-events: none;
}
.user-menu-header-content {
position: relative;
padding: 20px;
padding-top: 50px;
display: flex;
align-items: flex-start;
gap: 15px;
background: white;
}
.user-menu-profile-pic {
width: 70px;
height: 70px;
border-radius: 12px;
overflow: hidden;
border: 3px solid white;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
position: absolute;
top: 50px;
left: 20px;
background: #f0f0f0;
display: flex;
align-items: center;
justify-content: center;
z-index: 2;
}
.user-menu-profile-pic img {
width: 100%;
height: 100%;
object-fit: cover;
}
.user-menu-profile-pic i {
font-size: 36px;
color: #999;
}
.user-menu-info-new {
flex: 1;
min-width: 0;
margin-left: 85px;
padding-top: 10px;
}
.user-menu-name-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 6px;
}
.user-menu-name {
font-size: 18px;
font-weight: 700;
color: #1a1a2e;
margin: 0;
}
.user-menu-verified-badge {
width: 20px;
height: 20px;
border-radius: 50%;
background: #1e40af;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
}
.user-menu-verified-badge i {
font-size: 12px;
color: white;
}
.user-menu-role {
display: block;
font-size: 13px;
font-weight: 600;
color: #1a1a2e;
margin-bottom: 4px;
}
.user-menu-affiliation {
display: block;
font-size: 12px;
color: #666;
}
.user-menu-item-new {
display: flex;
align-items: center;
gap: 12px;
padding: 14px 20px;
color: #333;
text-decoration: none;
font-size: 14px;
transition: all 0.2s ease;
border-bottom: 1px solid #f0f0f0;
position: relative;
}
.user-menu-item-new:last-of-type {
border-bottom: none;
}
.user-menu-item-new:hover {
background: #f8f9fa;
}
.user-menu-icon {
width: 24px;
height: 24px;
object-fit: contain;
flex-shrink: 0;
}
.user-menu-item-new span:not(.user-menu-points):not(.user-menu-chat-badge) {
flex: 1;
}
.user-menu-points {
margin-left: auto;
font-size: 14px;
font-weight: 600;
color: #333;
}
.user-menu-chat-badge {
margin-left: auto;
width: 24px;
height: 24px;
border-radius: 50%;
background: #ff6b35;
color: white;
display: flex;
align-items: center;
justify-content: center;
font-size: 12px;
font-weight: 700;
flex-shrink: 0;
}
.user-menu-logout-new {
color: #dc2626;
}
.user-menu-logout-new:hover {
background: #fff5f5;
color: #dc2626;
}
.user-menu-logout-new .user-menu-icon {
filter: brightness(0) saturate(100%) invert(27%) sepia(95%) saturate(7151%) hue-rotate(348deg) brightness(95%) contrast(89%);
}
/* Estilos antiguos mantenidos para compatibilidad */
.user-menu-header {
padding: 20px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
display: flex;
align-items: center;
gap: 15px;
}
.user-menu-avatar {
width: 50px;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
background: rgba(255, 255, 255, 0.2);
border-radius: 50%;
font-size: 28px;
flex-shrink: 0;
}
.user-menu-info {
flex: 1;
min-width: 0;
}
.user-menu-info strong {
display: block;
font-size: 16px;
font-weight: 600;
margin-bottom: 4px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.user-menu-info span {
display: block;
font-size: 13px;
opacity: 0.9;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.user-role-badge {
display: inline-block;
margin-top: 6px;
padding: 4px 10px;
background: rgba(255, 255, 255, 0.2);
border-radius: 12px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.user-menu-divider {
height: 1px;
background: #e0e0e0;
margin: 8px 0;
}
.user-menu-item {
display: flex;
align-items: center;
gap: 12px;
padding: 12px 20px;
color: #333;
text-decoration: none;
font-size: 14px;
transition: all 0.3s ease;
border-left: 3px solid transparent;
cursor: pointer;
position: relative;
z-index: 1002;
}
.user-menu-item:hover {
background: #f8f9fa;
border-left-color: #667eea;
color: #667eea;
}
.user-menu-item i {
width: 20px;
text-align: center;
font-size: 16px;
color: #667eea;
}
.user-menu-item:hover i {
color: #764ba2;
}
.user-menu-logout {
color: #dc3545;
}
.user-menu-logout i {
color: #dc3545;
}
.user-menu-logout:hover {
background: #fff5f5;
border-left-color: #dc3545;
color: #dc3545;
}
.user-menu-logout:hover i {
color: #dc3545;
}
/* Cerrar menú al hacer click fuera */
.user-menu-overlay {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
z-index: 999;
display: none;
background: transparent;
cursor: default;
pointer-events: none;
}
.user-menu-overlay.show {
display: block;
pointer-events: auto;
}
.logo {
display: flex;
align-items: center;
}
.logo img {
width: 120px;
height: 30px;
margin-right: 5px;
}
.logo-text {
font-size: 20px;
font-weight: bold;
color: #cc0033;
}
.sales-info {
display: flex;
align-items: center;
font-size: 14px;
color: #333;
}
.sales-info > * {
margin-left: 15px;
}
/* --- BARRA DE NAVEGACIÓN (CATEGORY NAVIGATION) --- */
.category-nav {
display: flex;
justify-content: flex-start;
gap: 20px;
}
.nav-item {
font-family: 'Poppins', sans-serif;
display: flex;
flex-direction: column;
align-items: center;
text-decoration: none;
color: #555;
padding: 8px 15px;
font-size: 13px;
font-weight: 500;
transition: all 0.3s ease;
min-width: 70px;
border-radius: 8px;
position: relative;
overflow: hidden;
}
.nav-item::before {
content: '';
position: absolute;
bottom: 0;
left: 50%;
width: 0;
height: 3px;
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
transform: translateX(-50%);
transition: width 0.3s ease;
}
.nav-item i {
font-size: 22px;
margin-bottom: 5px;
transition: transform 0.3s ease;
}
.nav-item:hover {
color: #667eea;
background-color: rgba(102, 126, 234, 0.05);
transform: translateY(-2px);
}
.nav-item:hover i {
transform: scale(1.1);
}
.nav-item:hover::before {
width: 100%;
}
.nav-item.active {
color: #667eea;
background-color: rgba(102, 126, 234, 0.1);
font-weight: 600;
}
.nav-item.active::before {
width: 100%;
}
/* (Pie global retirado del layout — sin estilos footer aquí) */
/* ======================================= */
/* 1. Estilos del Contenido Principal */
/* ======================================= */
/* Fondo azul suave para la sección del buscador */
.search-hero-section {
background: linear-gradient(180deg, #e3f2fd 0%, #f0f7ff 50%, #ffffff 100%);
padding: 30px 0 40px 0;
margin-top: 0;
position: relative;
z-index: 1;
}
.main-content {
max-width: 1050px; /* Ancho de la columna de contenido */
width: 90%;
margin: 0 auto 30px auto;
padding: 0;
position: relative;
z-index: 2;
}
/* Asegurar que main-content aparezca después del hero */
body:has(.hero-search-wrapper) .main-content {
margin-top: 0;
padding-top: 0;
position: relative;
z-index: 2;
background: #fafafa;
}
.page-title {
font-size: 32px;
font-weight: 700;
color: #2c3e50;
margin-bottom: 25px;
padding-bottom: 0;
}
/* Título de la sección de hoteles (ej: "Los hoteles agregados") */
.featured-title {
font-family: 'Playfair Display', serif;
font-size: 32px;
font-weight: 700;
color: #1a1a2e;
margin-top: 40px;
margin-bottom: 30px;
position: relative;
padding-bottom: 15px;
animation: fadeInUp 0.6s ease-out;
}
.featured-title::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 80px;
height: 4px;
background: linear-gradient(90deg, #667eea 0%, #764ba2 100%);
border-radius: 2px;
}
@keyframes fadeInUp {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ======================================= */
/* LAYOUT DE DOS COLUMNAS (BUSCADOR) */
/* ======================================= */
/* Sobrescribir main-content cuando tiene search-layout */
.main-content.search-layout {
max-width: 1400px; /* Increased max-width for overall layout to accommodate 3 columns */
width: 95%; /* Use more of the available width */
margin: 0 auto 30px auto;
padding: 20px 0;
display: flex;
gap: 25px; /* Adjusted gap between columns */
align-items: flex-start;
box-sizing: border-box;
overflow-x: hidden;
flex-direction: row; /* Always a row layout for desktop */
}
@media (max-width: 900px) {
.main-content.search-layout {
flex-direction: column; /* Stack elements vertically on smaller screens */
}
}
/* SIDEBAR DE FILTROS */
.filters-sidebar {
flex: 0 0 260px; /* Ancho fijo suficiente para inputs */
min-width: 260px;
position: sticky; /* Changed to sticky */
top: 120px; /* Adjust top to be below the fixed header */
align-self: flex-start; /* Ensure it sticks to the top of its flex container */
z-index: 5; /* Ensure it's above other content but below header */
}
/* Adjust the results column to account for the sticky sidebar */
.results-column {
flex: 1;
min-width: 0;
width: 100%;
/* No margin-left needed here, as sidebar is in flow */
}
@media (max-width: 900px) {
.filters-sidebar {
width: 100%;
position: static;
}
.hotel-card-horizontal {
flex-direction: column;
height: auto;
}
.hotel-card-horizontal .card-image {
height: 200px;
}
}
/* CONTENEDOR DE RESULTADOS */
.results-column {
flex: 1;
min-width: 0; /* CRÍTICO: Permite que flex-item se encoja si es necesario */
width: 100%;
}
/* ... (estilos intermedios) ... */
/* ======================================= */
/* 2. Estilos de la Cuadrícula y Tarjetas */
/* ======================================= */
.hotels-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); /* Adjusted minmax for better fit */
gap: 20px; /* Increased gap between cards */
margin-top: 20px;
animation: fadeIn 0.8s ease-out 0.2s backwards;
}
@media (min-width: 1200px) { /* Apply 3 columns from desktop size up, when sidebar is also present */
.hotels-grid {
grid-template-columns: repeat(3, 1fr); /* Force 3 columns */
}
}
.filters-container {
background: white;
border-radius: 16px;
box-shadow: 0 4px 20px rgba(0,0,0,0.05);
padding: 25px;
border: 1px solid rgba(0,0,0,0.05);
}
.filters-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 1px solid #eee;
}
.filters-header h3 {
font-size: 18px;
font-weight: 700;
color: #1a1a2e;
margin: 0;
display: flex;
align-items: center;
gap: 8px;
}
.reset-link {
font-size: 13px;
color: #667eea;
text-decoration: none;
font-weight: 600;
}
.filter-section {
margin-bottom: 25px;
}
.filter-section h4 {
font-size: 14px;
font-weight: 700;
color: #2c3e50;
margin-bottom: 12px;
text-transform: uppercase;
letter-spacing: 0.5px;
display: flex;
align-items: center;
gap: 8px;
}
.search-input-sidebar,
.select-sidebar,
.date-inputs-vertical input {
width: 100%;
padding: 8px 10px; /* Padding más pequeño */
border: 1px solid #e0e0e0;
border-radius: 8px;
font-size: 13px; /* Letra más pequeña */
background: #fafafa;
transition: all 0.3s ease;
box-sizing: border-box; /* Asegura que el padding no rompa el ancho */
}
.search-input-sidebar:focus,
.select-sidebar:focus,
.date-inputs-vertical input:focus {
background: white;
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
outline: none;
}
.date-inputs-vertical {
display: flex;
flex-direction: column;
gap: 10px;
}
.price-range-inputs {
display: flex;
align-items: center;
gap: 10px;
}
.price-range-inputs input {
width: 100%;
padding: 8px;
border: 1px solid #e0e0e0;
border-radius: 6px;
text-align: center;
}
.amenities-vertical {
display: flex;
flex-direction: column;
gap: 8px;
}
.checkbox-label {
display: flex;
align-items: center;
gap: 10px;
font-size: 14px;
color: #555;
cursor: pointer;
padding: 6px 10px;
border-radius: 6px;
transition: background 0.2s;
}
.checkbox-label:hover {
background: #f8f9fa;
}
.checkbox-label input[type="checkbox"] {
accent-color: #e91e63;
width: 16px;
height: 16px;
}
.btn-apply-filters {
width: 100%;
padding: 12px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
border-radius: 10px;
font-weight: 600;
cursor: pointer;
transition: transform 0.2s;
}
.btn-apply-filters:hover {
transform: translateY(-2px);
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}
/* COLUMNA DERECHA */
.results-column {
flex: 1;
}
.results-header {
display: flex;
justify-content: space-between;
align-items: flex-end;
margin-bottom: 25px;
}
.results-header h2 {
font-size: 28px;
margin: 0;
}
.results-count {
font-size: 14px;
color: #666;
background: #eee;
padding: 4px 12px;
border-radius: 20px;
}
/* TARJETAS HORIZONTALES */
.hotels-list-vertical {
display: flex;
flex-direction: column;
gap: 25px;
}
.hotel-card-horizontal {
flex-direction: row;
height: 220px;
}
.hotel-card-horizontal .card-image {
flex: 0 0 300px; /* Imagen ancha a la izquierda */
height: 100%;
}
.hotel-card-horizontal .card-info {
flex: 1;
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 25px;
}
.card-header-flex {
display: flex;
justify-content: space-between;
align-items: flex-start;
}
.hotel-rating-badge {
background: #667eea;
color: white;
padding: 6px 10px;
border-radius: 8px;
text-align: center;
box-shadow: 0 4px 10px rgba(102, 126, 234, 0.3);
}
.rating-number {
font-size: 18px;
font-weight: 700;
display: block;
}
.rating-text {
font-size: 10px;
text-transform: uppercase;
opacity: 0.9;
}
.card-footer-flex {
display: flex;
justify-content: space-between;
align-items: center;
margin-top: 15px;
}
.features-icons {
display: flex;
gap: 15px;
color: #666;
font-size: 18px;
}
.price-action {
text-align: right;
}
.price-from {
display: block;
font-size: 13px;
color: #666;
margin-bottom: 5px;
}
.price-from strong {
font-size: 24px;
color: #1a1a2e;
}
.btn-view {
display: inline-block;
color: #e91e63;
font-weight: 700;
font-size: 14px;
transition: transform 0.2s;
}
.hotel-card-horizontal:hover .btn-view {
transform: translateX(5px);
}
/* Responsive */
@media (max-width: 900px) {
.search-layout {
flex-direction: column; /* Stack elements vertically */
}
.filters-sidebar {
position: static; /* Revert to static on smaller screens */
width: 100%;
padding: 25px;
box-shadow: none;
border: none;
border-radius: 0;
}
}
.features-icons-mini {
display: flex;
gap: 10px;
margin-bottom: 15px;
font-size: 16px;
color: #667eea;
}
.hab-features-mini {
display: flex;
gap: 8px;
margin-top: 8px;
margin-bottom: 8px;
font-size: 16px;
color: #667eea;
}
.hotel-card {
background-color: #ffffff;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
transition: all 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
display: flex;
flex-direction: column;
border: 1px solid rgba(0,0,0,0.05);
cursor: pointer;
position: relative;
}
.hotel-card::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: linear-gradient(135deg, rgba(102, 126, 234, 0.05) 0%, rgba(118, 75, 162, 0.05) 100%);
opacity: 0;
transition: opacity 0.3s ease;
z-index: 0;
pointer-events: none;
}
/* EFECTO HOVER: Elevación y Sombra Mejorado */
.hotel-card:hover {
transform: translateY(-12px) scale(1.02);
box-shadow: 0 20px 50px rgba(102, 126, 234, 0.2);
border-color: rgba(102, 126, 234, 0.2);
}
.hotel-card:hover::before {
opacity: 1;
}
.card-image {
width: 100%;
height: 180px; /* Reduced height for better fit */
overflow: hidden;
}
.card-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.5s;
}
/* Efecto de zoom sutil en la imagen al hacer hover */
.hotel-card:hover .card-image img {
transform: scale(1.05);
}
.card-info {
padding: 15px; /* Reduced padding for better fit */
flex-grow: 1;
}
/* Tipo de Alojamiento (Ej: HOTEL, CABAÑA Y CAMPING) */
.hotel-type {
font-family: 'Poppins', sans-serif;
font-size: 11px;
font-weight: 600;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
margin-bottom: 8px;
letter-spacing: 1px;
text-transform: uppercase;
padding: 4px 12px;
border-radius: 12px;
display: inline-block;
box-shadow: 0 2px 8px rgba(102, 126, 234, 0.3);
}
.hotel-name {
font-family: 'Playfair Display', serif;
font-size: 18px;
font-weight: 700;
color: #1a1a2e;
margin-bottom: 6px;
line-height: 1.3;
transition: color 0.3s ease;
}
.hotel-card:hover .hotel-name {
color: #667eea;
}
.hotel-location {
font-size: 14px;
color: #777;
margin-bottom: 15px;
display: flex;
align-items: center;
}
.hotel-location::before {
/* Icono de localización */
content: '📍';
margin-right: 5px;
font-size: 12px;
}
/* Detalles (Rating y Características) */
.hotel-details {
display: flex;
align-items: center;
gap: 15px;
margin-top: 10px;
margin-bottom: 20px;
padding-bottom: 15px;
border-bottom: 1px solid #f0f0f0;
}
.hotel-details .rating {
font-weight: bold;
color: #fff;
background-color: #28a745; /* Verde para rating alto */
padding: 4px 8px;
border-radius: 5px;
font-size: 14px;
box-shadow: 0 2px 5px rgba(40, 167, 69, 0.3);
}
.hotel-details .stars {
color: gold;
font-size: 16px;
}
.hotel-details .features i {
color: #007bff; /* Azul para iconos de servicio */
margin-left: 8px;
font-size: 16px;
}
/* Botón de Detalles (y "Ver Más") */
.call-to-action {
margin-top: auto;
padding-top: 10px;
}
.view-details-btn {
display: block;
width: 100%;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 12px 0;
border-radius: 10px;
text-align: center;
text-decoration: none;
font-family: 'Poppins', sans-serif;
font-weight: 600;
font-size: 14px;
transition: all 0.3s ease;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
position: relative;
overflow: hidden;
}
.view-details-btn::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
transform: translate(-50%, -50%);
transition: width 0.6s, height 0.6s;
}
.view-details-btn:hover {
transform: translateY(-2px);
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}
.view-details-btn:hover::before {
width: 300px;
height: 300px;
}
/* --- Estilos para la funcionalidad Ver Más (Load More) --- */
.load-more-container {
text-align: center;
margin: 40px auto;
width: 300px;
}
/* Esto asegura que los hoteles ocultos se integren a la cuadrícula al mostrarse */
#hidden-hotels {
display: grid;
grid-template-columns: inherit;
gap: inherit;
width: 100%;
}
/* ======================================= */
/* Estilos del MODAL (Mini-Ventana) */
/* ======================================= */
/* El fondo oscuro que cubre toda la pantalla */
.modal {
display: none; /* Oculto por defecto */
position: fixed;
z-index: 1000; /* Asegura que esté por encima de todo */
left: 0;
top: 0;
width: 100%;
height: 100%;
overflow: auto;
background-color: rgba(0, 0, 0, 0.7); /* Fondo semi-transparente */
padding-top: 50px;
}
/* El contenedor de la información del hotel */
.modal-content {
background-color: #fefefe;
margin: 5% auto; /* Centrar verticalmente, más espacio arriba */
padding: 20px;
border: 1px solid #888;
width: 80%;
max-width: 900px; /* Ancho máximo para el modal */
border-radius: 10px;
position: relative;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
}
/* Botón de cerrar */
.close-btn {
color: #aaa;
float: right;
font-size: 28px;
font-weight: bold;
position: absolute;
top: 10px;
right: 20px;
}
.close-btn:hover,
.close-btn:focus {
color: #cc0033;
text-decoration: none;
cursor: pointer;
}
/* Estilos de la cabecera */
.modal-header {
border-bottom: 1px solid #eee;
padding-bottom: 10px;
margin-bottom: 20px;
}
.modal-header h2 {
color: #cc0033;
font-size: 26px;
margin: 0;
}
.modal-header p {
color: #555;
font-size: 16px;
margin-top: 5px;
}
/* Cuerpo del modal (imagen y detalles) */
.modal-body {
display: flex;
gap: 30px;
}
.modal-image-container {
flex: 1;
max-width: 45%; /* La imagen ocupa casi la mitad */
overflow: hidden;
border-radius: 8px;
}
.modal-image-container img {
width: 100%;
height: auto;
display: block;
}
.modal-details {
flex: 1;
padding-right: 15px;
}
.modal-text {
color: #333;
line-height: 1.6;
margin-bottom: 20px;
}
/* Características */
.modal-features h4 {
color: #1a1a1a;
font-size: 18px;
border-bottom: 2px solid #f0f0f0;
padding-bottom: 5px;
margin-bottom: 10px;
}
.modal-features ul {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-wrap: wrap;
gap: 15px;
}
.modal-features ul li {
background-color: #f8f8f8;
padding: 5px 10px;
border-radius: 4px;
font-size: 14px;
color: #555;
}
.modal-features ul li i {
color: #cc0033;
margin-right: 5px;
}
/* Rating */
.modal-rating {
margin-top: 20px;
padding-top: 15px;
border-top: 1px solid #eee;
display: flex;
align-items: center;
gap: 15px;
}
/* Footer (Botón de Reserva) */
.modal-footer {
text-align: right;
padding-top: 20px;
border-top: 1px solid #eee;
margin-top: 20px;
}
/* ======================================= */
/* Estilos para el Micrositio (detalle_hotel.php) */
/* ======================================= */
.hotel-detail-page {
/* Mantenemos el mismo contenedor max-width de 1200px */
width: 100%;
}
/* Paleta de fondo elegida aplicada al detalle del hotel */
body.page-detalle_hotel {
background: linear-gradient(180deg, #e3f2fd 0%, #f0f7ff 45%, #ffffff 100%);
}
/* Micrositio por diseño aprobado (misma paleta del módulo Personalización) */
body.page-detalle_hotel:has(.hotel-detail-page.theme-pet_friendly) {
background: linear-gradient(180deg, #e8f5ff 0%, #eaf8ff 35%, #f8fbff 100%);
}
body.page-detalle_hotel:has(.hotel-detail-page.theme-minimal) {
background: linear-gradient(180deg, #f4f7f9 0%, #f8fbfc 42%, #ffffff 100%);
}
body.page-detalle_hotel:has(.hotel-detail-page.theme-dynamic) {
background:
radial-gradient(1200px 520px at 12% -5%, rgba(249, 115, 22, 0.24) 0%, rgba(249, 115, 22, 0) 58%),
radial-gradient(1000px 460px at 88% 0%, rgba(192, 38, 211, 0.22) 0%, rgba(192, 38, 211, 0) 60%),
linear-gradient(180deg, #1e293b 0%, #0f172a 48%, #111827 100%);
background-attachment: fixed;
}
body.page-detalle_hotel:has(.hotel-detail-page.theme-dynamic) .main-content {
background: transparent;
}
body.page-detalle_hotel:has(.hotel-detail-page.theme-dark) {
background:
radial-gradient(1200px 520px at 10% -8%, rgba(59, 130, 246, 0.22) 0%, rgba(59, 130, 246, 0) 58%),
radial-gradient(900px 420px at 90% 0%, rgba(109, 40, 217, 0.18) 0%, rgba(109, 40, 217, 0) 60%),
linear-gradient(180deg, #0f172a 0%, #111827 48%, #0b1220 100%);
}
body.page-detalle_hotel .main-content {
background: transparent;
margin-top: 0;
padding-top: 8px;
}
/* Estructura general del detalle para evitar apariencia "plana" */
.detail-content-grid {
display: grid;
grid-template-columns: 1fr;
gap: 26px;
}
.col-main {
min-width: 0;
}
.detail-section,
.section-description,
.section-features,
.section-habitacion,
.video-tour,
.map-container-full {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.98) 0%, rgba(240, 247, 255, 0.92) 100%);
border: 1px solid #dce8fb;
border-radius: 18px;
padding: 24px;
box-shadow: 0 10px 30px rgba(17, 24, 39, 0.06);
}
.section-description,
.section-features,
.section-habitacion,
.video-tour {
margin-top: 22px;
}
.section-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
margin-bottom: 16px;
}
.section-header h2 {
margin: 0;
}
#resenasContainer {
min-height: 140px;
}
/* --- Encabezado --- */
.detail-header {
border: 1px solid #dce8fb;
border-radius: 18px;
padding: 24px;
margin-bottom: 25px;
background: linear-gradient(135deg, #f7fbff 0%, #ebf4ff 100%);
box-shadow: 0 10px 30px rgba(17, 24, 39, 0.06);
scroll-margin-top: 140px;
}
/* Bloque principal por tema para que no quede azul genérico */
.hotel-detail-page.theme-pet_friendly .detail-header {
background:
linear-gradient(180deg, rgba(56, 189, 248, 0.18) 0%, rgba(56, 189, 248, 0) 55%),
linear-gradient(90deg, #0ea5e9 0%, #06b6d4 40%, #22d3ee 100%);
border-color: #67e8f9;
color: #1e1b4b;
position: relative;
overflow: hidden;
}
.hotel-detail-page.theme-pet_friendly .detail-header::after {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 62%;
background: linear-gradient(180deg, rgba(255, 255, 255, 0), rgba(255, 255, 255, 0.95));
z-index: 0;
}
.hotel-detail-page.theme-pet_friendly .detail-header > * {
position: relative;
z-index: 1;
}
.hotel-detail-page.theme-pet_friendly .detail-header h1 {
color: #1e1b4b;
}
.hotel-detail-page.theme-pet_friendly .hotel-type-tag {
background: #14b8a8;
color: #ffffff;
border: 1px solid rgba(20, 184, 166, 0.35);
}
.hotel-detail-page.theme-pet_friendly .location-link {
background: #ffffff;
border-color: #99f6e4;
color: #334155;
}
.hotel-detail-page.theme-pet_friendly .location-link i {
color: #16a34a;
}
.hotel-detail-page.theme-pet_friendly .detail-section,
.hotel-detail-page.theme-pet_friendly .section-description,
.hotel-detail-page.theme-pet_friendly .section-features,
.hotel-detail-page.theme-pet_friendly .section-habitacion,
.hotel-detail-page.theme-pet_friendly .video-tour,
.hotel-detail-page.theme-pet_friendly .map-container-full {
background: linear-gradient(180deg, #ffffff 0%, #f0fdfa 100%);
border-color: #99f6e4;
}
.hotel-detail-page.theme-pet_friendly .section-description h2,
.hotel-detail-page.theme-pet_friendly .section-features h3,
.hotel-detail-page.theme-pet_friendly .section-habitacion h2,
.hotel-detail-page.theme-pet_friendly .video-tour h2,
.hotel-detail-page.theme-pet_friendly .map-container-full h2,
.hotel-detail-page.theme-pet_friendly .detail-section h2 {
color: #1e1b4b;
}
.hotel-detail-page.theme-pet_friendly .features-list li {
background: #ffffff;
border-color: #a7f3d0;
color: #334155;
}
.hotel-detail-page.theme-pet_friendly .features-list li i {
color: #16a34a;
}
.hotel-detail-page.theme-pet_friendly .hab-price {
background: #7c3aed;
-webkit-background-clip: initial;
-webkit-text-fill-color: #ffffff;
background-clip: initial;
color: #ffffff;
padding: 6px 12px;
border-radius: 10px;
display: inline-block;
}
.hotel-detail-page.theme-pet_friendly .btn-reservar-hab {
background: linear-gradient(180deg, #fb923c 0%, #ea580c 100%) !important;
color: #ffffff !important;
}
.hotel-detail-page.theme-pet_friendly .btn-escribir-resena {
background: linear-gradient(180deg, #fb923c 0%, #ea580c 100%) !important;
box-shadow: 0 4px 16px rgba(251, 146, 60, 0.35) !important;
}
.hotel-detail-page.theme-minimal .detail-header {
background: linear-gradient(135deg, #f9fbfc 0%, #f2f6f8 100%);
border-color: #d9e3ea;
}
.hotel-detail-page.theme-minimal .detail-header h1,
.hotel-detail-page.theme-minimal .detail-header h2,
.hotel-detail-page.theme-minimal .detail-header h3 {
color: #0f172a;
}
.hotel-detail-page.theme-minimal .hotel-type-tag {
background: #f1f5f9;
color: #0f172a;
border: 1px solid #cbd5e1;
}
.hotel-detail-page.theme-minimal .location-link {
background: #ffffff;
border-color: #dbe3ea;
color: #334155;
}
.hotel-detail-page.theme-minimal .location-link i {
color: #0f172a;
}
.hotel-detail-page.theme-minimal .detail-section,
.hotel-detail-page.theme-minimal .section-description,
.hotel-detail-page.theme-minimal .section-features,
.hotel-detail-page.theme-minimal .section-habitacion,
.hotel-detail-page.theme-minimal .video-tour,
.hotel-detail-page.theme-minimal .map-container-full {
background: linear-gradient(180deg, #ffffff 0%, #f8fafc 100%);
border-color: #dbe5ec;
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.05);
}
.hotel-detail-page.theme-minimal .section-description h2,
.hotel-detail-page.theme-minimal .section-features h3,
.hotel-detail-page.theme-minimal .section-habitacion h2,
.hotel-detail-page.theme-minimal .video-tour h2,
.hotel-detail-page.theme-minimal .map-container-full h2,
.hotel-detail-page.theme-minimal .detail-section h2 {
color: #0f172a;
}
.hotel-detail-page.theme-minimal .description-long,
.hotel-detail-page.theme-minimal .section-description p,
.hotel-detail-page.theme-minimal .section-habitacion p,
.hotel-detail-page.theme-minimal .detail-section p,
.hotel-detail-page.theme-minimal .hab-desc,
.hotel-detail-page.theme-minimal .hab-footer div {
color: #475569;
}
.hotel-detail-page.theme-minimal .features-list li {
background: #ffffff;
border-color: #e2e8f0;
color: #334155;
}
.hotel-detail-page.theme-minimal .features-list li i {
color: #94a3b8;
}
.hotel-detail-page.theme-minimal .habitacion-card {
border-color: #e2e8f0;
background: #ffffff;
}
.hotel-detail-page.theme-minimal .btn-reservar-hab {
background: #0d9488 !important;
color: #ffffff !important;
}
.hotel-detail-page.theme-minimal .btn-escribir-resena {
background: #0d9488 !important;
box-shadow: 0 4px 14px rgba(13, 148, 136, 0.28) !important;
}
.hotel-detail-page.theme-dynamic .detail-header {
background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
border-color: #334155;
color: #f8fafc;
position: relative;
overflow: hidden;
}
.hotel-detail-page.theme-dynamic .detail-header::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 88px;
background: linear-gradient(135deg, #f97316 0%, #c026d3 55%, #5b21b6 100%);
z-index: 0;
}
.hotel-detail-page.theme-dynamic .detail-header > * {
position: relative;
z-index: 1;
}
.hotel-detail-page.theme-dynamic .detail-header h1,
.hotel-detail-page.theme-dynamic .detail-header h2,
.hotel-detail-page.theme-dynamic .detail-header h3 {
color: #ffffff;
}
.hotel-detail-page.theme-dynamic .hotel-type-tag {
background: rgba(255, 255, 255, 0.16);
color: #fef08a;
border: 1px solid rgba(255, 255, 255, 0.25);
}
.hotel-detail-page.theme-dynamic .location-link {
background: rgba(255, 255, 255, 0.12);
border-color: rgba(255, 255, 255, 0.3);
color: #f8fafc;
}
.hotel-detail-page.theme-dynamic .location-link i {
color: #fbbf24;
}
.hotel-detail-page.theme-dynamic .location-link:hover {
background: rgba(255, 255, 255, 0.2);
color: #ffffff;
}
/* Dynamic: aplicar estilo global en todo el micrositio */
.hotel-detail-page.theme-dynamic .detail-section,
.hotel-detail-page.theme-dynamic .section-description,
.hotel-detail-page.theme-dynamic .section-features,
.hotel-detail-page.theme-dynamic .section-habitacion,
.hotel-detail-page.theme-dynamic .video-tour,
.hotel-detail-page.theme-dynamic .map-container-full {
background: linear-gradient(180deg, #1f2937 0%, #111827 100%);
border-color: #374151;
color: #e5e7eb;
position: relative;
overflow: hidden;
}
.hotel-detail-page.theme-dynamic .detail-section::before,
.hotel-detail-page.theme-dynamic .section-description::before,
.hotel-detail-page.theme-dynamic .section-features::before,
.hotel-detail-page.theme-dynamic .section-habitacion::before,
.hotel-detail-page.theme-dynamic .video-tour::before,
.hotel-detail-page.theme-dynamic .map-container-full::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
height: 72px;
background: linear-gradient(135deg, #f97316 0%, #c026d3 55%, #5b21b6 100%);
opacity: 0.92;
z-index: 0;
}
.hotel-detail-page.theme-dynamic .detail-section > *,
.hotel-detail-page.theme-dynamic .section-description > *,
.hotel-detail-page.theme-dynamic .section-features > *,
.hotel-detail-page.theme-dynamic .section-habitacion > *,
.hotel-detail-page.theme-dynamic .video-tour > *,
.hotel-detail-page.theme-dynamic .map-container-full > * {
position: relative;
z-index: 1;
}
.hotel-detail-page.theme-dynamic .section-description h2,
.hotel-detail-page.theme-dynamic .section-features h3,
.hotel-detail-page.theme-dynamic .section-habitacion h2,
.hotel-detail-page.theme-dynamic .video-tour h2,
.hotel-detail-page.theme-dynamic .map-container-full h2,
.hotel-detail-page.theme-dynamic .detail-section h2 {
color: #f9fafb;
}
.hotel-detail-page.theme-dynamic .description-long,
.hotel-detail-page.theme-dynamic .section-description p,
.hotel-detail-page.theme-dynamic .section-habitacion p,
.hotel-detail-page.theme-dynamic .detail-section p {
color: #d1d5db;
}
.hotel-detail-page.theme-dynamic .features-list li {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.18);
color: #f3f4f6;
}
.hotel-detail-page.theme-dynamic .features-list li i {
color: #fbbf24;
}
.hotel-detail-page.theme-dynamic .habitacion-card {
background: linear-gradient(180deg, #0f172a 0%, #111827 100%);
border: 1px solid #334155;
}
.hotel-detail-page.theme-dynamic .hab-desc,
.hotel-detail-page.theme-dynamic .hab-footer div {
color: #cbd5e1 !important;
}
.hotel-detail-page.theme-dynamic .btn-reservar-hab {
background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
color: #ffffff !important;
}
.hotel-detail-page.theme-dynamic .btn-escribir-resena {
background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%) !important;
box-shadow: 0 4px 16px rgba(220, 38, 38, 0.35) !important;
}
.hotel-detail-page.theme-dark .detail-header {
background: linear-gradient(135deg, #edf2fa 0%, #e5ebf6 100%);
border-color: #cfdaee;
}
/* Dark moderno en TODO el micrositio */
body.page-detalle_hotel:has(.hotel-detail-page.theme-dark) .main-content {
background: transparent;
}
.hotel-detail-page.theme-dark .detail-header {
background: linear-gradient(180deg, #1e3a5f 0%, #0f172a 70%, #020617 100%);
border-color: #334155;
color: #f8fafc;
position: relative;
overflow: hidden;
}
.hotel-detail-page.theme-dark .detail-header::before {
content: '';
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 38%;
background: linear-gradient(180deg, transparent, rgba(59, 130, 246, 0.35));
z-index: 0;
}
.hotel-detail-page.theme-dark .detail-header > * {
position: relative;
z-index: 1;
}
.hotel-detail-page.theme-dark .detail-header h1,
.hotel-detail-page.theme-dark .detail-header h2,
.hotel-detail-page.theme-dark .detail-header h3 {
color: #f8fafc;
}
.hotel-detail-page.theme-dark .hotel-type-tag {
background: rgba(132, 204, 22, 0.2);
color: #d9f99d;
border: 1px solid rgba(132, 204, 22, 0.45);
}
.hotel-detail-page.theme-dark .location-link {
background: rgba(255, 255, 255, 0.08);
border-color: rgba(255, 255, 255, 0.22);
color: #e2e8f0;
}
.hotel-detail-page.theme-dark .location-link i {
color: #84cc16;
}
.hotel-detail-page.theme-dark .detail-section,
.hotel-detail-page.theme-dark .section-description,
.hotel-detail-page.theme-dark .section-features,
.hotel-detail-page.theme-dark .section-habitacion,
.hotel-detail-page.theme-dark .video-tour,
.hotel-detail-page.theme-dark .map-container-full {
background: linear-gradient(180deg, #1e3a5f 0%, #0f172a 70%, #020617 100%);
border-color: #334155;
color: #dbeafe;
position: relative;
overflow: hidden;
}
.hotel-detail-page.theme-dark .detail-section::before,
.hotel-detail-page.theme-dark .section-description::before,
.hotel-detail-page.theme-dark .section-features::before,
.hotel-detail-page.theme-dark .section-habitacion::before,
.hotel-detail-page.theme-dark .video-tour::before,
.hotel-detail-page.theme-dark .map-container-full::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
right: 0;
height: 38%;
background: linear-gradient(180deg, transparent, rgba(59, 130, 246, 0.35));
opacity: 1;
z-index: 0;
}
.hotel-detail-page.theme-dark .detail-section > *,
.hotel-detail-page.theme-dark .section-description > *,
.hotel-detail-page.theme-dark .section-features > *,
.hotel-detail-page.theme-dark .section-habitacion > *,
.hotel-detail-page.theme-dark .video-tour > *,
.hotel-detail-page.theme-dark .map-container-full > * {
position: relative;
z-index: 1;
}
.hotel-detail-page.theme-dark .section-description h2,
.hotel-detail-page.theme-dark .section-features h3,
.hotel-detail-page.theme-dark .section-habitacion h2,
.hotel-detail-page.theme-dark .video-tour h2,
.hotel-detail-page.theme-dark .map-container-full h2,
.hotel-detail-page.theme-dark .detail-section h2 {
color: #f8fafc;
}
.hotel-detail-page.theme-dark .description-long,
.hotel-detail-page.theme-dark .section-description p,
.hotel-detail-page.theme-dark .section-habitacion p,
.hotel-detail-page.theme-dark .detail-section p,
.hotel-detail-page.theme-dark .hab-desc,
.hotel-detail-page.theme-dark .hab-footer div {
color: #cbd5e1 !important;
}
.hotel-detail-page.theme-dark .features-list li {
background: rgba(59, 130, 246, 0.14);
border-color: rgba(96, 165, 250, 0.4);
color: #e0f2fe;
}
.hotel-detail-page.theme-dark .features-list li i {
color: #60a5fa;
}
.hotel-detail-page.theme-dark .habitacion-card {
background: linear-gradient(180deg, #0f172a 0%, #0b1220 100%);
border: 1px solid #334155;
}
.hotel-detail-page.theme-dark .btn-reservar-hab {
background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%) !important;
color: #ffffff !important;
}
.hotel-detail-page.theme-dark .btn-escribir-resena {
background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%) !important;
box-shadow: 0 4px 16px rgba(220, 38, 38, 0.35) !important;
}
.detail-header h1 {
font-size: 36px;
color: #1a1a1a;
margin-bottom: 5px;
}
.hotel-type-tag {
font-size: 16px;
font-weight: 700;
color: #cc0033;
background-color: #ffe0e6;
padding: 4px 8px;
border-radius: 4px;
vertical-align: middle;
margin-left: 10px;
}
.location-price {
margin-bottom: 15px;
}
.location {
font-size: 16px;
color: #555;
}
.location i {
color: #cc0033;
margin-right: 5px;
}
.rating-bar {
display: flex;
align-items: center;
gap: 20px;
padding-top: 10px;
}
.rating-value {
font-size: 20px;
font-weight: 700;
color: white;
background-color: #007bff; /* Mantiene el color azul profesional */
padding: 6px 12px;
border-radius: 6px; /* Bordes ligeramente más suaves */
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); /* Sombra para elevarlo */
}
.stars-large {
font-size: 26px;
color: gold;
}
/* --- Imagen Principal --- */
.main-image {
width: 100%;
max-height: 550px;
overflow: hidden;
border-radius: 12px; /* Borde más curvo */
margin-bottom: 30px;
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1); /* Sombra más fuerte y elegante */
}
.main-image img {
/* Si la imagen es más alta que el contenedor */
object-fit: cover;
height: 100%;
}
/* --- Descripción Larga --- */
.description-long {
font-size: 16px;
line-height: 1.8; /* Aumenta el espaciado para mejor lectura (limpio) */
color: #444;
margin-bottom: 30px;
}
/* ======================================= */
/* Estilos Críticos para el Grid de Alojamientos */
/* ======================================= */
/* 1. Grid Contenedor */
.hotels-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
gap: 30px; /* Espacio entre las tarjetas */
margin-bottom: 40px;
}
/* 2. Enlace Envolvente (Asegura que ocupe el espacio sin decoraciones) */
.card-link-wrapper {
text-decoration: none;
color: inherit;
display: flex;
transition: transform 0.2s;
}
.card-link-wrapper:hover {
transform: translateY(-5px); /* Efecto visual (opcional) */
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.1);
}
/* Tarjeta alojamientos: enlace principal + franja RNT/RUT (botones fuera del ) */
.ph-hotel-card-wrap {
display: flex;
flex-direction: column;
text-decoration: none;
color: inherit;
transition: transform 0.2s, box-shadow 0.2s;
}
.ph-hotel-card-wrap:hover {
transform: translateY(-5px);
box-shadow: 0 10px 20px rgba(0, 0, 0, 0.08);
}
.ph-hotel-card-main {
text-decoration: none;
color: inherit;
display: block;
}
.ph-hotel-card-trust {
display: flex;
flex-wrap: wrap;
gap: 8px 12px;
align-items: center;
padding: 10px 12px;
background: #f0fdf4;
border: 1px solid #bbf7d0;
border-top: none;
border-radius: 0 0 8px 8px;
font-size: 12px;
color: #14532d;
}
.ph-hotel-card-trust__line {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
}
.ph-hotel-card-trust__btn {
border: 0;
cursor: pointer;
background: #0f766e;
color: #fff;
font-size: 11px;
font-weight: 600;
padding: 4px 10px;
border-radius: 999px;
}
.ph-hotel-card-trust__btn:hover {
background: #115e59;
}
.hotel-doc-modal {
position: fixed;
inset: 0;
z-index: 12000;
display: none;
align-items: center;
justify-content: center;
padding: 16px;
box-sizing: border-box;
}
.hotel-doc-modal.is-open {
display: flex;
}
.hotel-doc-modal__backdrop {
position: absolute;
inset: 0;
background: rgba(15, 23, 42, 0.55);
}
.hotel-doc-modal__dialog {
position: relative;
z-index: 1;
width: min(960px, 100%);
max-height: 90vh;
background: #fff;
border-radius: 12px;
box-shadow: 0 20px 50px rgba(0, 0, 0, 0.25);
display: flex;
flex-direction: column;
overflow: hidden;
}
.hotel-doc-modal__head {
display: flex;
align-items: center;
justify-content: space-between;
padding: 12px 16px;
border-bottom: 1px solid #e2e8f0;
}
.hotel-doc-modal__head h3 {
margin: 0;
font-size: 16px;
color: #0f172a;
}
.hotel-doc-modal__close {
border: 0;
background: #f1f5f9;
width: 36px;
height: 36px;
border-radius: 8px;
cursor: pointer;
font-size: 22px;
line-height: 1;
color: #334155;
}
.hotel-doc-modal__frame {
flex: 1;
min-height: 70vh;
width: 100%;
border: 0;
background: #f8fafc;
}
/* 3. Tarjeta del Hotel (Asegura la altura completa de la celda del grid) */
.hotel-card {
width: 100%;
border: 1px solid #e0e0e0;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
display: flex;
flex-direction: column;
background-color: #fff;
}
/* 4. Contenedor de la Imagen (CRÍTICO: Define una altura fija) */
.card-image {
width: 100%;
height: 200px; /* Altura fija para todas las imágenes */
overflow: hidden;
}
.card-image img {
width: 100%;
height: 100%;
object-fit: cover; /* Recorta la imagen para que cubra el contenedor */
display: block;
}
/* 5. Información (Permite que el contenido crezca y empuje el botón) */
.card-info {
padding: 15px;
display: flex;
flex-direction: column;
flex-grow: 1;
}
.call-to-action {
margin-top: auto; /* Empuja el botón al final de la tarjeta */
}
/* 6. Botón (para que se vea bien) */
.view-details-btn {
display: block;
width: 100%;
background-color: #cc0033;
color: white;
text-align: center;
padding: 10px 15px;
border-radius: 5px;
text-decoration: none;
font-weight: 600;
margin-top: 15px;
cursor: pointer;
}
/* --- Video Tour --- */
.video-tour {
margin-bottom: 40px;
}
.video-container {
position: relative;
width: 100%;
padding-bottom: 56.25%; /* Relación de aspecto 16:9 */
height: 0;
overflow: hidden;
border-radius: 8px;
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
}
.video-container iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
/* --- Amenidades/Características --- */
.features-title {
font-size: 22px;
color: #1a1a1a;
margin-bottom: 15px;
padding-top: 15px;
}
/* --- Amenidades/Características --- */
.features-list {
list-style: none;
padding: 0;
display: flex;
flex-wrap: wrap;
gap: 15px;
margin-bottom: 40px;
}
.features-list li {
font-size: 15px;
color: #333;
padding: 8px 15px;
background-color: #ffffff; /* Fondo blanco */
border-radius: 20px;
border: 1px solid #ddd; /* Borde sutil */
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05); /* Sombra muy sutil */
}
.features-list li i {
color: #cc0033; /* Usamos el color principal de tu marca */
margin-right: 5px;
}
/* --- Sección de Habitación --- */
.section-habitacion {
margin-top: 20px;
}
.habitacion-card {
display: flex;
background-color: #fff;
border: 1px solid #ddd; /* Borde más sutil */
border-radius: 10px;
overflow: hidden;
box-shadow: 0 8px 15px rgba(0, 0, 0, 0.08); /* Sombra más pronunciada */
transition: transform 0.3s;
}
.habitacion-card:hover {
transform: translateY(-5px); /* Efecto de elevación elegante */
}
.hab-img-container {
flex: 0 0 40%; /* Un poco más de espacio para la imagen */
max-height: 280px;
overflow: hidden;
}
.hab-img-container img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.hab-info {
flex: 1;
padding: 20px;
display: flex;
flex-direction: column;
justify-content: space-between;
}
.hab-desc {
font-size: 15px;
color: #555;
margin-bottom: 15px;
}
.hab-footer {
display: flex;
justify-content: space-between;
align-items: center;
padding-top: 10px;
border-top: 1px solid #eee;
}
.hab-price {
font-size: 26px; /* Precio más grande */
font-weight: 800;
color: #28a745; /* Color verde para "gancho" */
}
.btn-reservar-hab {
background-color: #007bff;
color: white;
padding: 10px 15px;
border-radius: 5px;
text-decoration: none;
font-weight: 600;
transition: background-color 0.3s;
}
.btn-reservar-hab:hover {
background-color: #0056b3;
}
/* --- Sidebar (Lateral) --- */
/* booking-widget eliminado de micrositios */
.current-price {
font-size: 16px;
color: #555;
margin-bottom: 15px;
}
.current-price strong {
font-size: 20px;
color: #cc0033;
}
.btn-reservar {
display: block;
width: 100%;
background-color: #cc0033;
color: white;
padding: 15px 0;
border-radius: 5px;
text-decoration: none;
font-size: 18px;
font-weight: 700;
transition: background-color 0.3s;
margin-top: 15px;
}
.btn-reservar:hover {
background-color: #a30029;
}
.contact-support {
font-size: 13px;
color: #777;
margin-top: 10px;
}
/* Sección del mapa al final del micrositio */
.map-section-full {
width: 100%;
background-color: #f9f9f9;
padding: 50px 0;
margin-top: 40px;
}
.map-container-full {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
}
.map-container-full h2 {
font-size: 28px;
font-weight: 700;
color: #2c3e50;
margin-bottom: 25px;
text-align: center;
}
.map-container-full h2 i {
color: #cc0033;
margin-right: 10px;
}
.map-responsive {
position: relative;
width: 100%;
height: 0;
padding-bottom: 45%; /* Ratio 16:9 ajustado */
border-radius: 12px;
overflow: hidden;
box-shadow: 0 8px 24px rgba(0,0,0,0.1);
}
.map-responsive iframe {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
border: none;
}
.card-link-wrapper {
text-decoration: none;
color: inherit;
display: flex;
}
/* ==========================================================
BUSCADOR SIMPLE EN ALOJAMIENTOS
========================================================== */
.clear-filters-btn {
padding: 10px 15px;
background-color: #f0f0f0;
color: #333;
border: 1px solid #ccc;
font-weight: 600;
font-size: 16px;
border-radius: 5px;
cursor: pointer;
transition: background-color 0.2s, border-color 0.2s, color 0.2s;
white-space: nowrap;
/* Propiedades de Flexbox para alinear el ícono y el texto */
display: flex;
align-items: center;
text-decoration: none;
gap: 5px;
}
.clear-filters-btn:hover {
background-color: #e0e0e0;
border-color: #999;
color: #000;
}
.clear-filters-btn i {
color: #555;
}
/* --- ESTILOS PARA EL INDICADOR DE FILTRO ACTIVO --- */
.active-filter-indicator {
max-width: 1200px;
margin: 20px auto 10px auto;
padding: 12px 20px;
background-color: #fff3cd;
color: #856404;
border: 1px solid #ffeeba;
border-radius: 5px;
display: flex;
justify-content: space-between;
align-items: center;
font-size: 16px;
}
.active-filter-indicator p {
margin: 0;
display: flex;
align-items: center;
}
.active-filter-indicator strong {
font-weight: bold;
margin: 0 5px;
}
.active-filter-indicator i {
margin-right: 8px;
color: #cc0033;
}
.reset-link {
color: #cc0033;
text-decoration: none;
margin-left: 15px;
font-weight: bold;
transition: color 0.2s;
}
.reset-link:hover {
color: #a30029;
text-decoration: underline;
}
.no-results-message {
text-align: center;
font-size: 18px;
color: #666;
padding: 40px 0;
}
.location-link {
display: inline-flex;
align-items: center;
gap: 8px;
margin-top: 5px;
margin-bottom: 20px;
font-size: 15px;
font-weight: 400;
color: #334155;
text-decoration: none;
transition: all 0.3s ease;
padding: 9px 14px;
border-radius: 999px;
background-color: #f1f5ff;
border: 1px solid #dbe7ff;
}
.location-link:hover {
color: #1d4ed8;
background-color: #e7efff;
border-color: #c7d7ff;
transform: translateY(-1px);
}
.location-link i {
font-size: 16px;
color: #cc0033;
}
.search-form {
display: flex;
flex-direction: column;
width: 100%;
gap: 15px;
align-items: stretch;
}
.search-form input[type="text"] {
flex-grow: 1 !important;
border: 1px solid #ccc;
border-radius: 5px;
font-size: 16px;
max-width: 100%;
outline: none;
transition: border-color 0.3s;
}
.main-filters-row {
display: flex;
gap: 20px;
width: 100%;
justify-content: center;
}
.filter-group {
flex: 1;
display: flex;
flex-direction: column;
}
.filter-group.full-width-input {
flex: none;
width: 100%;
}
/* Fila de fechas */
.dates-row {
display: grid;
grid-template-columns: 1fr 1fr 2fr;
gap: 15px;
width: 100%;
margin-bottom: 10px;
}
.dates-row input[type="date"] {
cursor: pointer;
}
.filter-group label, .amenities-filters .amenities-title {
font-weight: 600;
color: #666;
margin-bottom: 6px;
font-size: 11px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.filter-group select,
.filter-group input[type="text"],
.filter-group input[type="number"],
.filter-group input[type="date"] {
padding: 10px 14px;
border: 1px solid #e0e0e0;
border-radius: 8px;
font-size: 14px;
background-color: #fafafa;
transition: border-color 0.3s, background-color 0.3s;
font-family: 'Poppins', sans-serif;
}
.filter-group select:focus,
.filter-group input[type="text"]:focus,
.filter-group input[type="number"]:focus,
.filter-group input[type="date"]:focus {
border-color: #e91e63;
background-color: #fff;
outline: none;
}
.price-inputs {
display: flex;
align-items: center;
gap: 5px;
}
.price-inputs input {
width: 45%;
text-align: center;
}
.amenities-filters {
padding: 10px 0 0 0;
border-top: 1px solid #f0f0f0;
display: flex;
align-items: center;
justify-content: center;
gap: 15px;
flex-wrap: wrap;
}
.amenities-filters .amenities-title {
margin-right: 10px;
color: #666;
font-size: 12px;
font-weight: 600;
}
.amenities-filters label:not(.amenities-title) {
font-weight: normal;
color: #555;
font-size: 13px;
cursor: pointer;
padding: 6px 10px;
background-color: #f8f8f8;
border-radius: 20px;
transition: all 0.3s;
}
.amenities-filters input[type="checkbox"]:checked + label {
background-color: #e91e63;
color: white;
}
.amenities-filters input[type="checkbox"] {
display: none;
}
.search-actions {
display: flex;
gap: 10px;
justify-content: center;
width: 100%;
}
@media (max-width: 768px) {
.main-filters-row {
flex-direction: column;
}
.filter-group {
width: 100%;
}
}
.search-section-wrapper {
width: 100%;
}
.filters-container .search-box-container {
background-color: transparent;
border: none;
box-shadow: none;
border-radius: 0;
padding: 0;
margin-bottom: 25px; /* Add some space below the search box */
width: 100%; /* Ensure it takes full width of the sidebar */
}
.search-box-container {
display: flex;
flex-direction: column;
gap: 15px;
width: 100%;
margin: 0;
}
.search-box-container .search-form {
display: flex;
gap: 15px;
align-items: center;
width: 100%;
}
.search-box-container .search-title {
width: 100%;
text-align: left;
padding: 0 30px;
margin-top: 0;
margin-bottom: 15px;
}
.search-box-container h2 {
font-family: 'Playfair Display', serif;
width: 100%;
text-align: left;
margin: 0 0 8px 0;
font-size: 32px;
font-weight: 700;
color: #1a1a2e;
animation: fadeInUp 0.6s ease-out;
}
.simple-search-form {
display: flex;
padding: 20px;
margin-bottom: 30px;
background-color: #ffffff;
border-radius: 8px;
box-shadow: 0 4px 10px rgba(0, 0, 0, 0.05);
}
.search-input {
flex-grow: 1;
width: auto;
padding: 12px 15px;
border: 1px solid #ddd;
border-radius: 5px;
font-size: 16px;
outline: none;
transition: border-color 0.3s;
}
.main-content .search-box-container .search-form {
display: flex !important;
width: 100% !important;
}
.main-content.search-box-content-align {
max-width: 1050px;
width: 90%;
margin: 20px auto 0 auto;
padding: 0;
}
.search-input:focus {
border-color: #cc0033;
}
.search-button {
padding: 12px 30px;
border: none;
background: linear-gradient(135deg, #e91e63 0%, #f48fb1 100%);
color: white;
font-family: 'Poppins', sans-serif;
font-size: 15px;
font-weight: 600;
cursor: pointer;
border-radius: 50px;
transition: all 0.3s ease;
white-space: nowrap;
box-shadow: 0 4px 15px rgba(233, 30, 99, 0.3);
position: relative;
overflow: hidden;
}
.search-button::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.3);
transform: translate(-50%, -50%);
transition: width 0.6s, height 0.6s;
}
.search-button:hover {
transform: translateY(-3px) scale(1.02);
box-shadow: 0 8px 25px rgba(233, 30, 99, 0.4);
}
.search-button:hover::before {
width: 300px;
height: 300px;
}
.search-button i {
margin-right: 5px;
}
/* ======================================= */
/* GALERÍA DE FOTOS - MICROSITIO HOTEL */
/* ======================================= */
.photo-gallery {
margin-bottom: 30px;
border-radius: 12px;
overflow: hidden;
}
.gallery-main-image {
position: relative;
width: 100%;
height: 450px;
overflow: hidden;
cursor: pointer;
margin-bottom: 10px;
}
.gallery-main-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.gallery-main-image:hover img {
transform: scale(1.05);
}
.gallery-overlay {
position: absolute;
bottom: 0;
left: 0;
right: 0;
background: linear-gradient(to top, rgba(0,0,0,0.7), transparent);
color: white;
padding: 20px;
display: flex;
align-items: center;
gap: 10px;
opacity: 0;
transition: opacity 0.3s;
}
.gallery-main-image:hover .gallery-overlay {
opacity: 1;
}
.gallery-overlay i {
font-size: 24px;
}
.gallery-overlay span {
font-size: 16px;
font-weight: 600;
}
.gallery-thumbnails {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 10px;
}
.gallery-thumb {
position: relative;
height: 150px;
overflow: hidden;
border-radius: 8px;
cursor: pointer;
transition: transform 0.2s;
}
.gallery-thumb:hover {
transform: scale(1.05);
}
.gallery-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.gallery-more-overlay {
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.7);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
color: white;
font-size: 18px;
font-weight: 600;
}
.gallery-more-overlay i {
font-size: 32px;
margin-bottom: 8px;
}
/* Modal de Galería */
.gallery-modal {
display: none;
position: fixed;
z-index: 9999;
left: 0;
top: 0;
width: 100%;
height: 100%;
background-color: rgba(0, 0, 0, 0.95);
align-items: center;
justify-content: center;
}
.gallery-close {
position: absolute;
top: 20px;
right: 40px;
color: white;
font-size: 50px;
font-weight: bold;
cursor: pointer;
z-index: 10000;
transition: color 0.3s;
}
.gallery-close:hover {
color: #e91e63;
}
.gallery-modal-content {
position: relative;
width: 90%;
max-width: 1200px;
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
}
.gallery-modal-image-container {
flex: 1;
text-align: center;
}
.gallery-modal-image-container img {
max-width: 100%;
max-height: 80vh;
border-radius: 8px;
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.5);
}
.gallery-modal-caption {
color: white;
font-size: 18px;
margin-top: 15px;
text-align: center;
}
.gallery-counter {
color: #ccc;
font-size: 14px;
margin-top: 10px;
text-align: center;
}
.gallery-nav {
background-color: rgba(255, 255, 255, 0.2);
color: white;
border: none;
padding: 20px;
font-size: 30px;
cursor: pointer;
border-radius: 50%;
transition: background-color 0.3s, transform 0.2s;
width: 60px;
height: 60px;
display: flex;
align-items: center;
justify-content: center;
}
.gallery-nav:hover {
background-color: rgba(255, 255, 255, 0.4);
transform: scale(1.1);
}
.gallery-nav:active {
transform: scale(0.95);
}
/* Responsive */
@media (max-width: 768px) {
.gallery-main-image {
height: 300px;
}
.gallery-thumbnails {
grid-template-columns: repeat(2, 1fr);
}
.gallery-thumb {
height: 120px;
}
.gallery-nav {
width: 50px;
height: 50px;
font-size: 24px;
padding: 15px;
}
.gallery-close {
font-size: 40px;
right: 20px;
top: 10px;
}
}
/* ======================================= */
/* BOTÓN VOLVER FLOTANTE */
/* ======================================= */
.btn-universal-back {
position: fixed;
bottom: 30px;
left: 30px;
width: 50px;
height: 50px;
background: white;
border-radius: 50%;
box-shadow: 0 4px 15px rgba(0,0,0,0.15);
display: flex;
align-items: center;
justify-content: center;
color: #1a1a2e;
text-decoration: none;
font-size: 20px;
z-index: 999;
transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
border: 1px solid rgba(0,0,0,0.05);
}
.btn-universal-back:hover {
transform: scale(1.1);
background: #667eea;
color: white;
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
}
@media (max-width: 768px) {
.btn-universal-back {
bottom: 20px;
left: 20px;
width: 45px;
height: 45px;
}
}
@keyframes fadeIn {
from {
opacity: 0;
transform: translateY(20px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes slideInLeft {
from {
opacity: 0;
transform: translateX(-30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes slideInRight {
from {
opacity: 0;
transform: translateX(30px);
}
to {
opacity: 1;
transform: translateX(0);
}
}
@keyframes scaleIn {
from {
opacity: 0;
transform: scale(0.95);
}
to {
opacity: 1;
transform: scale(1);
}
}
/* Aplicar animaciones a secciones del micrositio */
.detail-header {
animation: fadeIn 0.6s ease-out;
}
.photo-gallery {
animation: scaleIn 0.7s ease-out 0.2s backwards;
}
.section-description {
animation: slideInLeft 0.7s ease-out 0.3s backwards;
}
.section-features {
animation: fadeIn 0.7s ease-out 0.4s backwards;
}
.section-habitacion {
animation: slideInRight 0.7s ease-out 0.5s backwards;
}
/* booking-widget eliminado */
.map-section-full {
animation: fadeIn 0.8s ease-out 0.7s backwards;
}
.map-container-full h2 {
margin-top: 0;
}
/* ======================================= */
/* MEJORAS TIPOGRÁFICAS MICROSITIO */
/* ======================================= */
.detail-header h1 {
font-family: 'Playfair Display', Georgia, serif;
font-size: 42px;
font-weight: 800;
color: #1a1a2e;
margin-bottom: 15px;
line-height: 1.2;
letter-spacing: -0.5px;
}
.hotel-type-tag {
font-family: 'Poppins', sans-serif;
font-size: 14px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 1px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
padding: 6px 16px;
border-radius: 20px;
margin-left: 15px;
display: inline-block;
vertical-align: middle;
}
.section-description h2,
.section-features h3,
.section-habitacion h2 {
font-family: 'Playfair Display', Georgia, serif;
font-weight: 700;
color: #1a1a2e;
position: relative;
padding-bottom: 15px;
margin-bottom: 25px;
}
.section-description h2::after,
.section-habitacion h2::after {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 60px;
height: 4px;
background: linear-gradient(90deg, #e91e63 0%, #f48fb1 100%);
border-radius: 2px;
}
.description-long {
font-size: 16px;
line-height: 1.8;
color: #555;
font-weight: 400;
}
/* Mejorar features list */
.features-list li {
font-size: 15px;
font-weight: 500;
transition: all 0.3s ease;
}
.features-list li:hover {
transform: translateX(5px);
background-color: #f0f0f0;
}
/* ======================================= */
/* EFECTOS HOVER MEJORADOS */
/* ======================================= */
.btn-reservar,
.btn-reservar-hab,
.view-details-btn {
position: relative;
overflow: hidden;
transition: all 0.3s ease;
}
.btn-reservar::before,
.btn-reservar-hab::before,
.view-details-btn::before {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 0;
height: 0;
border-radius: 50%;
background: rgba(255, 255, 255, 0.2);
transform: translate(-50%, -50%);
transition: width 0.6s, height 0.6s;
}
.btn-reservar:hover::before,
.btn-reservar-hab:hover::before,
.view-details-btn:hover::before {
width: 300px;
height: 300px;
}
.btn-reservar:hover,
.btn-reservar-hab:hover {
transform: translateY(-2px);
box-shadow: 0 8px 20px rgba(204, 0, 51, 0.3);
}
/* Sombras suaves y elevación */
.habitacion-card {
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
transition: all 0.3s ease;
}
.habitacion-card:hover {
box-shadow: 0 12px 35px rgba(0, 0, 0, 0.12);
transform: translateY(-5px);
}
/* ======================================= */
/* GRADIENTES Y COLORES MODERNOS */
/* ======================================= */
.current-price strong {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
font-size: 28px;
}
.hab-price {
background: linear-gradient(135deg, #11998e 0%, #38ef7d 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
/* ======================================= */
/* MICRO-INTERACCIONES */
/* ======================================= */
.features-list li i,
.location-link i {
transition: transform 0.3s ease;
}
.features-list li:hover i,
.location-link:hover i {
transform: scale(1.2) rotate(5deg);
}
/* Pulso sutil en botones importantes */
@keyframes pulse {
0%, 100% {
box-shadow: 0 0 0 0 rgba(233, 30, 99, 0.4);
}
50% {
box-shadow: 0 0 0 10px rgba(233, 30, 99, 0);
}
}
.btn-reservar {
animation: pulse 2s infinite;
}
/* ===== PRECIO TOTAL EN CARDS ===== */
.price-section {
background: linear-gradient(135deg, #f8f9ff 0%, #fff 100%);
padding: 15px;
border-radius: 12px;
margin: 15px 0;
border: 2px solid #e8ecff;
}
.price-total {
display: flex;
justify-content: space-between;
align-items: center;
}
.price-label {
font-size: 13px;
color: #666;
font-weight: 500;
}
.price-amount {
font-size: 24px;
font-weight: 700;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.room-nights {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: 13px;
color: #666;
background: #f0f0f0;
padding: 4px 10px;
border-radius: 12px;
}
/* Estilos para la columna de búsqueda y filtros */
.search-filter-column {
flex: 0 0 280px; /* Increased fixed width for the filter column */
min-width: 280px;
background-color: #ffffff;
border-radius: 16px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.05);
padding: 25px;
border: 1px solid rgba(0,0,0,0.05);
position: sticky;
top: 120px; /* Ajustar para que esté debajo del header fijo */
align-self: flex-start;
z-index: 5;
animation: slideInLeft 0.6s ease-out;
margin-left: 0; /* Removed negative margin to bring it into view */
}
.filter-form {
display: flex;
flex-direction: column;
gap: 20px;
}
.search-bar {
display: flex;
border: 1px solid #e0e0e0;
border-radius: 10px;
overflow: hidden;
box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}
.search-bar input[type="text"] {
flex-grow: 1;
padding: 12px 15px;
border: none;
font-size: 15px;
outline: none;
background-color: #fafafa;
}
.search-bar input[type="text"]:focus {
background-color: #ffffff;
}
.btn-search {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border: none;
color: white;
padding: 12px 18px;
cursor: pointer;
font-size: 16px;
transition: opacity 0.3s ease;
}
.btn-search:hover {
opacity: 0.9;
}
.filter-section h3 {
font-size: 20px;
font-weight: 700;
color: #1a1a2e;
margin-bottom: 20px;
padding-bottom: 10px;
border-bottom: 1px solid #eee;
}
.filter-group {
margin-bottom: 15px;
}
.filter-group label {
display: block;
font-size: 13px;
font-weight: 600;
color: #555;
margin-bottom: 8px;
text-transform: uppercase;
letter-spacing: 0.5px;
}
.filter-group input[type="text"],
.filter-group input[type="date"],
.filter-group input[type="number"] {
width: 100%;
padding: 10px 12px;
border: 1px solid #e0e0e0;
border-radius: 8px;
font-size: 14px;
background-color: #fafafa;
transition: border-color 0.3s, box-shadow 0.3s;
box-sizing: border-box;
}
.filter-group input[type="text"]:focus,
.filter-group input[type="date"]:focus,
.filter-group input[type="number"]:focus {
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
outline: none;
background-color: #ffffff;
}
.price-inputs {
display: flex;
align-items: center;
gap: 10px;
}
.price-inputs input {
flex: 1;
text-align: center;
}
.price-inputs span {
color: #777;
font-size: 16px;
}
.amenities {
display: flex;
flex-direction: column;
gap: 10px;
}
.checkbox-container {
display: block;
position: relative;
padding-left: 30px;
margin-bottom: 8px;
cursor: pointer;
font-size: 14px;
color: #555;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
}
.checkbox-container input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.checkmark {
position: absolute;
top: 0;
left: 0;
height: 20px;
width: 20px;
background-color: #eee;
border-radius: 4px;
transition: background-color 0.3s;
}
.checkbox-container:hover input ~ .checkmark {
background-color: #ccc;
}
.checkbox-container input:checked ~ .checkmark {
background-color: #667eea;
}
.checkmark:after {
content: "";
position: absolute;
display: none;
}
.checkbox-container input:checked ~ .checkmark:after {
display: block;
}
.checkbox-container .checkmark:after {
left: 7px;
top: 3px;
width: 5px;
height: 10px;
border: solid white;
border-width: 0 3px 3px 0;
-webkit-transform: rotate(45deg);
-ms-transform: rotate(45deg);
transform: rotate(45deg);
}
.btn-apply-filters,
.btn-clear-filters {
width: 100%;
padding: 12px;
border: none;
border-radius: 10px;
font-weight: 600;
cursor: pointer;
transition: transform 0.2s, box-shadow 0.2s;
font-size: 15px;
}
.btn-apply-filters {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}
.btn-apply-filters:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}
.btn-clear-filters {
background-color: #f0f0f0;
color: #555;
margin-top: 10px;
}
.btn-clear-filters:hover {
transform: translateY(-1px);
box-shadow: 0 2px 8px rgba(0,0,0,0.1);
background-color: #e0e0e0;
}
@media (max-width: 900px) {
.search-filter-column {
position: static;
width: 100%;
margin-bottom: 30px;
padding: 20px;
box-shadow: none;
border: none;
border-radius: 0;
}
}
/* ================================================
HERO SEARCH SECTION - ESTILO HOSTELWORLD NETZERD
================================================ */
.hero-search-wrapper {
margin: 0 !important;
padding: 0 !important;
padding-top: 0 !important;
background: url('../img/fondo.jpeg') center top / cover no-repeat;
background-attachment: scroll;
background-position: center top;
background-size: cover;
height: 100vh;
min-height: 100vh;
display: flex;
align-items: center;
position: relative;
top: 0 !important;
margin-top: 0 !important;
left: 0 !important;
right: 0 !important;
overflow: hidden;
width: 100% !important;
max-width: 100% !important;
box-sizing: border-box;
margin-left: 0 !important;
margin-right: 0 !important;
margin-bottom: 0 !important;
z-index: 1;
line-height: 0;
font-size: 0;
border: none !important;
outline: none !important;
}
/* Asegurar que la imagen se extienda hasta el top */
body:has(.hero-search-wrapper) {
margin: 0 !important;
padding: 0 !important;
margin-top: 0 !important;
padding-top: 0 !important;
}
body:has(.hero-search-wrapper) .hero-search-wrapper {
margin-top: 0 !important;
padding-top: 0 !important;
position: relative;
top: 0 !important;
left: 0 !important;
right: 0 !important;
height: 100vh !important;
min-height: 100vh !important;
background-position: center 0 !important;
background-size: cover !important;
background-attachment: scroll !important;
background-origin: border-box !important;
background-clip: border-box !important;
width: 100% !important;
margin: 0 !important;
padding: 0 !important;
border: none !important;
outline: none !important;
}
/* Forzar que el hero comience desde el top absoluto del viewport */
body:has(.hero-search-wrapper) > .hero-search-wrapper:first-of-type,
body:has(.hero-search-wrapper) header + .hero-search-wrapper {
margin-top: 0 !important;
padding-top: 0 !important;
top: 0 !important;
margin: 0 !important;
padding: 0 !important;
}
/* Eliminar cualquier espacio del body antes del hero */
body:has(.hero-search-wrapper) {
padding-top: 0 !important;
margin-top: 0 !important;
overflow-x: hidden;
}
/* Asegurar que el hero comience desde el top absoluto */
body:has(.hero-search-wrapper) > .hero-search-wrapper,
body:has(.hero-search-wrapper) header + .hero-search-wrapper {
margin-top: 0 !important;
padding-top: 0 !important;
top: 0 !important;
position: relative;
}
/* Asegurar que no haya espacio entre header y hero */
body:has(.hero-search-wrapper) header ~ .hero-search-wrapper {
margin-top: 0 !important;
padding-top: 0 !important;
}
.hero-search-wrapper > * {
line-height: normal;
font-size: initial;
}
.hero-search-wrapper::before {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: rgba(0, 0, 0, 0.25);
z-index: 1;
pointer-events: none;
}
.hero-search-wrapper::after {
content: '';
position: absolute;
top: 0;
left: 0;
right: 0;
bottom: 0;
background: url('../img/Coins, corazones y banderas.png') center center / contain no-repeat;
opacity: 0.42;
z-index: 2;
pointer-events: none;
background-position: center right;
background-size: auto 72%;
}
.hero-section-netzerd {
max-width: 1200px;
width: 100%;
margin: 0 auto;
padding: 24px 20px 48px;
position: relative;
z-index: 3;
box-sizing: border-box;
}
.hero-content {
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
margin-bottom: 40px;
gap: 24px;
text-align: center;
margin-top: 0;
padding-top: clamp(72px, 14vh, 120px);
}
.hero-text {
width: 100%;
max-width: min(720px, 100%);
margin-left: auto;
margin-right: auto;
margin-top: 0;
padding: 0 8px;
box-sizing: border-box;
}
.hero-text h1 {
font-size: clamp(1.75rem, 4vw, 3.25rem);
font-weight: 700;
color: white;
margin: 0;
line-height: 1.2;
letter-spacing: -0.02em;
text-align: center;
font-family: 'Playfair Display', 'Georgia', serif;
text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45), 0 1px 4px rgba(0, 0, 0, 0.35);
}
.hero-subtitle {
font-size: 20px;
color: rgba(255, 255, 255, 0.9);
margin: 0;
font-weight: 400;
}
.hero-community {
display: flex;
flex-direction: column;
align-items: center;
gap: 15px;
}
.community-avatars {
display: flex;
gap: -10px;
position: relative;
}
.avatar-circle {
width: 50px;
height: 50px;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 20px;
border: 3px solid white;
box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
margin-left: -10px;
position: relative;
z-index: 1;
}
.avatar-circle:first-child {
margin-left: 0;
z-index: 3;
}
.avatar-circle:nth-child(2) {
z-index: 2;
}
.community-icons {
display: flex;
gap: 12px;
flex-wrap: wrap;
justify-content: center;
}
.community-icons i {
font-size: 20px;
color: rgba(255, 255, 255, 0.8);
background: rgba(255, 255, 255, 0.15);
padding: 10px;
border-radius: 50%;
width: 40px;
height: 40px;
display: flex;
align-items: center;
justify-content: center;
backdrop-filter: blur(10px);
transition: all 0.3s ease;
}
.community-icons i:hover {
background: rgba(255, 255, 255, 0.25);
transform: scale(1.1);
}
/* Search Form */
.hero-search-form-netzerd {
background: #ffffff;
border-radius: 16px;
padding: 10px 10px 10px 12px;
box-shadow: 0 18px 50px rgba(15, 23, 42, 0.18);
max-width: 1000px;
margin: 0 auto;
border: 1px solid #e2e8f0;
position: relative;
}
.hero-search-form-netzerd::before {
content: '';
position: absolute;
top: -10px;
left: -10px;
right: -10px;
bottom: -10px;
background: rgba(255, 255, 255, 0.25);
border-radius: 20px;
z-index: -1;
}
.search-input-group {
display: flex;
gap: 8px;
align-items: stretch;
}
.search-field {
flex: 1 1 0;
display: flex;
align-items: flex-start;
justify-content: center;
gap: 4px;
padding: 10px 10px;
border-radius: 12px;
transition: background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
position: relative;
cursor: pointer;
background: #f8fafc;
border: 1px solid #e5e7eb;
min-height: 60px;
flex-direction: column;
min-width: 0;
}
.search-field:hover {
background: #f1f5f9;
border-color: #cbd5e1;
}
.search-field i {
color: #2563eb;
font-size: 20px;
flex-shrink: 0;
}
.search-field-icon {
width: 16px;
height: 16px;
object-fit: contain;
flex-shrink: 0;
}
.search-field-header {
display: flex;
align-items: center;
gap: 4px;
width: 100%;
justify-content: center;
margin-bottom: 4px;
}
.search-field-title {
font-size: 11px;
font-weight: 600;
color: #64748b;
text-transform: none;
letter-spacing: 0.02em;
}
.search-field input {
border: none;
background: transparent;
font-size: 14px;
font-weight: 500;
color: #0f172a;
outline: none;
flex: 0 0 auto;
font-family: 'Inter', 'Poppins', sans-serif;
text-align: left;
width: auto;
min-width: 120px;
}
.search-field input::placeholder {
color: #999;
}
.search-field input[type="date"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
pointer-events: none;
}
.search-field input[type="number"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
pointer-events: none;
}
/* Displays para los campos de búsqueda */
.date-display,
.guests-display,
.pets-display,
.rooms-display {
font-size: 13px;
font-weight: 500;
color: #1a1a2e;
white-space: nowrap;
flex: 0 0 auto;
text-align: center;
width: 100%;
line-height: 1.2;
margin-top: 2px;
display: block;
visibility: visible;
}
.date-input-wrapper {
display: none;
}
.date-input {
pointer-events: none !important;
opacity: 0 !important;
position: absolute !important;
width: 0 !important;
height: 0 !important;
visibility: hidden !important;
display: none !important;
}
input[type="date"] {
pointer-events: none !important;
opacity: 0 !important;
position: absolute !important;
width: 0 !important;
height: 0 !important;
visibility: hidden !important;
display: none !important;
}
.date-field {
flex: 1 1 0;
min-width: 0;
}
.date-display {
display: block !important;
visibility: visible !important;
opacity: 1 !important;
position: relative;
z-index: 1;
}
.guests-field {
flex: 1 1 0;
min-width: 0;
}
.pets-field {
flex: 1 1 0;
min-width: 0;
}
.rooms-field {
flex: 1 1 0;
min-width: 0;
}
.location-field {
min-width: auto;
max-width: none;
width: auto;
flex: 0 0 auto;
flex-direction: row;
padding: 8px 12px;
height: 60px;
flex-shrink: 0;
}
.search-submit-btn {
background: #2563eb;
color: white;
border: none;
border-radius: 12px;
padding: 16px 28px;
font-size: 17px;
font-weight: 600;
cursor: pointer;
display: flex;
align-items: center;
gap: 10px;
transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
font-family: 'Inter', 'Poppins', sans-serif;
white-space: nowrap;
box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
margin-left: auto;
margin-right: 0;
}
.search-submit-btn:hover {
background: #1d4ed8;
transform: translateY(-1px);
box-shadow: 0 8px 22px rgba(37, 99, 235, 0.4);
}
.search-submit-btn i {
font-size: 18px;
}
.search-submit-icon {
width: 18px;
height: 18px;
object-fit: contain;
}
.search-features {
display: flex;
justify-content: center;
gap: 30px;
margin-top: 16px;
padding: 0 20px 12px;
flex-wrap: wrap;
}
.feature-item {
display: flex;
align-items: center;
gap: 8px;
color: #666;
font-size: 14px;
font-weight: 500;
}
.feature-item i {
color: #28a745;
font-size: 16px;
}
/* Responsive */
@media (max-width: 968px) {
.hero-content {
flex-direction: column;
text-align: center;
gap: 22px;
margin-top: 0;
padding-top: clamp(64px, 12vh, 100px);
}
.hero-text {
margin-left: auto;
margin-right: auto;
margin-top: 0;
}
.hero-text h1 {
font-size: clamp(1.5rem, 4.5vw, 2.5rem);
text-align: center;
text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45), 0 1px 4px rgba(0, 0, 0, 0.35);
}
.hero-subtitle {
font-size: 18px;
}
.search-input-group {
flex-wrap: wrap;
}
.search-field {
flex: 1 1 calc(50% - 4px);
min-width: 150px;
}
.search-submit-btn {
flex: 1 1 100%;
justify-content: center;
margin-top: 8px;
}
}
@media (max-width: 640px) {
.hero-section-netzerd {
padding: 20px 14px 36px;
}
.hero-content {
margin-top: 0;
padding-top: clamp(56px, 11vh, 88px);
}
.hero-text {
margin-left: auto;
margin-right: auto;
margin-top: 0;
}
.hero-text h1 {
font-size: clamp(1.2rem, 5vw, 1.75rem);
text-align: center;
text-shadow: 0 2px 20px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.4);
}
.hero-subtitle {
font-size: 16px;
}
.search-input-group {
flex-direction: column;
}
.search-field {
flex: 1;
width: 100%;
}
.search-submit-btn {
width: 100%;
}
.search-features {
flex-direction: column;
gap: 12px;
align-items: center;
}
}
/* ================================================
SEARCH FILTER COLUMN NEW - ESTILO PARA ALOJAMIENTOS
================================================ */
.search-filter-column-new {
width: 100%;
max-width: 350px;
background: white;
border-radius: 16px;
padding: 20px;
box-shadow: 0 4px 20px rgba(0,0,0,0.08);
margin-bottom: 20px;
position: sticky;
top: 140px;
max-height: calc(100vh - 160px);
overflow-y: auto;
}
.hero-search-form-netzerd-inline {
background: transparent;
border-radius: 0;
padding: 0;
box-shadow: none;
margin: 0;
}
.hero-search-form-netzerd-inline .search-input-group {
flex-direction: column;
gap: 12px;
}
.hero-search-form-netzerd-inline .search-field {
width: 100%;
padding: 14px 16px;
background: #f8f9fa;
border-radius: 10px;
}
.hero-search-form-netzerd-inline .search-submit-btn {
width: 100%;
padding: 14px 24px;
font-size: 16px;
justify-content: center;
}
.hero-search-form-netzerd-inline .search-features {
margin-top: 12px;
padding: 0;
justify-content: flex-start;
gap: 20px;
}
.filter-section-new {
margin-top: 24px;
padding-top: 24px;
border-top: 2px solid #f0f0f0;
}
.filter-section-new h3 {
font-size: 18px;
font-weight: 700;
color: #1a1a2e;
margin-bottom: 20px;
display: flex;
align-items: center;
gap: 10px;
}
.filter-section-new h3 i {
color: #667eea;
font-size: 20px;
}
.filter-group-new {
margin-bottom: 20px;
}
.filter-group-new label {
display: block;
font-size: 14px;
font-weight: 600;
color: #333;
margin-bottom: 8px;
}
.filter-group-new input[type="text"],
.filter-group-new input[type="number"] {
width: 100%;
padding: 10px 14px;
border: 2px solid #e0e0e0;
border-radius: 8px;
font-size: 14px;
font-family: 'Poppins', sans-serif;
transition: all 0.3s ease;
box-sizing: border-box;
}
.filter-group-new input[type="text"]:focus,
.filter-group-new input[type="number"]:focus {
outline: none;
border-color: #667eea;
box-shadow: 0 0 0 3px rgba(102, 126, 234, 0.1);
}
.price-inputs {
display: flex;
align-items: center;
gap: 10px;
}
.price-inputs input {
flex: 1;
}
.price-inputs span {
color: #666;
font-weight: 600;
}
.amenities-grid {
display: flex;
flex-direction: column;
gap: 12px;
}
.checkbox-container-new {
display: flex;
align-items: center;
position: relative;
padding-left: 35px;
margin-bottom: 0;
cursor: pointer;
font-size: 14px;
color: #333;
user-select: none;
}
.checkbox-container-new input {
position: absolute;
opacity: 0;
cursor: pointer;
height: 0;
width: 0;
}
.checkmark-new {
position: absolute;
top: 0;
left: 0;
height: 22px;
width: 22px;
background-color: #f0f0f0;
border: 2px solid #ddd;
border-radius: 6px;
transition: all 0.3s ease;
}
.checkbox-container-new:hover input ~ .checkmark-new {
background-color: #e0e0e0;
border-color: #667eea;
}
.checkbox-container-new input:checked ~ .checkmark-new {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-color: #667eea;
}
.checkmark-new:after {
content: "";
position: absolute;
display: none;
}
.checkbox-container-new input:checked ~ .checkmark-new:after {
display: block;
}
.checkbox-container-new .checkmark-new:after {
left: 7px;
top: 3px;
width: 6px;
height: 12px;
border: solid white;
border-width: 0 2px 2px 0;
transform: rotate(45deg);
}
.filter-actions {
display: flex;
gap: 10px;
margin-top: 24px;
padding-top: 20px;
border-top: 1px solid #f0f0f0;
}
.btn-apply-filters-new {
flex: 1;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
border-radius: 10px;
padding: 12px 20px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
font-family: 'Poppins', sans-serif;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}
.btn-apply-filters-new:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}
.btn-clear-filters-new {
background: #f0f0f0;
color: #666;
border: none;
border-radius: 10px;
padding: 12px 20px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
font-family: 'Poppins', sans-serif;
}
.btn-clear-filters-new:hover {
background: #e0e0e0;
transform: translateY(-1px);
}
/* Search Bar Above Results */
.search-layout-full {
max-width: 1200px;
width: 90%;
margin: 0 auto;
padding: 120px 0 20px;
}
.search-bar-above-results {
margin-bottom: 30px;
width: 100%;
}
.results-section {
width: 100%;
}
.results-header {
display: flex;
justify-content: flex-start;
align-items: center;
margin-bottom: 25px;
}
.results-count {
font-size: 14px;
color: #666;
font-weight: 500;
}
.hero-search-form-netzerd-compact {
background: white;
border-radius: 16px;
padding: 8px;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
width: 100%;
}
.hero-search-form-netzerd-compact .search-input-group {
display: flex;
gap: 8px;
align-items: stretch;
}
.hero-search-form-netzerd-compact .search-field {
flex: 1;
display: flex;
align-items: center;
gap: 12px;
padding: 14px 16px;
border-radius: 12px;
transition: all 0.3s ease;
position: relative;
cursor: pointer;
background: #f8f9fa;
}
.hero-search-form-netzerd-compact .search-field:hover {
background: #f0f0f0;
}
.hero-search-form-netzerd-compact .search-field i {
color: #667eea;
font-size: 18px;
flex-shrink: 0;
}
.hero-search-form-netzerd-compact .search-field input {
border: none;
background: transparent;
font-size: 15px;
font-weight: 500;
color: #1a1a2e;
outline: none;
flex: 1;
font-family: 'Poppins', sans-serif;
}
.hero-search-form-netzerd-compact .search-field input::placeholder {
color: #999;
}
.hero-search-form-netzerd-compact .search-field input[type="date"],
.hero-search-form-netzerd-compact .search-field input[type="number"] {
position: absolute;
opacity: 0;
width: 0;
height: 0;
pointer-events: none;
}
.hero-search-form-netzerd-compact .date-display,
.hero-search-form-netzerd-compact .guests-display {
font-size: 15px;
font-weight: 500;
color: #1a1a2e;
flex: 1;
}
.hero-search-form-netzerd-compact .date-field {
min-width: 180px;
}
.hero-search-form-netzerd-compact .location-field {
position: relative;
}
.current-location-btn {
position: absolute;
top: calc(100% + 8px);
left: 0;
right: 0;
width: 100%;
background: white;
border: 2px solid #667eea;
border-radius: 12px;
padding: 14px 16px;
display: flex;
align-items: center;
justify-content: center;
gap: 10px;
cursor: pointer;
font-size: 15px;
font-weight: 600;
color: #667eea;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.2);
opacity: 0;
transform: translateY(-15px) scale(0.95);
pointer-events: none;
transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
z-index: 1000;
white-space: nowrap;
font-family: 'Poppins', sans-serif;
will-change: transform, opacity;
box-sizing: border-box;
min-height: 48px;
}
.current-location-btn.show {
opacity: 1;
transform: translateY(0) scale(1);
pointer-events: all;
animation: slideDownFade 0.4s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}
.current-location-btn:hover {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
transform: translateY(-3px) scale(1.02);
box-shadow: 0 8px 25px rgba(102, 126, 234, 0.4);
border-color: #764ba2;
}
@keyframes slideDownFade {
0% {
opacity: 0;
transform: translateY(-15px) scale(0.95);
}
60% {
transform: translateY(2px) scale(1.02);
}
100% {
opacity: 1;
transform: translateY(0) scale(1);
}
}
.current-location-btn i {
font-size: 16px;
}
.current-location-btn.loading {
cursor: wait;
}
.current-location-btn.loading i {
animation: spin 1s linear infinite;
}
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
/* ================================================
MODAL DE CALENDARIO PERSONALIZADO - ESTILO HOSTELWORLD
================================================ */
.date-modal {
display: none;
position: fixed;
z-index: 10000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(5px);
align-items: center;
justify-content: center;
animation: fadeIn 0.3s ease-out;
}
.date-modal-content {
background: white;
border-radius: 20px;
width: 90%;
max-width: 900px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
animation: slideUp 0.4s ease-out;
overflow: hidden;
}
.date-modal-header {
padding: 24px 28px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
}
.date-modal-header h3 {
margin: 0;
font-size: 22px;
font-weight: 700;
display: flex;
align-items: center;
gap: 12px;
}
.date-modal-header h3 i {
font-size: 24px;
}
.date-nights-info {
position: absolute;
left: 50%;
transform: translateX(-50%);
font-size: 16px;
font-weight: 600;
background: rgba(255, 255, 255, 0.2);
padding: 6px 16px;
border-radius: 20px;
backdrop-filter: blur(10px);
}
.date-modal-close {
background: rgba(255, 255, 255, 0.2);
border: none;
color: white;
font-size: 24px;
width: 36px;
height: 36px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
padding: 0;
}
.date-modal-close:hover {
background: rgba(255, 255, 255, 0.3);
transform: rotate(90deg);
}
.date-modal-body {
padding: 30px;
}
.calendar-container {
display: flex;
gap: 30px;
justify-content: center;
}
.calendar-month {
flex: 1;
min-width: 300px;
}
.calendar-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 20px;
padding: 0 10px;
}
.calendar-header h4 {
margin: 0;
font-size: 18px;
font-weight: 700;
color: #1a1a2e;
}
.calendar-nav-btn {
background: #f0f0f0;
border: none;
width: 36px;
height: 36px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
color: #667eea;
font-size: 16px;
transition: all 0.3s ease;
}
.calendar-nav-btn:hover {
background: #667eea;
color: white;
transform: scale(1.1);
}
.calendar-weekdays {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 8px;
margin-bottom: 10px;
}
.calendar-weekdays div {
text-align: center;
font-size: 13px;
font-weight: 600;
color: #666;
padding: 8px 0;
}
.calendar-days {
display: grid;
grid-template-columns: repeat(7, 1fr);
gap: 8px;
}
.calendar-day {
aspect-ratio: 1;
display: flex;
align-items: center;
justify-content: center;
border-radius: 8px;
font-size: 15px;
font-weight: 500;
color: #333;
cursor: pointer;
transition: all 0.2s ease;
position: relative;
background: #f8f9fa;
}
.calendar-day:not(.disabled):not(.empty):hover {
background: #e0e0e0;
transform: scale(1.1);
}
.calendar-day.empty {
background: transparent;
cursor: default;
}
.calendar-day.disabled {
color: #ccc;
cursor: not-allowed;
background: #f5f5f5;
}
.calendar-day.selected {
background: #ff6b35;
color: white;
font-weight: 700;
box-shadow: 0 2px 8px rgba(255, 107, 53, 0.3);
z-index: 2;
}
.calendar-day.start {
background: #ff6b35;
border-radius: 8px 0 0 8px;
}
.calendar-day.end {
background: #ff6b35;
border-radius: 0 8px 8px 0;
}
.calendar-day.in-range {
background: rgba(255, 107, 53, 0.15);
color: #333;
border-radius: 0;
position: relative;
}
.calendar-day.in-range::before {
content: '';
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
background: rgba(255, 107, 53, 0.1);
z-index: 1;
}
.calendar-day.in-range:hover {
background: rgba(255, 107, 53, 0.3);
}
.date-modal-footer {
padding: 20px 28px;
border-top: 1px solid #f0f0f0;
display: flex;
gap: 12px;
justify-content: flex-end;
}
.date-btn-clear {
padding: 12px 24px;
background: #f0f0f0;
color: #666;
border: none;
border-radius: 10px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
font-family: 'Poppins', sans-serif;
}
.date-btn-clear:hover {
background: #e0e0e0;
transform: translateY(-1px);
}
.date-btn-apply {
padding: 12px 24px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
border-radius: 10px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
font-family: 'Poppins', sans-serif;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}
.date-btn-apply:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}
@media (max-width: 768px) {
.calendar-container {
flex-direction: column;
gap: 20px;
}
.calendar-month {
min-width: 100%;
}
.date-modal-content {
max-width: 95%;
}
}
.hero-search-form-netzerd-compact .guests-field {
min-width: 140px;
}
.hero-search-form-netzerd-compact .search-submit-btn {
background: #1e40af;
color: white;
border: none;
border-radius: 12px;
padding: 14px 28px;
font-size: 16px;
font-weight: 700;
cursor: pointer;
display: flex;
align-items: center;
gap: 10px;
transition: all 0.3s ease;
font-family: 'Poppins', sans-serif;
white-space: nowrap;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}
.hero-search-form-netzerd-compact .search-submit-btn:hover {
background: #1e3a8a;
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(30, 64, 175, 0.5);
}
.hero-search-form-netzerd-compact .search-submit-btn i {
font-size: 16px;
}
.hero-search-form-netzerd-compact .search-features {
display: flex;
justify-content: center;
gap: 30px;
margin-top: 12px;
padding: 0 12px 8px;
flex-wrap: wrap;
}
.hero-search-form-netzerd-compact .feature-item {
display: flex;
align-items: center;
gap: 8px;
color: #666;
font-size: 13px;
font-weight: 500;
}
.hero-search-form-netzerd-compact .feature-item i {
color: #28a745;
font-size: 14px;
}
/* Responsive para alojamientos */
@media (max-width: 968px) {
.hero-search-form-netzerd-compact .search-input-group {
flex-wrap: wrap;
}
.hero-search-form-netzerd-compact .search-field {
flex: 1 1 calc(50% - 4px);
min-width: 150px;
}
.hero-search-form-netzerd-compact .search-submit-btn {
flex: 1 1 100%;
justify-content: center;
margin-top: 8px;
}
}
@media (max-width: 640px) {
.hero-search-form-netzerd-compact .search-input-group {
flex-direction: column;
}
.hero-search-form-netzerd-compact .search-field {
flex: 1;
width: 100%;
}
.hero-search-form-netzerd-compact .search-submit-btn {
width: 100%;
}
.hero-search-form-netzerd-compact .search-features {
flex-direction: column;
gap: 12px;
align-items: center;
}
}
/* ================================================
MODAL DE HUÉSPEDES PERSONALIZADO
================================================ */
.guests-modal {
display: none;
position: fixed;
z-index: 10000;
left: 0;
top: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.6);
backdrop-filter: blur(5px);
align-items: center;
justify-content: center;
animation: fadeIn 0.3s ease-out;
}
.guests-modal-content {
background: white;
border-radius: 20px;
width: 90%;
max-width: 450px;
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
animation: slideUp 0.4s ease-out;
overflow: hidden;
}
.guests-modal-header {
padding: 24px 28px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
display: flex;
justify-content: space-between;
align-items: center;
position: relative;
}
.guests-modal-header h3 {
margin: 0;
font-size: 22px;
font-weight: 700;
display: flex;
align-items: center;
gap: 12px;
}
.guests-modal-header h3 i {
font-size: 24px;
}
.guests-modal-close {
background: rgba(255, 255, 255, 0.2);
border: none;
color: white;
font-size: 24px;
width: 36px;
height: 36px;
border-radius: 50%;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
padding: 0;
}
.guests-modal-close:hover {
background: rgba(255, 255, 255, 0.3);
transform: rotate(90deg);
}
.guests-modal-body {
padding: 40px 28px;
text-align: center;
}
.guests-selector {
display: flex;
align-items: center;
justify-content: center;
gap: 20px;
margin-bottom: 20px;
}
.guests-btn {
width: 50px;
height: 50px;
border-radius: 50%;
border: 2px solid #667eea;
background: white;
color: #667eea;
font-size: 20px;
cursor: pointer;
display: flex;
align-items: center;
justify-content: center;
transition: all 0.3s ease;
padding: 0;
}
.guests-btn:hover {
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
transform: scale(1.1);
}
.guests-btn:disabled {
opacity: 0.5;
cursor: not-allowed;
transform: none;
}
.guests-input {
width: 100px;
height: 60px;
border: 3px solid #667eea;
border-radius: 12px;
font-size: 32px;
font-weight: 700;
text-align: center;
color: #1a1a2e;
font-family: 'Poppins', sans-serif;
outline: none;
transition: all 0.3s ease;
}
.guests-input:focus {
border-color: #764ba2;
box-shadow: 0 0 0 4px rgba(102, 126, 234, 0.1);
}
.guests-hint {
color: #666;
font-size: 14px;
margin: 0;
font-weight: 500;
}
.guests-modal-footer {
padding: 20px 28px;
border-top: 1px solid #f0f0f0;
display: flex;
gap: 12px;
justify-content: flex-end;
}
.guests-btn-cancel {
padding: 12px 24px;
background: #f0f0f0;
color: #666;
border: none;
border-radius: 10px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
font-family: 'Poppins', sans-serif;
}
.guests-btn-cancel:hover {
background: #e0e0e0;
transform: translateY(-1px);
}
.guests-btn-apply {
padding: 12px 24px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
color: white;
border: none;
border-radius: 10px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: all 0.3s ease;
font-family: 'Poppins', sans-serif;
box-shadow: 0 4px 15px rgba(102, 126, 234, 0.3);
}
.guests-btn-apply:hover {
transform: translateY(-2px);
box-shadow: 0 6px 20px rgba(102, 126, 234, 0.4);
}
@keyframes slideUp {
from {
opacity: 0;
transform: translateY(30px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ================================================
SECCIÓN DE SPONSORS
================================================ */
.sponsors-bar {
background: #e8e8e8;
padding: 20px 0;
margin-top: 0;
border-top: 1px solid #d0d0d0;
border-bottom: 1px solid #d0d0d0;
position: relative;
z-index: 2;
}
.sponsors-content {
max-width: 1200px;
margin: 0 auto;
padding: 0 20px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 30px;
}
.sponsor-left,
.sponsor-right {
flex: 0 0 auto;
display: flex;
align-items: center;
}
.sponsor-center {
flex: 1 1 auto;
text-align: center;
}
.sponsor-logo {
max-height: 40px;
width: auto;
object-fit: contain;
}
.mercado-pago-logo {
max-height: 65px;
transition: opacity 0.3s ease;
cursor: pointer;
}
.colasistencia-logo {
max-height: 65px;
transition: opacity 0.3s ease;
cursor: pointer;
}
.sponsor-text {
font-size: 16px;
color: #1a1a2e;
font-weight: 500;
margin: 0;
line-height: 1.5;
}
@media (max-width: 768px) {
.sponsors-content {
flex-direction: column;
gap: 20px;
text-align: center;
}
.sponsor-center {
order: -1;
}
.sponsor-text {
font-size: 12px;
}
}
/* ================================================
SECCIÓN DE OFERTAS - CARRUSEL HORIZONTAL
================================================ */
.ofertas-section {
padding: 60px 20px;
background: #fafafa;
margin-top: 40px;
}
.ofertas-header {
max-width: 1200px;
margin: 0 auto 30px;
text-align: left;
padding: 0 20px;
}
.ofertas-header h2 {
font-size: 28px;
font-weight: 600;
color: #1a1a2e;
margin: 0;
position: relative;
display: inline-block;
text-align: left;
max-width: 1200px;
width: 100%;
}
.ofertas-header h2::after {
content: '';
position: absolute;
bottom: -10px;
left: 50%;
transform: translateX(-50%);
width: 60px;
height: 4px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 2px;
}
.ofertas-carousel-wrapper {
max-width: 1200px;
margin: 0 auto;
position: relative;
}
.ofertas-carousel {
display: flex;
gap: 20px;
overflow-x: auto;
overflow-y: hidden;
scroll-behavior: smooth;
padding: 20px 0;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE and Edge */
scroll-snap-type: x mandatory;
}
.ofertas-carousel::-webkit-scrollbar {
display: none; /* Chrome, Safari, Opera */
}
.ofertas-carousel {
-webkit-overflow-scrolling: touch;
}
.oferta-card {
flex: 0 0 320px;
background: white;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
cursor: pointer;
}
.oferta-card:hover {
transform: translateY(-8px);
box-shadow: 0 8px 30px rgba(102, 126, 234, 0.3);
}
.ver-mas-card {
display: flex;
align-items: center;
justify-content: center;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border: 2px dashed rgba(255, 255, 255, 0.5);
cursor: pointer;
}
.ver-mas-card:hover {
transform: translateY(-8px);
box-shadow: 0 8px 30px rgba(102, 126, 234, 0.5);
border-color: rgba(255, 255, 255, 0.8);
}
.ver-mas-content {
text-align: center;
padding: 20px;
color: white;
}
.ver-mas-icon {
font-size: 48px;
margin-bottom: 15px;
opacity: 0.9;
}
.ver-mas-title {
font-size: 22px;
font-weight: 700;
margin: 0 0 10px 0;
color: white;
}
.ver-mas-text {
font-size: 14px;
margin: 0 0 20px 0;
opacity: 0.9;
color: white;
}
.ver-mas-btn {
display: inline-block;
background: white;
color: #667eea;
padding: 12px 24px;
border-radius: 8px;
text-decoration: none;
font-weight: 600;
font-size: 14px;
transition: all 0.3s ease;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2);
}
.ver-mas-btn:hover {
background: #f0f0f0;
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}
.oferta-link {
text-decoration: none;
color: inherit;
display: block;
}
.oferta-image {
position: relative;
width: 100%;
height: 220px;
overflow: hidden;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.oferta-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.oferta-card:hover .oferta-image img {
transform: scale(1.1);
}
/* Badge Petfriendly (arriba izquierda) */
.oferta-badge-petfriendly {
position: absolute;
top: 12px;
left: 12px;
background: #2196F3;
color: white;
padding: 6px 12px;
border-radius: 20px;
font-weight: 600;
font-size: 12px;
z-index: 3;
display: flex;
align-items: center;
gap: 6px;
box-shadow: 0 2px 8px rgba(33, 150, 243, 0.4);
}
.oferta-badge-petfriendly .pet-icon {
width: 14px;
height: 14px;
object-fit: contain;
}
/* Badge de descuento (arriba derecha) */
.oferta-badge-descuento {
position: absolute;
top: 12px;
right: 12px;
background: #FF9800;
color: white;
padding: 6px 10px;
border-radius: 20px;
font-weight: 700;
font-size: 13px;
z-index: 3;
display: flex;
align-items: center;
gap: 4px;
box-shadow: 0 2px 8px rgba(255, 152, 0, 0.4);
}
.oferta-badge-descuento .coin-icon-small {
width: 16px;
height: 16px;
object-fit: contain;
}
.descuento-porcentaje {
font-weight: 700;
}
@keyframes pulse-badge {
0%, 100% {
transform: scale(1);
box-shadow: 0 4px 20px rgba(239, 83, 80, 0.5);
}
50% {
transform: scale(1.05);
box-shadow: 0 6px 25px rgba(239, 83, 80, 0.7);
}
}
.oferta-content {
padding: 16px;
}
.oferta-nombre {
font-size: 18px;
font-weight: 600;
color: #1a1a2e;
margin: 0 0 6px 0;
line-height: 1.3;
}
.oferta-ubicacion {
font-size: 14px;
color: #666;
margin: 0 0 10px 0;
line-height: 1.4;
}
.oferta-rating {
display: flex;
align-items: center;
gap: 4px;
margin-bottom: 12px;
}
.oferta-rating {
display: flex;
align-items: center;
gap: 3px;
margin-bottom: 12px;
flex-wrap: wrap;
}
.oferta-rating .fa-star,
.oferta-rating .fa-star-half-alt {
color: #ffa726;
font-size: 16px;
line-height: 1;
}
.oferta-rating .far.fa-star {
color: #ddd;
font-size: 16px;
line-height: 1;
}
.rating-text {
font-size: 13px;
color: #666;
margin-left: 4px;
}
.oferta-precios {
display: flex;
flex-direction: column;
gap: 6px;
margin-top: 12px;
}
.precio-standard {
font-size: 13px;
color: #666;
margin: 0;
line-height: 1.4;
}
.precio-coins {
font-size: 14px;
font-weight: 600;
color: #1a1a2e;
margin: 0;
display: flex;
align-items: center;
gap: 4px;
line-height: 1.4;
}
.coin-icon {
width: 18px;
height: 18px;
object-fit: contain;
}
.ofertas-empty {
text-align: center;
padding: 60px 20px;
color: #999;
font-size: 18px;
}
.carousel-btn {
position: absolute;
top: 50%;
transform: translateY(-50%);
background: transparent;
border: none;
width: auto;
height: auto;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
z-index: 10;
transition: all 0.3s ease;
padding: 0;
box-shadow: none;
}
.carousel-arrow-icon {
width: 60px;
height: 60px;
object-fit: contain;
transition: all 0.3s ease;
}
.carousel-btn:hover .carousel-arrow-icon {
transform: scale(1.15);
filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}
.carousel-prev {
left: -25px;
}
.carousel-next {
right: -25px;
}
/* Responsive para ofertas */
@media (max-width: 768px) {
.ofertas-section {
padding: 40px 10px;
}
.ofertas-header h2 {
font-size: 28px;
}
.oferta-card {
flex: 0 0 280px;
}
.carousel-arrow-icon {
width: 50px;
height: 50px;
}
.carousel-prev {
left: -15px;
}
.carousel-next {
right: -15px;
}
}
/* ================================================
SECCIÓN DE NOTICIAS (Preparada para futuro)
================================================ */
.noticias-section {
padding: 60px 20px;
background: white;
margin-top: 40px;
}
.noticias-header {
max-width: 1200px;
margin: 0 auto 40px;
text-align: center;
}
.noticias-header h2 {
font-size: 36px;
font-weight: 700;
color: #1a1a2e;
margin: 0;
position: relative;
display: inline-block;
}
.noticias-header h2::after {
content: '';
position: absolute;
bottom: -10px;
left: 0;
width: 60px;
height: 4px;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
border-radius: 2px;
}
.noticias-grid {
max-width: 1200px;
margin: 0 auto;
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 30px;
padding: 0 20px;
}
.noticia-card {
background: white;
border-radius: 16px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
transition: all 0.3s ease;
cursor: pointer;
}
.noticia-card:hover {
transform: translateY(-8px);
box-shadow: 0 8px 30px rgba(102, 126, 234, 0.3);
}
.noticia-card.noticia-destacada {
border: 2px solid #ffc107;
box-shadow: 0 4px 20px rgba(255, 193, 7, 0.3);
}
.noticia-link {
text-decoration: none;
color: inherit;
display: block;
}
.noticia-image {
position: relative;
width: 100%;
height: 200px;
overflow: hidden;
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
}
.noticia-image img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.noticia-card:hover .noticia-image img {
transform: scale(1.1);
}
.noticia-badge-destacada {
position: absolute;
top: 15px;
left: 15px;
background: linear-gradient(135deg, #ffc107 0%, #ff9800 100%);
color: #1a1a2e;
padding: 8px 16px;
border-radius: 20px;
font-weight: 700;
font-size: 12px;
box-shadow: 0 4px 15px rgba(255, 193, 7, 0.4);
z-index: 2;
display: flex;
align-items: center;
gap: 6px;
}
.noticia-categoria {
position: absolute;
bottom: 15px;
left: 15px;
background: rgba(0, 0, 0, 0.7);
color: white;
padding: 6px 12px;
border-radius: 15px;
font-size: 11px;
font-weight: 600;
text-transform: uppercase;
letter-spacing: 0.5px;
backdrop-filter: blur(5px);
z-index: 2;
}
.noticia-content {
padding: 20px;
}
.noticia-content h3 {
font-size: 20px;
font-weight: 600;
color: #1a1a2e;
margin: 0 0 10px 0;
line-height: 1.3;
}
.noticia-subtitulo {
font-size: 14px;
color: #666;
margin: 0 0 15px 0;
line-height: 1.5;
}
.noticia-meta {
display: flex;
align-items: center;
gap: 15px;
font-size: 12px;
color: #999;
flex-wrap: wrap;
}
.noticia-meta i {
margin-right: 5px;
font-size: 11px;
}
.noticia-fecha,
.noticia-autor {
display: flex;
align-items: center;
}
.noticias-empty {
grid-column: 1 / -1;
text-align: center;
padding: 60px 20px;
color: #999;
font-size: 18px;
}
/* Nuevo diseño de noticias */
.noticia-card-new {
background: white;
border-radius: 12px;
overflow: hidden;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
transition: all 0.3s ease;
cursor: pointer;
display: flex;
flex-direction: column;
}
.noticia-card-new:hover {
transform: translateY(-4px);
box-shadow: 0 8px 30px rgba(0, 0, 0, 0.2);
}
.noticia-link-new {
text-decoration: none;
color: inherit;
display: flex;
flex-direction: column;
height: 100%;
}
.noticia-header-new {
display: flex;
justify-content: space-between;
align-items: center;
padding: 16px 20px;
border-bottom: 1px solid #f0f0f0;
}
.noticia-header-left {
display: flex;
align-items: center;
gap: 12px;
flex: 1;
}
.noticia-logo-netzerd {
width: 32px;
height: 32px;
object-fit: contain;
}
.noticia-autor-fecha-wrapper {
display: flex;
flex-direction: column;
gap: 2px;
}
.noticia-autor-new {
font-size: 13px;
font-weight: 600;
color: #1a1a2e;
line-height: 1.2;
}
.noticia-fecha-new {
font-size: 11px;
color: #999;
line-height: 1.2;
}
.noticia-badge-new {
padding: 6px 12px;
border-radius: 20px;
font-size: 11px;
font-weight: 700;
text-transform: uppercase;
letter-spacing: 0.5px;
white-space: nowrap;
}
.noticia-badge-blue {
background: #1e40af;
color: white;
}
.noticia-badge-red {
background: #dc2626;
color: white;
}
.noticia-image-new {
width: 100%;
height: 240px;
overflow: hidden;
background: #f5f5f5;
position: relative;
}
.noticia-image-new img {
width: 100%;
height: 100%;
object-fit: cover;
transition: transform 0.3s ease;
}
.noticia-card-new:hover .noticia-image-new img {
transform: scale(1.05);
}
.noticia-content-new {
padding: 20px;
flex: 1;
display: flex;
flex-direction: column;
}
.noticia-titulo-new {
font-size: 14px;
font-weight: 700;
color: #1a1a2e;
margin: 0 0 10px 0;
line-height: 1.3;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.noticia-descripcion-new {
font-size: 12px;
color: #666;
line-height: 1.5;
margin: 0;
flex: 1;
}
/* Responsive para noticias */
@media (max-width: 1024px) {
.noticias-grid {
grid-template-columns: repeat(2, 1fr);
gap: 24px;
}
}
@media (max-width: 768px) {
.noticias-section {
padding: 40px 10px;
}
.noticias-header {
padding: 0 10px;
}
.noticias-header h2 {
font-size: 28px;
}
.noticias-grid {
grid-template-columns: 1fr;
gap: 20px;
padding: 0 10px;
}
.noticia-header-new {
padding: 12px 16px;
flex-wrap: wrap;
}
.noticia-header-left {
flex-wrap: wrap;
gap: 8px;
}
.noticia-image-new {
height: 200px;
}
.noticia-content-new {
padding: 16px;
}
.noticia-titulo-new {
font-size: 18px;
}
}
/* Sección de Netzerd Community */
.netzerd-community-section {
padding: 80px 20px;
background: white;
margin-top: 40px;
}
.community-content {
max-width: 1200px;
margin: 0 auto;
display: flex;
align-items: center;
gap: 60px;
flex-wrap: wrap;
}
.community-text {
flex: 1;
min-width: 300px;
}
.community-title {
font-size: 24px;
font-weight: 700;
color: #1e40af;
line-height: 1.2;
margin-bottom: 20px;
font-family: 'Poppins', sans-serif;
}
.community-subtitle {
color: #000000;
font-weight: 600;
}
.community-description {
font-size: 16px;
color: #000000;
font-weight: 600;
line-height: 1.6;
margin-bottom: 30px;
max-width: 500px;
}
.community-btn {
display: inline-block;
padding: 14px 28px;
background: #2563eb;
color: white;
text-decoration: none;
border-radius: 12px;
font-size: 15px;
font-weight: 600;
font-family: 'Inter', system-ui, sans-serif;
transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
box-shadow: 0 4px 14px rgba(37, 99, 235, 0.35);
}
.community-btn:hover {
background: #1d4ed8;
transform: translateY(-1px);
box-shadow: 0 8px 20px rgba(37, 99, 235, 0.38);
}
.community-collage {
flex: 1;
min-width: 300px;
display: flex;
justify-content: center;
align-items: center;
}
.collage-image {
max-width: 120%;
width: 120%;
height: auto;
border-radius: 0;
box-shadow: none;
}
/* Responsive para Netzerd Community */
@media (max-width: 768px) {
.netzerd-community-section {
padding: 50px 15px;
}
.community-content {
flex-direction: column;
gap: 40px;
}
.community-text {
text-align: center;
}
.community-title {
font-size: 32px;
}
.community-description {
font-size: 16px;
max-width: 100%;
}
.community-btn {
width: 100%;
text-align: center;
}
}
/* Sistema de Notificaciones */
.notification-container {
position: fixed;
top: 100px;
right: 20px;
z-index: 10000;
display: flex;
flex-direction: column;
gap: 12px;
pointer-events: none;
}
.notification {
background: white;
border-left: 4px solid #ef4444;
border-radius: 8px;
padding: 16px 20px;
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
min-width: 320px;
max-width: 400px;
display: flex;
align-items: center;
gap: 12px;
pointer-events: auto;
animation: slideInRight 0.3s ease-out;
font-family: 'Poppins', sans-serif;
}
.notification.success {
border-left-color: #10b981;
}
.notification.warning {
border-left-color: #f59e0b;
}
.notification.info {
border-left-color: #1e40af;
}
@keyframes slideInRight {
from {
transform: translateX(100%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
.notification-icon {
font-size: 20px;
flex-shrink: 0;
}
.notification.error .notification-icon {
color: #ef4444;
}
.notification.success .notification-icon {
color: #10b981;
}
.notification.warning .notification-icon {
color: #f59e0b;
}
.notification.info .notification-icon {
color: #1e40af;
}
.notification-content {
flex: 1;
}
.notification-title {
font-weight: 600;
font-size: 14px;
color: #1a1a1a;
margin-bottom: 4px;
}
.notification-message {
font-size: 13px;
color: #666;
line-height: 1.4;
}
.notification-close {
background: none;
border: none;
font-size: 18px;
color: #999;
cursor: pointer;
padding: 0;
width: 20px;
height: 20px;
display: flex;
align-items: center;
justify-content: center;
flex-shrink: 0;
transition: color 0.2s;
}
.notification-close:hover {
color: #333;
}
/* Modales de Selección - Ventana flotante */
.modal-overlay {
display: none !important;
visibility: hidden !important;
}
/* Tarjeta superior - Resumen */
.selection-summary-card {
background: white;
border-radius: 16px;
padding: 20px 24px;
max-width: 400px;
width: 90%;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
animation: cardSlideIn 0.3s ease-out;
font-family: 'Poppins', sans-serif;
z-index: 10001;
pointer-events: auto;
}
/* Tarjeta inferior - Controles */
.selection-control-card {
background: white;
border-radius: 16px;
padding: 24px;
max-width: 400px;
width: 90%;
box-shadow: 0 4px 20px rgba(0, 0, 0, 0.15);
animation: cardSlideIn 0.4s ease-out;
font-family: 'Poppins', sans-serif;
z-index: 10001;
pointer-events: auto;
}
@keyframes cardSlideIn {
from {
transform: translateY(-10px);
opacity: 0;
}
to {
transform: translateY(0);
opacity: 1;
}
}
@keyframes modalSlideIn {
from {
transform: translate(-50%, -50%) translateY(-20px) scale(0.95);
opacity: 0;
}
to {
transform: translate(-50%, -50%) translateY(0) scale(1);
opacity: 1;
}
}
/* Contenido de la tarjeta superior */
.summary-content {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
}
.summary-left {
display: flex;
align-items: center;
gap: 12px;
}
.summary-icon {
width: 24px;
height: 24px;
object-fit: contain;
}
.summary-text {
display: flex;
flex-direction: column;
gap: 4px;
}
.summary-label {
font-size: 14px;
color: #999;
font-weight: 400;
}
.summary-value {
font-size: 24px;
color: #1a1a1a;
font-weight: 700;
}
.counter-control {
display: flex;
align-items: center;
justify-content: space-between;
padding: 20px 0;
border-bottom: 1px solid #f3f4f6;
}
.counter-control:last-child {
border-bottom: none;
}
.counter-label {
display: flex;
align-items: center;
gap: 12px;
}
.control-icon {
width: 20px;
height: 20px;
object-fit: contain;
}
.counter-label-text {
display: flex;
flex-direction: column;
gap: 2px;
}
.counter-label-title {
font-weight: 600;
font-size: 16px;
color: #1a1a1a;
}
.counter-label-subtitle {
font-size: 12px;
color: #666;
}
.counter-buttons {
display: flex;
align-items: center;
gap: 16px;
}
.counter-btn {
width: 40px;
height: 40px;
border: 2px solid #1a1a1a;
background: white;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
font-size: 20px;
color: #1a1a1a;
transition: all 0.2s;
font-weight: 600;
padding: 0;
}
.counter-btn:hover:not(:disabled) {
background: #1a1a1a;
color: white;
}
.counter-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.counter-value {
font-size: 18px;
font-weight: 600;
color: #1a1a1a;
min-width: 40px;
text-align: center;
}
.modal-date-input {
padding: 10px 12px;
border: 1px solid #e5e7eb;
border-radius: 8px;
font-size: 14px;
font-family: 'Poppins', sans-serif;
color: #1a1a1a;
width: 100%;
max-width: 200px;
transition: border-color 0.2s;
}
.modal-date-input:focus {
outline: none;
border-color: #1e40af;
box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
}
.modal-footer {
padding: 16px 20px;
border-top: 1px solid #e5e7eb;
display: flex;
gap: 10px;
justify-content: flex-end;
background: #f8f9fa;
}
.modal-btn {
padding: 12px 24px;
border: none;
border-radius: 10px;
font-size: 15px;
font-weight: 600;
cursor: pointer;
transition: all 0.2s;
font-family: 'Poppins', sans-serif;
}
.modal-btn-primary {
background: #1e40af;
color: white;
}
.modal-btn-primary:hover {
background: #1e3a8a;
}
.modal-btn-secondary {
background: #f0f0f0;
color: #666;
}
.modal-btn-secondary:hover {
background: #e5e7eb;
}
/* Mejoras al selector de fechas */
.date-field {
cursor: pointer;
transition: all 0.2s;
}
.date-field:hover {
background: rgba(30, 64, 175, 0.05);
}
.date-input-wrapper {
display: none;
}
.date-display {
cursor: pointer;
user-select: none;
}
.modal-date-input {
padding: 10px 12px;
border: 1px solid #e5e7eb;
border-radius: 8px;
font-size: 14px;
font-family: 'Poppins', sans-serif;
color: #1a1a1a;
width: 100%;
max-width: 200px;
transition: border-color 0.2s;
background: white;
cursor: pointer;
}
.modal-date-input:focus {
outline: none;
border-color: #1e40af;
box-shadow: 0 0 0 3px rgba(30, 64, 175, 0.1);
}
/* Ocultar completamente el calendario nativo */
input[type="date"]::-webkit-calendar-picker-indicator {
display: none !important;
opacity: 0 !important;
position: absolute !important;
width: 0 !important;
height: 0 !important;
pointer-events: none !important;
visibility: hidden !important;
z-index: -1 !important;
}
input[type="date"] {
color: transparent !important;
background: transparent !important;
pointer-events: none !important;
opacity: 0 !important;
position: absolute !important;
width: 0 !important;
height: 0 !important;
visibility: hidden !important;
display: none !important;
z-index: -1 !important;
}
input[type="date"]::-webkit-datetime-edit,
input[type="date"]::-webkit-datetime-edit-fields-wrapper,
input[type="date"]::-webkit-datetime-edit-text,
input[type="date"]::-webkit-datetime-edit-month-field,
input[type="date"]::-webkit-datetime-edit-day-field,
input[type="date"]::-webkit-datetime-edit-year-field {
display: none !important;
visibility: hidden !important;
opacity: 0 !important;
pointer-events: none !important;
}
/* Fix: eliminar borde/espacio superior en home y cubrir desde top */
html,
body {
margin: 0 !important;
padding: 0 !important;
}
body:has(.hero-search-wrapper) {
background: transparent !important;
}
body:has(.hero-search-wrapper) > header:first-child,
body:has(.hero-search-wrapper) > .hero-search-wrapper:first-of-type {
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
}
body:has(.hero-search-wrapper) > .hero-search-wrapper:first-of-type {
min-height: 100dvh !important;
background-position: center top !important;
background-size: cover !important;
}
/* Ajuste final anti-separacion superior en index */
body:has(.hero-search-wrapper) .site-header-overlay {
position: absolute !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
margin: 0 !important;
padding: 0 !important;
line-height: 0 !important;
font-size: 0 !important;
border: 0 !important;
}
body:has(.hero-search-wrapper) .header-top-dark-bar {
top: 0 !important;
margin: 0 !important;
border-top: 0 !important;
box-shadow: none !important;
backdrop-filter: none !important;
-webkit-backdrop-filter: none !important;
outline: 0 !important;
}
body:has(.hero-search-wrapper) > .hero-search-wrapper:first-of-type {
position: relative !important;
top: -8px !important;
min-height: calc(100svh + 8px) !important;
}
body:has(.hero-search-wrapper) .nav-container-white-bar {
border-top: 0 !important;
outline: 0 !important;
}
/* Fallback robusto para index (sin depender de :has) */
body.page-index {
margin: 0 !important;
padding: 0 !important;
background: transparent !important;
}
body.page-index > header.site-header-overlay {
position: fixed !important;
top: 0 !important;
left: 0 !important;
right: 0 !important;
height: 0 !important;
margin: 0 !important;
padding: 0 !important;
border: 0 !important;
z-index: 1005 !important;
}
body.page-index .header-top-dark-bar {
top: 0 !important;
transform: none !important;
box-shadow: none !important;
margin: 0 !important;
}
body.page-index .nav-container-white-bar {
top: 50px !important;
transform: translateX(-50%) !important;
}
body.page-index > .hero-search-wrapper {
margin: 0 !important;
padding: 0 !important;
position: relative !important;
top: 0 !important;
min-height: 100svh !important;
background-position: center top !important;
background-size: cover !important;
}
/* ================================================
TARJETAS HOTEL — DISEÑOS APROBADOS (PMS Personalización)
================================================ */
.hotel-card.hotel-card--theme-pet_friendly {
border-color: rgba(124, 58, 237, 0.2);
box-shadow: 0 6px 24px rgba(124, 58, 237, 0.1);
background: #fff;
}
.hotel-card.hotel-card--theme-pet_friendly .card-image {
position: relative;
}
.hotel-card.hotel-card--theme-pet_friendly .card-image img {
position: relative;
z-index: 0;
display: block;
}
.hotel-card.hotel-card--theme-pet_friendly .card-image::before {
content: '';
position: absolute;
inset: 0;
z-index: 1;
pointer-events: none;
background: linear-gradient(180deg, rgba(56, 189, 248, 0.4) 0%, transparent 52%);
}
.hotel-card.hotel-card--theme-pet_friendly .card-image::after {
content: 'Pet-Friendly';
position: absolute;
top: 8px;
left: 8px;
z-index: 2;
background: #14b8a8;
color: #fff;
font-size: 9px;
font-weight: 800;
padding: 4px 8px;
border-radius: 6px;
text-transform: uppercase;
letter-spacing: 0.04em;
font-family: 'Poppins', sans-serif;
pointer-events: none;
}
.hotel-card.hotel-card--theme-pet_friendly .hotel-type {
background: linear-gradient(135deg, #7c3aed 0%, #a78bfa 100%);
box-shadow: 0 2px 10px rgba(124, 58, 237, 0.35);
}
.hotel-card.hotel-card--theme-pet_friendly .hotel-name {
font-family: "Playfair Display", Georgia, serif;
color: #1e1b4b;
}
.hotel-card.hotel-card--theme-pet_friendly .hotel-details .stars {
color: #16a34a !important;
}
.hotels-grid .hotel-card.hotel-card--theme-pet_friendly .features-icons-mini {
color: #15803d;
}
.hotel-card.hotel-card--theme-pet_friendly .price-total {
background: #7c3aed;
color: #fff;
border-radius: 12px;
padding: 10px 12px;
margin-top: 8px;
border: none;
}
.hotel-card.hotel-card--theme-pet_friendly .price-label,
.hotel-card.hotel-card--theme-pet_friendly .price-amount {
color: #fff;
}
.hotels-grid .hotel-card.hotel-card--theme-pet_friendly .view-details-btn,
.hotel-card.hotel-card--theme-pet_friendly .view-details-btn {
background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important;
color: #fff !important;
border-radius: 10px;
box-shadow: 0 4px 14px rgba(234, 88, 12, 0.35) !important;
}
.hotel-card.hotel-card--theme-pet_friendly .view-details-btn:hover {
filter: brightness(1.05);
}
.hotels-grid .hotel-card.hotel-card--theme-pet_friendly .btn-reservar,
.hotel-card.hotel-card--theme-pet_friendly .btn-reservar {
background: linear-gradient(135deg, #f97316 0%, #ea580c 100%) !important;
color: #fff !important;
}
.hotel-card.hotel-card--theme-minimal {
border: 1px solid rgba(13, 148, 136, 0.18);
box-shadow: 0 4px 20px rgba(13, 148, 136, 0.06);
background: #fff;
}
.hotel-card.hotel-card--theme-minimal .card-image {
position: relative;
}
.hotel-card.hotel-card--theme-minimal .card-image img {
position: relative;
z-index: 0;
display: block;
}
.hotel-card.hotel-card--theme-minimal .hotel-type {
background: linear-gradient(135deg, #0d9488 0%, #14b8a6 100%);
box-shadow: none;
}
.hotel-card.hotel-card--theme-minimal .hotel-name {
font-family: "Playfair Display", Georgia, serif;
color: #0f172a;
}
.hotel-card.hotel-card--theme-minimal .hotel-details .stars {
color: #0f172a;
}
.hotel-card.hotel-card--theme-minimal .rating {
color: #0f172a;
}
.hotel-card.hotel-card--theme-minimal .features-icons-mini {
color: #94a3b8;
}
.hotels-grid .hotel-card.hotel-card--theme-minimal .view-details-btn,
.hotel-card.hotel-card--theme-minimal .view-details-btn {
background: #0d9488 !important;
color: #fff !important;
border-radius: 8px;
box-shadow: 0 4px 12px rgba(13, 148, 136, 0.3) !important;
}
.hotels-grid .hotel-card.hotel-card--theme-minimal .btn-reservar,
.hotel-card.hotel-card--theme-minimal .btn-reservar {
background: #0d9488 !important;
color: #fff !important;
}
.hotel-card.hotel-card--theme-dynamic {
background: linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
border-color: rgba(249, 115, 22, 0.35);
box-shadow: 0 12px 40px rgba(124, 58, 237, 0.25);
}
.hotel-card.hotel-card--theme-dynamic .card-image {
position: relative;
border-bottom: 2px solid rgba(249, 115, 22, 0.45);
}
.hotel-card.hotel-card--theme-dynamic .card-image img {
position: relative;
z-index: 0;
display: block;
}
.hotel-card.hotel-card--theme-dynamic .card-image::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(135deg, rgba(249, 115, 22, 0.5) 0%, rgba(124, 58, 237, 0.55) 100%);
z-index: 1;
pointer-events: none;
}
.hotel-card.hotel-card--theme-dynamic .card-image::after {
content: none !important;
display: none !important;
}
.hotel-card.hotel-card--theme-dynamic .hotel-type {
background: linear-gradient(90deg, #fbbf24 0%, #f97316 100%);
color: #1e1b4b;
}
.hotel-card.hotel-card--theme-dynamic .hotel-name,
.hotel-card.hotel-card--theme-dynamic .hotel-location,
.hotel-card.hotel-card--theme-dynamic .rating {
color: #f8fafc;
}
.hotel-card.hotel-card--theme-dynamic .hotel-location {
opacity: 0.9;
}
.hotel-card.hotel-card--theme-dynamic .hotel-details .stars {
color: #fbbf24;
}
.hotel-card.hotel-card--theme-dynamic .features-icons-mini {
color: #e2e8f0;
}
.hotels-grid .hotel-card.hotel-card--theme-dynamic .view-details-btn,
.hotel-card.hotel-card--theme-dynamic .view-details-btn {
background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
color: #fff !important;
box-shadow: 0 4px 14px rgba(185, 28, 28, 0.35) !important;
}
.hotels-grid .hotel-card.hotel-card--theme-dynamic .btn-reservar,
.hotel-card.hotel-card--theme-dynamic .btn-reservar {
background: linear-gradient(135deg, #dc2626 0%, #b91c1c 100%) !important;
color: #fff !important;
}
.hotel-card.hotel-card--theme-dynamic .price-total {
background: #334155;
border-radius: 12px;
padding: 10px 12px;
margin-top: 8px;
}
.hotel-card.hotel-card--theme-dynamic .price-total,
.hotel-card.hotel-card--theme-dynamic .price-label,
.hotel-card.hotel-card--theme-dynamic .price-amount {
color: #f8fafc;
}
.hotel-card.hotel-card--theme-dark {
background: #1a1a24;
border-color: rgba(139, 92, 246, 0.35);
box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
}
.hotel-card.hotel-card--theme-dark .card-image {
position: relative;
}
.hotel-card.hotel-card--theme-dark .card-image img {
position: relative;
z-index: 0;
display: block;
}
.hotel-card.hotel-card--theme-dark .card-image::before {
content: '';
position: absolute;
inset: 0;
background: linear-gradient(180deg, transparent 40%, rgba(37, 99, 235, 0.35) 100%);
z-index: 1;
pointer-events: none;
}
.hotel-card.hotel-card--theme-dark .card-image::after {
content: 'Eco-Friendly';
position: absolute;
top: 8px;
right: 8px;
z-index: 2;
background: #84cc16;
color: #14532d;
font-size: 8px;
font-weight: 800;
padding: 4px 8px;
border-radius: 6px;
text-transform: uppercase;
letter-spacing: 0.03em;
font-family: 'Poppins', sans-serif;
pointer-events: none;
}
.hotel-card.hotel-card--theme-dark .hotel-type {
background: linear-gradient(135deg, #6d28d9 0%, #8b5cf6 100%);
}
.hotel-card.hotel-card--theme-dark .hotel-name,
.hotel-card.hotel-card--theme-dark .hotel-location {
color: #f1f5f9;
}
.hotel-card.hotel-card--theme-dark .hotel-location {
opacity: 0.85;
}
.hotel-card.hotel-card--theme-dark .rating {
color: #93c5fd;
}
.hotel-card.hotel-card--theme-dark .hotel-details .stars {
color: #3b82f6;
}
.hotel-card.hotel-card--theme-dark .features-icons-mini {
color: #60a5fa;
}
.hotels-grid .hotel-card.hotel-card--theme-dark .view-details-btn,
.hotel-card.hotel-card--theme-dark .view-details-btn {
background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%) !important;
color: #fff !important;
box-shadow: 0 4px 14px rgba(153, 27, 27, 0.35) !important;
}
.hotels-grid .hotel-card.hotel-card--theme-dark .btn-reservar,
.hotel-card.hotel-card--theme-dark .btn-reservar {
background: linear-gradient(135deg, #dc2626 0%, #991b1b 100%) !important;
color: #fff !important;
}
.hotel-card.hotel-card--theme-dark .price-total {
background: #6d28d9;
border-radius: 12px;
padding: 10px 12px;
margin-top: 8px;
}
.hotel-card.hotel-card--theme-dark .price-total,
.hotel-card.hotel-card--theme-dark .price-label,
.hotel-card.hotel-card--theme-dark .price-amount {
color: #fff;
}
/* =============================================================================
Sitio público (usuario): sin pie global + layout usable en móvil
(2026-04 — pie eliminado desde layout/footer.php)
============================================================================= */
html {
overflow-x: hidden;
max-width: 100%;
}
body {
overflow-x: hidden;
max-width: 100%;
}
.main-content,
.contenedor,
.cotenido {
max-width: 100%;
box-sizing: border-box;
}
/* —— Cabecera oscura + barra blanca (móvil / tablet) —— */
@media (max-width: 900px) {
.header-top-dark-content {
flex-wrap: wrap;
justify-content: center;
gap: 8px 12px;
padding: 6px 10px;
}
.header-top-dark-right {
flex-wrap: wrap;
justify-content: center;
}
.netzerd-register-top {
font-size: 11px;
}
.btn-comprar-coins-top {
font-size: 11px;
padding: 6px 12px;
}
.nav-container-white-bar {
width: calc(100% - 16px);
border-radius: 18px;
top: 48px;
}
.header-content-white-bar {
padding: 0 10px;
}
/* Grid: fila 1 = logo + acciones; fila 2 = nav a ancho completo en horizontal */
.header-white-bar {
display: grid;
grid-template-columns: 1fr auto;
grid-template-rows: auto auto;
align-items: center;
gap: 10px 12px;
justify-content: stretch;
}
.header-logo-link {
grid-column: 1;
grid-row: 1;
justify-self: start;
}
.header-right-white {
grid-column: 2;
grid-row: 1;
justify-self: end;
margin-left: 0;
flex-shrink: 0;
}
.header-nav {
grid-column: 1 / -1;
grid-row: 2;
display: flex;
flex-direction: row;
flex-wrap: nowrap;
justify-content: space-between;
align-items: center;
width: 100%;
max-width: 100%;
margin: 0 !important;
padding: 4px 2px 2px;
gap: 2px;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
scrollbar-width: thin;
box-sizing: border-box;
}
.header-logo img {
max-height: 36px;
width: auto;
}
.header-nav-item-white {
flex: 1 1 0;
min-width: 0;
max-width: none;
padding: 8px 4px;
font-size: 11px;
flex-direction: column;
gap: 2px;
}
.header-nav-item-white span {
font-size: 10px;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
max-width: 76px;
}
.header-nav-icon {
width: 20px;
height: 20px;
margin-bottom: 0;
}
.header-auth-links {
flex-wrap: wrap;
justify-content: flex-end;
gap: 4px 8px;
font-size: 12px;
}
}
@media (max-width: 520px) {
.header-nav-item-white span {
display: none;
}
.header-nav-item-white {
flex: 1 1 0;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 10px 4px;
border-radius: 12px;
min-height: 48px;
}
.header-nav-icon {
width: 24px;
height: 24px;
}
.header-nav {
gap: 4px;
padding-top: 6px;
}
}
/* Dropdowns header en pantallas pequeñas */
@media (max-width: 480px) {
#notificationsDropdown {
width: min(calc(100vw - 20px), 380px) !important;
max-width: calc(100vw - 20px) !important;
right: 0 !important;
left: auto !important;
}
.user-menu-dropdown-content {
max-width: min(calc(100vw - 20px), 360px) !important;
min-width: 0 !important;
width: min(calc(100vw - 20px), 360px) !important;
}
.notification-toast {
left: 10px !important;
right: 10px !important;
min-width: 0 !important;
max-width: none !important;
width: auto !important;
}
}
/* —— Home: hero + buscador (corrige márgenes negativos en móvil) —— */
@media (max-width: 900px) {
body:has(.hero-search-wrapper) .hero-section-netzerd {
padding-top: 100px !important;
padding-left: 12px;
padding-right: 12px;
}
.hero-search-wrapper {
height: auto;
min-height: 100svh;
min-height: 100dvh;
align-items: flex-start;
padding-bottom: 28px;
}
.hero-content {
margin-top: 0 !important;
align-items: center;
text-align: center;
gap: 20px;
margin-bottom: 28px;
}
.hero-text {
margin-left: 0 !important;
margin-top: 0 !important;
max-width: 100%;
text-align: center;
}
.hero-text h1 {
text-align: center;
font-size: clamp(1.35rem, 5vw, 2.25rem);
line-height: 1.25;
}
.hero-search-form-netzerd {
max-width: 100%;
padding: 8px;
border-radius: 14px;
}
.hero-search-wrapper::after {
opacity: 0.45;
background-size: auto 55%;
}
}
@media (max-width: 640px) {
body:has(.hero-search-wrapper) .hero-section-netzerd {
padding-top: 88px !important;
padding-bottom: 32px;
}
.search-field.location-field {
flex: 1 1 100%;
width: 100%;
max-width: none;
}
.search-submit-btn {
width: 100%;
justify-content: center;
padding: 14px 20px;
font-size: 16px;
}
}
/* Ofertas: carrusel no corta en bordes del teléfono */
@media (max-width: 768px) {
.ofertas-carousel-wrapper {
padding: 0 8px;
}
.carousel-prev {
left: 4px;
}
.carousel-next {
right: 4px;
}
.ofertas-header h2 {
text-align: left;
font-size: 1.15rem;
line-height: 1.35;
}
.ofertas-header {
padding: 0 8px;
}
}
/* Community: imagen no desborda */
@media (max-width: 768px) {
.collage-image {
max-width: 100%;
width: 100%;
height: auto;
}
.community-title {
font-size: 1.25rem;
}
}
/* Notificaciones flotantes home */
@media (max-width: 480px) {
.notification-container {
right: 10px;
left: 10px;
top: 80px;
align-items: stretch;
}
.notification {
min-width: 0;
max-width: none;
}
}
/* Contenido principal: imágenes no desbordan el viewport */
@media (max-width: 768px) {
.main-content img,
.contenedor img,
.cotenido img {
max-width: 100%;
height: auto;
}
}
/* =============================================================================
Home (index): buscador y cabecera — UX móvil compacta (.home-hero)
============================================================================= */
@media (max-width: 640px) {
.home-hero .hero-section-netzerd {
padding-left: 10px !important;
padding-right: 10px !important;
padding-top: 92px !important;
}
.home-hero .hero-content {
margin-bottom: 14px !important;
gap: 12px !important;
}
.home-hero .hero-text h1 {
font-size: clamp(1.15rem, 4.2vw, 1.45rem) !important;
line-height: 1.3 !important;
padding: 0 4px;
}
/* Barra nav: misma anchura visual que la tarjeta de búsqueda */
body.page-index .nav-container-white-bar {
width: calc(100% - 12px);
border-radius: 14px;
box-shadow: 0 8px 28px rgba(15, 23, 42, 0.1);
}
.home-hero .hero-search-form-netzerd {
padding: 10px !important;
border-radius: 16px !important;
border: 1px solid #e2e8f0 !important;
box-shadow: 0 16px 48px rgba(15, 23, 42, 0.14) !important;
background: #fff !important;
}
.home-hero .hero-search-form-netzerd::before {
display: none;
}
.home-hero .search-input-group {
display: grid !important;
grid-template-columns: 1fr 1fr;
gap: 8px !important;
flex-direction: unset !important;
flex-wrap: unset !important;
}
.home-hero .search-field.location-field {
grid-column: 1 / -1;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 10px !important;
min-height: 52px !important;
height: auto !important;
padding: 12px 14px !important;
border: 1px solid #e5e7eb !important;
border-radius: 12px !important;
background: #f8fafc !important;
}
.home-hero .location-field .search-field-icon {
flex-shrink: 0;
}
.home-hero .location-field input {
min-width: 0 !important;
flex: 1 !important;
width: 100% !important;
text-align: left !important;
font-size: 15px !important;
}
.home-hero .search-field.date-field,
.home-hero .search-field.guests-field,
.home-hero .search-field.pets-field,
.home-hero .search-field.rooms-field {
grid-column: span 1;
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center !important;
justify-content: space-between !important;
gap: 8px !important;
min-height: 52px !important;
height: auto !important;
padding: 10px 12px !important;
border: 1px solid #e5e7eb !important;
border-radius: 12px !important;
background: #fff !important;
}
.home-hero .search-field.date-field .search-field-header,
.home-hero .search-field.guests-field .search-field-header,
.home-hero .search-field.pets-field .search-field-header,
.home-hero .search-field.rooms-field .search-field-header {
flex-direction: row !important;
align-items: center !important;
margin-bottom: 0 !important;
width: auto !important;
gap: 6px !important;
flex-shrink: 0;
}
.home-hero .search-field-title {
font-size: 11px !important;
font-weight: 600 !important;
color: #64748b !important;
text-transform: none !important;
letter-spacing: 0.01em;
}
.home-hero .date-display,
.home-hero .guests-display,
.home-hero .pets-display,
.home-hero .rooms-display {
margin-top: 0 !important;
margin-left: auto !important;
width: auto !important;
text-align: right !important;
font-size: 15px !important;
font-weight: 700 !important;
color: #0f172a !important;
white-space: nowrap !important;
}
.home-hero .search-submit-btn {
grid-column: 1 / -1;
width: 100% !important;
margin: 4px 0 0 !important;
padding: 14px 18px !important;
border-radius: 12px !important;
font-size: 16px !important;
justify-content: center !important;
box-shadow: 0 6px 20px rgba(37, 99, 235, 0.35) !important;
}
.home-hero .hero-search-wrapper::after {
opacity: 0.28;
background-size: auto 48%;
}
}
@media (max-width: 380px) {
.home-hero .search-input-group {
grid-template-columns: 1fr;
}
.home-hero .search-field.date-field,
.home-hero .search-field.guests-field,
.home-hero .search-field.pets-field,
.home-hero .search-field.rooms-field {
grid-column: 1 / -1;
}
}
/* -----------------------------------------------------------------------------
Index (usuario): alineación con Super Admin — Inter, menos ruido visual móvil
----------------------------------------------------------------------------- */
body.page-index {
font-family: 'Inter', system-ui, -apple-system, 'Segoe UI', sans-serif;
}
body.page-index .hero-search-form-netzerd,
body.page-index .search-field,
body.page-index .search-submit-btn {
font-family: 'Inter', system-ui, sans-serif;
}
body.page-index .hero-text h1 {
font-family: 'Playfair Display', Georgia, serif;
}
@media (max-width: 768px) {
body.page-index .hero-search-wrapper::before {
background: rgba(15, 23, 42, 0.38);
}
body.page-index .hero-search-wrapper::after {
opacity: 0 !important;
visibility: hidden !important;
}
body.page-index .sponsors-bar {
padding: 20px 12px;
}
body.page-index .sponsors-content {
flex-direction: column;
gap: 16px;
text-align: center;
}
body.page-index .sponsor-text {
font-size: 14px;
line-height: 1.45;
color: #475569;
}
}
@media (max-width: 640px) {
.home-hero .hero-search-wrapper::after {
opacity: 0 !important;
visibility: hidden !important;
}
.home-hero .hero-search-wrapper::before {
background: rgba(15, 23, 42, 0.4);
}
body.page-index .nav-container-white-bar {
border: 1px solid #e2e8f0;
box-shadow: 0 10px 32px rgba(15, 23, 42, 0.12);
}
body.page-index .header-nav-item-white {
border-radius: 10px;
}
body.page-index .header-nav-item-white:hover {
background: #eff6ff;
}
}
body.page-index .main-content {
background: #f3f5fb;
}
body.page-index .ofertas-section {
background: #f8fafc;
border-top: 1px solid #e2e8f0;
margin-top: 0;
padding-top: 48px;
padding-bottom: 48px;
}
body.page-index .netzerd-community-section {
background: #ffffff;
border-top: 1px solid #e2e8f0;
}
body.page-index .noticias-section {
background: #f3f5fb;
border-top: 1px solid #e2e8f0;
}
@media (max-width: 640px) {
body.page-index .ofertas-section {
padding: 36px 12px;
}
body.page-index .noticias-grid {
gap: 16px;
}
}
.search-field:focus-within {
outline: 2px solid rgba(37, 99, 235, 0.35);
outline-offset: 1px;
border-color: #93c5fd;
background: #fff;
}