:root { /* Nuevo color de marca (azul marino oscuro) */ --xtravel-brand: oklch(48.8% 0.243 264.376); --xtravel-brand-700: color-mix(in oklch, var(--xtravel-brand) 85%, black); --xtravel-brand-600: var(--xtravel-brand); --xtravel-brand-500: var(--xtravel-brand); --xtravel-brand-400: color-mix(in oklch, var(--xtravel-brand) 65%, white); --xtravel-brand-100: color-mix(in oklch, var(--xtravel-brand) 15%, white); --xtravel-brand-50: color-mix(in oklch, var(--xtravel-brand) 8%, white); /* Variables existentes */ --xh-color-orange-500:#f97316; --xh-color-orange-600:#ea580c; /* legacy (no usadas para marca) */ --xh-color-green-500:#16a34a; --xh-color-green-600:#15803d; --xh-color-blue-500:#2563eb; --xh-color-purple-500:#9333ea; --xh-color-gray-50:#f9fafb; --xh-color-gray-100:#f3f4f6; --xh-radius-sm:4px; --xh-radius:8px; --xh-radius-lg:12px; --xh-shadow-sm:0 1px 2px 0 rgba(0,0,0,.05); --xh-shadow:0 3px 10px -2px rgba(0,0,0,.07),0 1px 3px rgba(0,0,0,.05); --xh-gradient-card:linear-gradient(180deg,#ffffff 0%,#f9fafb 100%); --xh-header-height-mobile:73px; /* Altura fija móviles (fallback) */ --xh-header-bar1-mobile:56px; /* Altura estimada franja 1 en móvil (fallback preciso para top de franja 2) */ --xh-header-height:125px; /* Altura fija desktop (2 filas, fallback) */ /* Escalas tipográficas (v1.2.2) */ --xh-font-menu:0.95rem; /* principal (aumentado) */ --xh-font-menu-lg:1.05rem; /* >=768px (aumentado) */ --xh-font-submenu:0.82rem; /* dropdown base */ --xh-font-submenu-lg:0.86rem; /* >=768px */ } /* Estilos específicos del header XTravel - aislados */ body.has-xtravel-fixed-header { padding-top:var(--xh-header-height-mobile); } @media (min-width:768px){ body.has-xtravel-fixed-header { padding-top:var(--xh-header-height); } } /* Mostrar segunda barra solo en escritorio */ .xth-secondary-nav { display:none; } @media (min-width:1024px){ .xth-secondary-nav { display:block; } } /* Asegurar segunda barra visible desde tablet para menú desktop */ .xtravel-header .xth-secondary-fixed { display:none; } @media (min-width:768px){ .xtravel-header .xth-secondary-fixed { display:block; } } /* Cuando el menú móvil está abierto, mostrar la segunda barra también en móvil */ @media (max-width:767.98px){ .xtravel-header .xth-secondary-fixed.mobile-open { display:block; } /* Forzar que el panel móvil sea visible cuando el menú esté abierto */ .xtravel-header .xth-secondary-fixed.mobile-open #navbar-mobile-flat { display:block !important; } } /* Ocultar botón de búsqueda móvil en desktop (>=1024px) */ @media (min-width:1024px){ .xtravel-header #btn-busqueda{ display:none !important; } } /* Altura mínima explícita del nav para evitar saltos */ .xtravel-header nav { min-height:var(--xh-header-height-mobile); } @media (min-width:768px){ .xtravel-header nav { min-height:var(--xh-header-height); } } /* Compactar la segunda barra (menú) sin afectar la primera */ .xtravel-header .xth-secondary-fixed { padding-top:.08rem; padding-bottom:.08rem; } @media (min-width:1024px){ .xtravel-header .xth-secondary-fixed { padding-top:.5rem; padding-bottom:.5rem; } } /* Z-index explícitos para evitar solapamiento: la segunda barra y dropdowns sobre la primera */ .xtravel-header > nav:first-of-type { z-index:50; } .xtravel-header .xth-secondary-fixed { z-index:60; } .xtravel-header .nav-submenu { z-index: 70; } /* Menú desktop visible solo en >=1024 */ @media (max-width:1023.98px){ .xtravel-header #navbar-main { display:none !important; } } @media (min-width:1024px){ .xtravel-header #navbar-main { display:flex !important; } } /* Ocultar botón hamburguesa (o el toggle) en desktop >=1024; mostrar en <1024 */ @media (min-width:1024px){ .xtravel-header .hamburger-btn,[data-collapse-toggle="navbar-mobile-flat"]{ display:none !important; } } @media (max-width:1023.98px){ [data-collapse-toggle="navbar-mobile-flat"]{ display:inline-flex; } } .xtravel-header > nav:first-of-type { padding-top:.18rem; padding-bottom:.18rem; } @media (min-width:768px){ .xtravel-header > nav:first-of-type { padding-top:.23rem; padding-bottom:.23rem; } } .xtravel-header .xth-secondary-fixed { padding-top:.125rem; padding-bottom:.125rem; } @media (min-width:768px){ .xtravel-header .xth-secondary-fixed { padding-top:.15rem; padding-bottom:.15rem; } } /* Segunda barra fija: alinear justo bajo la primera barra, sin margen y sin solape */ .xtravel-header .xth-secondary-fixed{ top:var(--xh-header-bar1, var(--xh-header-bar1-mobile)); margin-top:0; } /* Botones de categoría: compactar verticalmente sin reducir targets táctiles en desktop */ .xtravel-header .nav-cat-btn { padding:.38rem .7rem; } @media (min-width:1024px){ .xtravel-header .nav-cat-btn { padding:.40rem .72rem; } } /* Fila principal: una sola línea en desktop/tablet */ .xtravel-header .header-row { flex-wrap:nowrap; gap:.4rem; } @media (min-width:1024px){ .xtravel-header .header-row { gap:.4rem; } } /* Menú principal debe recortar contenido y no forzar salto de línea */ .xtravel-header #navbar-main { flex:1 1 auto; min-width:0; overflow:visible; } .xtravel-header #navbar-main .main-nav-list { flex-wrap:nowrap; overflow:visible; min-width:0; column-gap:.5rem; } .xtravel-header #navbar-main .main-nav-list > li { white-space:nowrap; min-width:0; } /* Botones de categoría: compactar en tablet para que quepan más items */ @media (min-width:768px) and (max-width:1023.98px){ .xtravel-header .nav-cat-btn { padding:.45rem .6rem; font-size:0.88rem; } .xtravel-header .nav-cat-btn .cat-label { max-width:18ch; overflow:hidden; text-overflow:ellipsis; } } /* No clippear dropdowns desde el nav */ .xtravel-header nav { overflow:visible; } /* Asegurar que los submenús se apilen sobre otros contenidos */ .xtravel-header .nav-submenu { z-index: 60; } /* Zona de acciones (buscar, contacto, idioma) no debe crecer, para no empujar el menú */ .xtravel-header .header-actions { flex:0 0 auto; min-width:max-content; } .xtravel-header .header-actions .btn-action { padding:.45rem .6rem; } .xtravel-header .header-actions .btn-action .label { display:none; } @media (min-width:1280px){ .xtravel-header .header-actions .btn-action .label { display:inline; } } .nav-logo-wrapper { display:flex; align-items:center; } /* Tamaño logo ampliado (v1.2.0+) – v1.2.11 ajustes mínimos */ .xtravel-header .nav-logo-box { width:40px !important; height:auto; display:flex; align-items:center; } .xtravel-header .logo-claim { font-weight:700; letter-spacing:.02em; } @media (min-width:1024px){ .xtravel-header .logo-claim { font-size:1.25rem; line-height:1; } } @media (min-width:1280px){ .xtravel-header .logo-claim { font-size:1.35rem; } } .xtravel-header .item-cat-gray { background:#f3f4f6; color:#374151; } /* Dropdown container (simplificado v1.2.0) */ .xtravel-header .xth-dropdown { position:absolute; min-width:240px; max-width:340px; font-size:.72rem; overflow:visible; border-radius:12px; background:#fff; box-shadow:0 6px 18px -8px rgba(0,0,0,.12),0 2px 6px rgba(0,0,0,.04); border:1px solid #e2e8f0; border-left-width:3px; transform-origin:top left; will-change:opacity,transform,top,left; z-index:70; } /* Aumentar más el tamaño de letra de los submenús en escritorio */ @media (min-width:1024px){ .xtravel-header .xth-dropdown{ font-size:.9rem; } } @media (min-width:768px){ .xtravel-header .xth-dropdown { max-width:560px; } } /* En escritorio, mostrar el dropdown SOLO cuando el botón tenga aria-expanded="true" */ @media (min-width:1024px){ .xtravel-header .xth-dropdown { display:none; } .xtravel-header .nav-item > button[aria-expanded="true"] + .xth-dropdown { display:block; } } /* Eliminado ajuste redundante de top del dropdown en desktop; JS posiciona dinámicamente */ .xtravel-header .xth-dropdown a { position:relative; transition:background .16s,color .16s; } .xtravel-header .xth-dropdown a:hover { background:#f1f5f9; } .xtravel-header .xth-dropdown a:focus { outline:2px solid #fb923c; outline-offset:2px; border-radius:6px; background:#f8fafc; } .xtravel-header .xth-dropdown ul li + li a { border-top:1px solid rgba(229,231,235,.28); } /* Borde lateral por color de categoría (usando contexto del botón padre) */ /* Colores borde lateral */ .xtravel-header .xth-dropdown.border-orange-100 { border-left-color:var(--xtravel-brand-600); } .xtravel-header .xth-dropdown.border-green-100 { border-left-color:#16a34a; } .xtravel-header .xth-dropdown.border-blue-100 { border-left-color:#2563eb; } .xtravel-header .xth-dropdown.border-yellow-100 { border-left-color:#ca8a04; } .xtravel-header .xth-dropdown.border-gray-100 { border-left-color:#6b7280; } /* Animación suave de aparición (definición única) */ @keyframes xh-dd-fade{ from{opacity:0; transform:translateY(3px);} to{opacity:1; transform:translateY(0);} } @media (prefers-reduced-motion:reduce){ .xtravel-header .xth-dropdown{animation:none;} } /* Efecto icono desplazamiento leve */ .xtravel-header .xth-dropdown a svg { transition:transform .18s ease; } .xtravel-header .xth-dropdown a:hover svg { transform:translateX(2px); } /* Badge nuevo diferenciada por idioma (ya existe .badge-nuevo base) */ .xtravel-header .badge-nuevo { text-transform:uppercase; letter-spacing:.05em; } /* Scrollbar sutil sólo dentro del dropdown (webkit) */ .xtravel-header .xth-dropdown ul::-webkit-scrollbar { width:6px; } .xtravel-header .xth-dropdown ul::-webkit-scrollbar-track { background:transparent; } .xtravel-header .xth-dropdown ul::-webkit-scrollbar-thumb { background:#e5e7eb; border-radius:3px; } .xtravel-header .xth-dropdown ul::-webkit-scrollbar-thumb:hover { background:#d1d5db; } .badge-nuevo { display:inline-flex; align-items:center; gap:0.3em; padding:0.15em 0.6em; border-radius:9999px; font-size:0.65rem; font-weight:600; background:#ffe4ef; color:#d946ef; margin-left:0.4em; } /* ===== Estilos trasladados desde inline (header.php) ===== */ .xtravel-header .nav-item { position:relative; } /* Mejora de legibilidad global header */ .xtravel-header { font-size:13px; } @media (min-width:768px){ .xtravel-header { font-size:13.5px; } } /* Tamaños levemente mayores para SVGs */ .xtravel-header .nav-cat-btn svg{ width:1.25em; height:1.25em; } /* Ampliar iconos de los menús principales (franja 2) */ .xtravel-header #navbar-main > ul > li > button svg{ width:1.4rem; height:1.4rem; } @media (min-width:1024px){ .xtravel-header #navbar-main > ul > li > button svg{ width:1.6rem; height:1.6rem; } } .xtravel-header .dropdown-header svg{ width:1.1em; height:1.1em; } .xtravel-header .xth-dropdown .xth-dd-line svg{ width:1.05em; height:1.05em; } .xtravel-header .xth-mobile-flat .cat-title svg{ width:1.2em; height:1.2em; } .xtravel-header #xth-mobile-back svg{ width:1em; height:1em; } .xtravel-header #btn-busqueda svg, .xtravel-header #btn-contacto svg{ width:1.1em; height:1.1em; } .xtravel-header .contact-option-btn svg{ width:1.25em; height:1.25em; } .xtravel-header .xtravel-input-wrap svg, .xtravel-header .xtravel-textarea-wrap svg{ width:1em; height:1em; } .xtravel-header svg{ vertical-align:middle; } /* Incremento sólo en desktop (modo PC) */ @media (min-width:768px){ .xtravel-header .nav-cat-btn svg{ width:1.45em; height:1.45em; } .xtravel-header .dropdown-header svg{ width:1.28em; height:1.28em; } .xtravel-header .xth-dropdown .xth-dd-line svg{ width:1.22em; height:1.22em; } .xtravel-header #btn-busqueda svg, .xtravel-header #btn-contacto svg{ width:1.32em; height:1.32em; } .xtravel-header .contact-option-btn svg{ width:1.45em; height:1.45em; } .xtravel-header .xtravel-input-wrap svg, .xtravel-header .xtravel-textarea-wrap svg{ width:1.15em; height:1.15em; } } /* Botón categoría unificado */ .xtravel-header .nav-cat-btn { font-size:var(--xh-font-menu); font-weight:600; line-height:1.15; padding:.45rem .7rem; border-radius:.65rem; display:flex; align-items:center; gap:.55rem; color:#334155; background:transparent; transition:background .16s,color .16s,box-shadow .16s; } @media (min-width:768px){ .xtravel-header .nav-cat-btn { font-size:var(--xh-font-menu-lg); } } .xtravel-header .nav-cat-btn[aria-expanded="true"], .xtravel-header .nav-cat-btn:hover { background:#f8fafc; color:#0f172a; box-shadow:0 2px 4px -2px rgba(0,0,0,.08); } .xtravel-header .nav-cat-btn{ position:relative; } /* Chevron: rotar cuando está expandido */ .xtravel-header .nav-cat-btn .toggle-icon{ transition:transform .18s ease; } .xtravel-header .nav-cat-btn[aria-expanded="true"] .toggle-icon{ transform:rotate(180deg); } /* Subrayado colorido en hover/activo */ .xtravel-header .nav-cat-btn::after{ content:""; position:absolute; left:10px; right:10px; bottom:6px; height:2px; border-radius:2px; transform:scaleX(0); transform-origin:left center; transition:transform .18s ease, background-color .18s ease; } .xtravel-header .nav-cat-orange:hover::after, .xtravel-header .nav-cat-orange[aria-expanded="true"]::after, .xtravel-header .nav-cat-orange.active::after{ background:var(--xtravel-brand-600); transform:scaleX(1); } .xtravel-header .nav-cat-green:hover::after, .xtravel-header .nav-cat-green[aria-expanded="true"]::after, .xtravel-header .nav-cat-green.active::after{ background:#16a34a; transform:scaleX(1); } .xtravel-header .nav-cat-blue:hover::after, .xtravel-header .nav-cat-blue[aria-expanded="true"]::after, .xtravel-header .nav-cat-blue.active::after{ background:#2563eb; transform:scaleX(1); } .xtravel-header .nav-cat-yellow:hover::after, .xtravel-header .nav-cat-yellow[aria-expanded="true"]::after, .xtravel-header .nav-cat-yellow.active::after{ background:#ca8a04; transform:scaleX(1); } .xtravel-header .nav-cat-gray:hover::after, .xtravel-header .nav-cat-gray[aria-expanded="true"]::after, .xtravel-header .nav-cat-gray.active::after{ background:#6b7280; } .xtravel-header #navbar-main .main-nav-list { column-gap:.65rem; } .xtravel-header .xth-dropdown a.dropdown-item-compact { font-size:.76rem; padding:.45rem .62rem; } .xtravel-header .xth-dropdown .dropdown-header { font-size:.66rem; } .xtravel-header .xth-dropdown .item-cat-pill { font-size:.6rem; } .nav-logo { max-height:40px; width:auto; height:auto; } @media (min-width:768px){ .nav-logo { max-height:48px; } } /* Botón reserva (compacto) */ .xtravel-header .xth-btn-reserva { padding:.45rem .75rem; } @media (min-width:768px){ .xtravel-header .xth-btn-reserva { padding:.5rem .85rem; } } /* Input buscador del header (compacto) */ .xtravel-header #search-input { height:2.5rem; padding:.5rem 2.4rem .5rem .85rem; font-size:.92rem; border-radius:10px; } .xtravel-header #search-btn { height:2.5rem; width:2.2rem; display:flex; align-items:center; justify-content:center; } /* Ajuste fino de alineación del icono */ .xtravel-header #search-btn svg{ width:1.05rem; height:1.05rem; } /* Mejora visual del contenedor del input */ .xtravel-header #search-input { border-color:#d1d5db; background:#fff; } .xtravel-header #search-input::placeholder{ color:#94a3b8; } .xtravel-header #search-input:focus{ box-shadow:0 0 0 3px rgba(37,99,235,.15); } /* Ajustes internos item dropdown (v1.2.0) */ .xtravel-header .xth-dropdown .dropdown-header{ position:sticky; top:0; z-index:5; background:#fff; } /* Botón hamburguesa minimal (mobile) */ /* Apertura por clic controlada por JS; sin apertura por hover en desktop */ .xtravel-header .hamburger-btn { position:relative; width:28px; height:32px; border-radius:6px; display:inline-flex; align-items:center; justify-content:center; gap:0; background:#f1f5f9; border:1px solid #e2e8f0; transition:.25s; } /* Responsive hamburger sizing */ @media (min-width:640px){ .xtravel-header .hamburger-btn { width:40px; height:40px; border-radius:10px; } } .xtravel-header .hamburger-btn{ z-index:75; } .xtravel-header .hamburger-btn:hover { background:#fff; box-shadow:0 2px 6px -2px rgba(0,0,0,.15); } .xtravel-header .hamburger-btn:focus-visible { outline:2px solid #fb923c; outline-offset:2px; } .xtravel-header .hamburger-btn .hamburger-icon { display:inline-flex; align-items:center; justify-content:center; } .xtravel-header .hamburger-btn .hamburger-icon .icon-open { display:inline-flex; } .xtravel-header .hamburger-btn .hamburger-icon .icon-close { display:none; } .xtravel-header .hamburger-btn.is-active .hamburger-icon .icon-open { display:none; } .xtravel-header .hamburger-btn.is-active .hamburger-icon .icon-close { display:inline-flex; } /* Ajustes del texto del botón hamburguesa en móvil */ @media (max-width:767.98px){ .xtravel-header .hamburger-btn .hamburger-text { font-size:.72rem; font-weight:700; } } /* Compactar altura de botones de acción (coherente con nav) */ .xtravel-header #btn-busqueda, .xtravel-header #btn-contacto{ height:2.25rem; padding:.4rem .6rem; } /* Texto de botones: oculto por defecto (móvil), visible en >=768px */ .xtravel-header .xth-label{ display:none; } @media (min-width:768px){ .xtravel-header .xth-label{ display:inline; } } /* Menú móvil como overlay fijo debajo del header */ @media (max-width:767.98px){ /* Definición única de navbar móvil: posición, altura y scroll */ } /* Estilos item dropdown desktop conservados arriba; mobile ahora usa bloque plano */ @media (min-width:1024px){ .xtravel-header .xth-dropdown a.dropdown-item-compact{ font-size:var(--xh-font-submenu-lg); padding:.5rem .7rem; } } /* ====== Menú móvil plano (xth-mobile-flat) – simplificado ====== */ @media (max-width:1023.98px){ .xtravel-header .xth-mobile-flat{ animation:xfade .25s ease; } @keyframes xfade{ from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:translateY(0);} } /* Menú móvil fijo: posición, fondo y scroll (único) */ .xtravel-header #navbar-mobile-flat{ position:fixed; left:0; right:0; top:var(--xh-header-bar1, 64px); z-index:70; width:100%; max-height:calc(100vh - var(--xh-header-bar1, 64px)); overflow-y:auto; overscroll-behavior:contain; border-top:1px solid #e2e8f0; border-radius:0; background:#f8fafc; padding:.5rem .6rem 1rem; } .xtravel-header #navbar-mobile-flat::-webkit-scrollbar{ width:8px; } .xtravel-header #navbar-mobile-flat::-webkit-scrollbar-track{ background:transparent; } .xtravel-header #navbar-mobile-flat::-webkit-scrollbar-thumb{ background:#cbd5e1; border-radius:4px; } .xtravel-header #navbar-mobile-flat::-webkit-scrollbar-thumb:hover{ background:#94a3b8; } /* Listas internas básicas */ .xtravel-header #navbar-mobile-flat ul{ list-style:none; margin:0; padding:0; } .xtravel-header #navbar-mobile-flat li a{ display:flex; align-items:center; gap:.55rem; padding:.55rem .9rem; font-size:.84rem; color:#334155; text-decoration:none; } } /* Estados accesibles focus */ .xtravel-header .xth-dropdown a:focus-visible{ outline:2px solid #fb923c; outline-offset:2px; } /* Badges minimalistas dentro de dropdown */ .xtravel-header .xth-dropdown .item-cat-pill{ background:#f1f5f9; color:#475569; } /* ===== Desktop dropdown layout refinado (icono + título en fila, categoría debajo) ===== */ @media (min-width:768px){ .xtravel-header .xth-dropdown .xth-dd-item{ display:block; padding:.5rem .75rem; border-top:1px solid rgba(226,232,240,.55); text-decoration:none; position:relative; } .xtravel-header .xth-dropdown .submenu-items li:first-child .xth-dd-item{ border-top:0; } .xtravel-header .xth-dropdown .xth-dd-item:hover{ background:#f8fafc; } .xtravel-header .xth-dropdown .xth-dd-line{ line-height:1.1; } .xtravel-header .xth-dropdown .xth-dd-title{ font-size:.70rem; } .xtravel-header .xth-dropdown .xth-dd-cat{ letter-spacing:.05em; } .xtravel-header .xth-dropdown.multicol .xth-dd-item{ padding:.5rem .8rem; } /* Aumentar icono en layout apilado */ .xtravel-header .xth-dropdown .dropdown-item-stack .item-icon svg{ width:1.15em; height:1.15em; } /* Definición desktop única de dropdown-item-stack */ .xtravel-header .xth-dropdown .dropdown-item-stack { display:grid; grid-template-columns:28px 1fr auto; align-items:center; gap:.55rem; padding:.55rem .7rem .6rem; border-radius:8px; } .xtravel-header .xth-dropdown .dropdown-item-stack .item-icon { width:28px; height:28px; display:flex; align-items:center; justify-content:center; border-radius:8px; background:#f8fafc; font-size:.85rem; box-shadow:inset 0 0 0 1px #e2e8f0; } .xtravel-header .xth-dropdown .dropdown-item-stack:hover .item-icon { background:#fff; } .xtravel-header .xth-dropdown .dropdown-item-stack .item-body { display:flex; flex-direction:column; line-height:1.15; } .xtravel-header .xth-dropdown .dropdown-item-stack .item-title { font-size:.72rem; font-weight:600; color:#374151; margin:0 0 2px; } .xtravel-header .xth-dropdown .dropdown-item-stack:hover .item-title { color:#0f172a; } .xtravel-header .xth-dropdown .dropdown-item-stack .item-category { font-size:.58rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; opacity:.8; line-height:1; } .xtravel-header .xth-dropdown .dropdown-item-stack .badge-nuevo { margin-left:.4rem; } } /* Contact modal minimal adjustments */ .xtravel-header .contact-option-btn{ display:flex; justify-content:space-between; align-items:center; padding:.85rem 1rem; border:1px solid #e2e8f0; border-radius:.9rem; background:#fff; box-shadow:0 2px 4px -2px rgba(0,0,0,.06); font-size:.8rem; transition:.18s; } .xtravel-header .contact-option-btn:hover{ background:#f8fafc; } .xtravel-header .contact-option-btn:active{ background:#eef2f7; } .xtravel-header .contact-section textarea.xtravel-textarea{ resize:vertical; } .xtravel-header .xtravel-input,.xtravel-header .xtravel-textarea{ background:#f8fafc; border:1px solid #e2e8f0; border-radius:.65rem; padding:.55rem .75rem .55rem 2.1rem; font-size:.75rem; } .xtravel-header .xtravel-input:focus,.xtravel-header .xtravel-textarea:focus{ outline:2px solid #fb923c; background:#fff; } .xtravel-header .xtravel-input-wrap,.xtravel-header .xtravel-textarea-wrap{ position:relative; } .xtravel-header .xtravel-input-wrap svg,.xtravel-header .xtravel-textarea-wrap svg{ position:absolute; left:.65rem; top:50%; transform:translateY(-50%); font-size:.85rem; color:#64748b; } .xtravel-header .xtravel-textarea-wrap svg{ top:.9rem; } .xtravel-header .terms-label{ line-height:1.2; } .xtravel-header .contact-section--whatsapp a.xtravel-btn-green.disabled{ opacity:.45; } /* Transiciones modales más suaves */ .xtravel-header .modal-card{ border:1px solid #e2e8f0; } /* WhatsApp / Social grid minimal spacing */ .xtravel-header #contact-social-wrapper a{ font-size:.7rem; font-weight:500; } /* ================= Search Modal (v1.2.17) ================= */ .xth-search-modal { box-shadow:0 8px 24px -8px rgba(0,0,0,.15),0 2px 8px rgba(0,0,0,.05); } .xth-search-results { scrollbar-width:thin; scrollbar-color:#d1d5db transparent; } .xth-search-results::-webkit-scrollbar{ width:8px; } .xth-search-results::-webkit-scrollbar-track{ background:transparent; } .xth-search-results::-webkit-scrollbar-thumb{ background:#cbd5e1; border-radius:8px; } .xth-search-results::-webkit-scrollbar-thumb:hover{ background:#94a3b8; } .xth-search-results ul{ list-style:none; margin:0; padding:0; } .xth-search-results ul li a{ text-decoration:none; } .xth-search-results ul li{ position:relative; border:1px solid #e2e8f0; border-radius:14px; overflow:hidden; background:#fff; display:flex; flex-direction:column; min-height:100%; box-shadow:0 2px 4px -2px rgba(0,0,0,.06); transition:.22s; } .xth-search-results ul li:hover{ box-shadow:0 4px 14px -4px rgba(0,0,0,.15); transform:translateY(-2px); } .xth-search-results ul li img{ display:block; width:100%; height:128px; object-fit:cover; background:#f1f5f9; } @media (min-width:640px){ .xth-search-results ul li img{ height:156px; } } .xth-search-results h4{ font-size:.8rem; line-height:1.2; margin:0; } .xth-search-results p{ margin:0; font-size:.63rem; line-height:1.15; } .xth-search-results .font-semibold{ font-weight:600; } .xth-search-results span.inline-flex svg{ transition:transform .18s ease; } .xth-search-results a:hover span.inline-flex svg{ transform:translateX(3px); } .xth-search-results .badge-type-page,.xth-search-results .badge-type-post{ font-size:.55rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase; padding:.3em .55em; border-radius:9999px; } .xth-search-results .badge-type-page{ background:#eff6ff; color:#1d4ed8; } .xth-search-results .badge-type-post{ background:var(--xtravel-brand-50); color:var(--xtravel-brand-700); } .xth-search-results .xth-empty{ font-size:.7rem; } .xth-search-results .xth-error{ color:#dc2626; font-size:.7rem; } /* ====== Búsqueda (resultados) ====== */ .xtravel-header .xth-search-grid { margin-top:.25rem; } .xtravel-header .xth-search-card { border:1px solid #e2e8f0; box-shadow:0 4px 10px -4px rgba(0,0,0,.08),0 1px 3px rgba(0,0,0,.05); transition:box-shadow .16s,transform .16s,border-color .16s; } .xtravel-header .xth-search-card:hover { border-color:var(--xtravel-brand-600); box-shadow:0 6px 18px -6px rgba(0,0,0,.12),0 2px 6px rgba(0,0,0,.06); transform:translateY(-2px); } .xtravel-header .xth-search-card .badge-type-page{ background:#dbeafe; color:#1d4ed8; } .xtravel-header .xth-search-card .badge-type-tour{ background:#dcfce7; color:#15803d; } .xtravel-header .xth-search-card .visit-link svg{ transition:transform .18s; } .xtravel-header .xth-search-card .visit-link:hover svg{ transform:translateX(2px); } .xtravel-header .xth-search-card .card-media:after{ content:""; position:absolute; inset:0; background:linear-gradient(180deg,rgba(0,0,0,0) 60%,rgba(0,0,0,.05)); pointer-events:none; } .xtravel-header .xth-search-card img{ display:block; } @media (prefers-reduced-motion:reduce){ .xtravel-header .xth-search-card{ transition:none; } } .xtravel-header .xth-dropdown a.dropdown-item-compact .item-text{ flex:1; font-weight:500; color:#374151; display:inline-block; white-space:normal; overflow:visible; text-overflow:unset; } .xtravel-header .xth-dropdown a.dropdown-item-compact:hover .item-text{ color:#0f172a; } .xtravel-header .xth-dropdown .xth-dd-title{ white-space:normal; } @media (min-width:768px){ /* Títulos de submenú en 2 líneas máximo con elipsis; mantener el ancho actual del contenedor */ .xtravel-header .xth-dropdown .xth-dd-title{ display:-webkit-box; -webkit-box-orient:vertical; -webkit-line-clamp:2; line-clamp:2; overflow:hidden; text-overflow:ellipsis; flex:1 1 auto; min-width:0; } } .xtravel-header .nav-cat-btn:focus-visible { outline:2px solid #fb923c; outline-offset:2px; } .xtravel-header .nav-cat-btn .cat-label{ overflow:hidden; text-overflow:ellipsis; } /* Hover temático amigable */ .xtravel-header .xth-dropdown.border-orange-100 a.dropdown-item-compact:hover { background:color-mix(in oklch, var(--xtravel-brand) 8%, white); } .xtravel-header .xth-dropdown.border-green-100 a.dropdown-item-compact:hover { background:rgba(22,163,74,.08); } .xtravel-header .xth-dropdown.border-blue-100 a.dropdown-item-compact:hover { background:rgba(37,99,235,.08); } .xtravel-header .xth-dropdown.border-yellow-100 a.dropdown-item-compact:hover { background:rgba(202,138,4,.10); } .xtravel-header .xth-dropdown.border-gray-100 a.dropdown-item-compact:hover { background:rgba(107,114,128,.08); } .xtravel-header .xth-dropdown .item-cat-pill{ display:inline-block; margin-left:.35rem; padding:2px 6px; font-size:.55rem; text-transform:uppercase; letter-spacing:.5px; border-radius:12px; background:#e5e7eb; color:#374151; font-weight:600; } .xtravel-header .xth-dropdown .badge-nuevo{ background:#dc2626; color:#fff; font-size:.5rem; padding:2px 5px; border-radius:8px; font-weight:600; margin-left:.35rem; line-height:1; } /* ===== Layout apilado (desktop) v1.3.4 ===== */ @media (min-width:768px){ .xtravel-header .xth-dropdown .dropdown-item-stack { display:grid; grid-template-columns:28px 1fr auto; align-items:center; gap:.55rem; padding:.55rem .7rem .6rem; border-radius:8px; } .xtravel-header .xth-dropdown .dropdown-item-stack .item-icon { width:28px; height:28px; display:flex; align-items:center; justify-content:center; border-radius:8px; background:#f8fafc; font-size:.85rem; box-shadow:inset 0 0 0 1px #e2e8f0; } .xtravel-header .xth-dropdown .dropdown-item-stack:hover .item-icon { background:#fff; } .xtravel-header .xth-dropdown .dropdown-item-stack .item-body { display:flex; flex-direction:column; line-height:1.15; } .xtravel-header .xth-dropdown .dropdown-item-stack .item-title { font-size:.72rem; font-weight:600; color:#374151; margin:0 0 2px; } .xtravel-header .xth-dropdown .dropdown-item-stack:hover .item-title { color:#0f172a; } .xtravel-header .xth-dropdown .dropdown-item-stack .item-category { font-size:.58rem; font-weight:600; text-transform:uppercase; letter-spacing:.04em; opacity:.8; line-height:1; } .xtravel-header .xth-dropdown .dropdown-item-stack .badge-nuevo { margin-left:.4rem; } } /* (Fin limpieza estilos antiguos acordeón móvil) */ /* === Submenús multi-columna v1.2.2 (2 -> 3 -> 4) === */ /* Columnas adaptadas al ancho del contenido (títulos completos) */ .xtravel-header .nav-submenu.multicol .submenu-items { display:grid; grid-auto-rows:auto; grid-template-columns:repeat(auto-fit, minmax(220px, max-content)); gap:.35rem .75rem; padding:.45rem .5rem .6rem; } /* El panel se limita al viewport y reduce columnas automáticamente sin scroll horizontal */ @media (min-width:768px){ .xtravel-header .nav-submenu.multicol { width:fit-content; max-width:calc(100vw - 2rem); overflow:visible; } } @media (min-width:1280px){ .xtravel-header .nav-submenu.multicol { max-width:calc(100vw - 2rem); } } .xtravel-header .nav-submenu.multicol .submenu-items > li { margin:0; } /* Preferir 3 columnas completas en pantallas anchas sin generar scroll */ @media (min-width:1200px){ .xtravel-header .nav-submenu.multicol .submenu-items { grid-template-columns:repeat(3, minmax(220px, 280px)); } } /* Indicador focus accesible */ /* ================== Modal Contacto (minimal) ================== */ #modal-contacto .xtravel-field-label { display:block; font-size:11px; font-weight:600; margin:0 0 4px; text-transform:uppercase; letter-spacing:.04em; color:#374151; } #modal-contacto .xtravel-input-wrap, #modal-contacto .xtravel-textarea-wrap { position:relative; display:flex; align-items:flex-start; padding:6px 10px 6px 38px; background:#f8fafc; border:1px solid #e2e8f0; border-radius:8px; transition:.18s; } #modal-contacto .xtravel-textarea-wrap { padding-top:8px; } #modal-contacto .xtravel-input-wrap svg, #modal-contacto .xtravel-textarea-wrap svg { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:#94a3b8; font-size:14px; } #modal-contacto .xtravel-textarea-wrap svg { top:16px; transform:none; } #modal-contacto .xtravel-input, #modal-contacto .xtravel-textarea { width:100%; background:transparent; border:0; outline:0; font-size:13px; line-height:1.35; color:#1f2937; font-family:inherit; resize:vertical; } #modal-contacto .xtravel-input::placeholder, #modal-contacto .xtravel-textarea::placeholder { color:#94a3b8; } #modal-contacto .xtravel-input-wrap:focus-within, #modal-contacto .xtravel-textarea-wrap:focus-within { background:#fff; border-color:#fb923c; box-shadow:0 0 0 2px rgba(249,115,22,.28); } #modal-contacto .terms-row { display:flex; gap:6px; align-items:flex-start; font-size:11px; padding:6px 8px; background:#f9fafb; border:1px solid #e2e8f0; border-radius:6px; } #modal-contacto input[type=checkbox] { width:14px; height:14px; border:1px solid #cbd5e1; border-radius:3px; appearance:none; background:#fff; cursor:pointer; position:relative; } #modal-contacto input[type=checkbox]:checked { background:var(--xtravel-brand-600); border-color:var(--xtravel-brand-600); } #modal-contacto input[type=checkbox]:checked:after { content:""; position:absolute; left:3px; top:1px; width:6px; height:9px; border:2px solid #fff; border-top:none; border-left:none; transform:rotate(45deg); } #modal-contacto .xtravel-btn { position:relative; font-size:.7rem; font-weight:600; padding:.6rem .95rem; border-radius:9px; display:inline-flex; align-items:center; gap:.5rem; line-height:1.05; border:1px solid #e5e7eb; background:#f3f4f6; color:#374151; text-decoration:none; cursor:pointer; transition:.18s; } #modal-contacto .xtravel-btn:hover { background:#fff; box-shadow:0 2px 6px -2px rgba(0,0,0,.18); transform:translateY(-1px); } #modal-contacto .xtravel-btn:active { transform:translateY(0); box-shadow:0 1px 3px -1px rgba(0,0,0,.25); } #modal-contacto .xtravel-btn:focus { outline:2px solid #fb923c; outline-offset:2px; } #modal-contacto .xtravel-btn-sm { padding:.45rem .7rem; font-size:.64rem; border-radius:7px; } #modal-contacto .xtravel-btn-lg { padding:.75rem 1.15rem; font-size:.75rem; } /* Variantes de color */ #modal-contacto .xtravel-btn-orange { background:var(--xtravel-brand-600); color:#fff; border-color:var(--xtravel-brand-600); } #modal-contacto .xtravel-btn-green { background:linear-gradient(90deg,#16a34a,#22c55e); color:#fff; border-color:#16a34a; } #modal-contacto .xtravel-btn-purple { background:linear-gradient(90deg,#9333ea,#a855f7); color:#fff; border-color:#9333ea; } #modal-contacto .xtravel-btn-blue { background:linear-gradient(90deg,#2563eb,#3b82f6); color:#fff; border-color:#2563eb; } #modal-contacto .xtravel-btn-red { background:linear-gradient(90deg,#dc2626,#ef4444); color:#fff; border-color:#dc2626; } #modal-contacto .xtravel-btn-light { background:#f3f4f6; color:#374151; } #modal-contacto .xtravel-btn-outline { background:#fff; color:#374151; border-color:#d1d5db; } #modal-contacto .xtravel-btn-outline:hover { background:#f3f4f6; } /* Botones tipo tarjeta (opciones) */ #modal-contacto .contact-option-btn { @media (min-width:0){ } display:flex; width:100%; align-items:center; justify-content:space-between; text-align:left; border:1px solid #e5e7eb; padding:.85rem 1rem; border-radius:12px; font-size:.72rem; font-weight:600; gap:.75rem; transition:.25s; background:transparent; } #modal-contacto .contact-option-btn:hover { background:linear-gradient(145deg,#ffffff,#eef1f5); box-shadow:0 3px 8px -2px rgba(0,0,0,.12); transform:translateY(-2px); } #modal-contacto .contact-option-btn i { font-size:1.15rem; } #modal-contacto [id^="contact-"] { animation:xtravel-contact-fade .22s ease; } @keyframes xtravel-contact-fade { from { opacity:0; transform:translateY(4px);} to { opacity:1; transform:translateY(0);} } @media (prefers-reduced-motion:reduce){ #modal-contacto [id^="contact-"]{animation:none;} } #modal-contacto .form-msg-area { font-size:11px; min-height:16px; } #modal-contacto .social-grid a { font-size:.68rem; font-weight:500; border:1px solid #e5e7eb; border-radius:8px; padding:.65rem .7rem; display:flex; gap:.5rem; align-items:center; background:#fff; transition:.18s; } #modal-contacto .social-grid a:hover { background:#f9fafb; box-shadow:0 2px 6px -2px rgba(0,0,0,.12); } #modal-contacto .social-grid a i { font-size:1.05rem; } #modal-contacto .contact-form-styled { background:#fff; padding:.25rem .25rem .65rem; border:1px solid #e5e7eb; border-radius:10px; } #modal-contacto .contact-form-styled .field-block + .field-block { margin-top:.55rem; } #modal-contacto .grid { display:grid; gap:.55rem; } #modal-contacto .grid.grid-cols-2 { grid-template-columns:repeat(2,minmax(0,1fr)); } @media (max-width:520px){ #modal-contacto .grid.grid-cols-2 { grid-template-columns:1fr; } } @media (max-width:520px){ #modal-contacto .contact-option-btn { font-size:.7rem; } } /* Panel card styling */ .xtravel-header #modal-contacto .p-4 { background:linear-gradient(180deg,#ffffff 0%,#f9fafb 120%); } .xtravel-header #modal-contacto .border-b { background:#fff; } /* Responsive adjustments */ @media (max-width:420px){ .xtravel-header #modal-contacto .grid-cols-2 { grid-template-columns:1fr; } .xtravel-header #modal-contacto .gap-2 { gap:.5rem; } } /* Language switcher removido (reglas eliminadas) */ .xtravel-header .xth-dropdown ul > li:last-child a { border-bottom:none; } /* Badges dentro de layout multi-columna: evitar quiebre inesperado */ .xtravel-header .xth-dropdown.multicol .badge-nuevo { white-space:nowrap; } /* Botón de categoría abreviado */ /* (Definiciones duplicadas de nav-cat-btn eliminadas; ya definidas arriba) */ .xtravel-header .nav-cat-orange:hover { background:var(--xtravel-brand-50); color:var(--xtravel-brand-700); } .xtravel-header .nav-cat-green:hover { background:#ecfdf5; color:#047857; } .xtravel-header .nav-cat-blue:hover { background:#eff6ff; color:#1d4ed8; } .xtravel-header .nav-cat-yellow:hover { background:#fefce8; color:#a16207; } .xtravel-header .nav-cat-gray:hover { background:#f3f4f6; color:#374151; } /* Botón activo (panel abierto) */ .xtravel-header .nav-cat-btn.active { background:var(--xtravel-brand-50); color:var(--xtravel-brand-700); box-shadow:0 0 0 1px color-mix(in oklch, var(--xtravel-brand) 30%, white) inset; } .xtravel-header .nav-cat-btn.active .toggle-icon { transform:rotate(180deg); transition:transform .18s ease; } .xtravel-header .nav-cat-btn .toggle-icon { transition:transform .18s ease; } /* Compactación extra para desktop medio (1024–1279px): ahorra espacio para ES */ @media (min-width:1024px) and (max-width:1279.98px){ .xtravel-header .nav-cat-btn { padding:.5rem .7rem; font-size:.92rem; } .xtravel-header .nav-cat-btn .cat-label { max-width:16ch; } } /* Desktop amplio (>=1280px): permitir un poco más de texto pero mantener minimalismo */ @media (min-width:1280px){ .xtravel-header .nav-cat-btn .cat-label { max-width:18ch; } } /* Ultra ancho (>=1536px): ampliar ancho útil del header para evitar wraps */ @media (min-width:1536px){ .xtravel-header .max-w-7xl { max-width:88rem; } .xtravel-header .nav-cat-btn .cat-label { max-width:22ch; } } .xtravel-header .nav-submenu.hidden { opacity:0; pointer-events:none; } /* Tamaños de .dropdown-item-stack se definen por breakpoint (desktop/móvil) más arriba */ /* Posicionamiento del dropdown lo maneja JS; sin offsets CSS que lo desplacen */ /* Submenús con layout completo (no abreviado) */ .xtravel-header .nav-cat-btn .cat-label { font-weight:600; } /* (Eliminadas reglas legacy columns multicol) */ /* Idioma activo */ /* (Definición duplicada eliminada) */ .modal-backdrop { background-color:rgba(0,0,0,.35)!important; } /* ====== Modal base adaptativo (aplica a búsqueda y contacto) ====== */ /* Soporte tanto para estructura anidada (.xtravel-header > #modal-*) como para el caso en que el mismo nodo tiene ambas (class+id). */ .xtravel-header[id^="modal-"] .modal-card, .xtravel-header [id^="modal-"] .modal-card { width:100%; background:var(--xh-gradient-card); border:1px solid #eef2f7; box-shadow:var(--xh-shadow); border-radius:var(--xh-radius-lg); overflow:hidden; } .xtravel-header[id^="modal-"] h3, .xtravel-header [id^="modal-"] h3 { font-weight:600; letter-spacing:.5px; } .xtravel-header[id^="modal-"] .modal-card, .xtravel-header [id^="modal-"] .modal-card { max-height:90vh; display:flex; flex-direction:column; } .xtravel-header[id^="modal-"] .modal-card > .modal-sections, .xtravel-header [id^="modal-"] .modal-card > .modal-sections { flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain; } .xtravel-header[id^="modal-"] .modal-card > .modal-sections::-webkit-scrollbar, .xtravel-header [id^="modal-"] .modal-card > .modal-sections::-webkit-scrollbar { width:6px; } .xtravel-header[id^="modal-"] .modal-card > .modal-sections::-webkit-scrollbar-thumb, .xtravel-header [id^="modal-"] .modal-card > .modal-sections::-webkit-scrollbar-thumb { background:#d1d5db; border-radius:4px; } @media (max-height:640px){ .xtravel-header [id^="modal-"] .modal-card { max-height:94vh; } } /* Animación fade genérica de secciones internas */ .xtravel-header#modal-contacto .contact-section, #modal-contacto .contact-section { animation:xtravel-contact-fade .25s ease; } /* Simplificación de inputs reutilizables */ /* Inputs y textareas dentro del modal contacto (corrigiendo selector de descendencia) */ /* Sistema base de botones consolidado */ #modal-contacto .xtravel-btn { --btn-bg:#f3f4f6; --btn-color:#374151; --btn-border:#e5e7eb; --btn-shadow:0 2px 4px -1px rgba(0,0,0,.08),0 1px 2px rgba(0,0,0,.06); display:inline-flex; align-items:center; gap:.55rem; font-size:.72rem; font-weight:600; letter-spacing:.25px; border:1px solid var(--btn-border); background:var(--btn-bg); color:var(--btn-color); padding:.65rem 1.05rem; border-radius:calc(var(--xh-radius) + 2px); line-height:1.05; cursor:pointer; text-decoration:none; position:relative; isolation:isolate; transition:background var(--xh-transition),color var(--xh-transition),box-shadow var(--xh-transition),transform var(--xh-transition),filter var(--xh-transition); box-shadow:var(--btn-shadow); } #modal-contacto .xtravel-btn:before { content:""; position:absolute; inset:0; border-radius:inherit; background:linear-gradient(120deg,rgba(255,255,255,.4),rgba(255,255,255,0)); opacity:0; transition:opacity .35s; pointer-events:none; mix-blend-mode:overlay; } #modal-contacto .xtravel-btn:hover { background:var(--btn-bg); filter:brightness(1.02); box-shadow:0 4px 10px -2px rgba(0,0,0,.18),0 2px 4px rgba(0,0,0,.12); transform:translateY(-2px); } #modal-contacto .xtravel-btn:hover:before { opacity:1; } #modal-contacto .xtravel-btn:active { transform:translateY(0); filter:brightness(.97); box-shadow:0 2px 5px -2px rgba(0,0,0,.2); } /* (Eliminadas variantes antiguas primary/success reemplazadas por sistema nuevo) */ /* Estado de error/success reutilizable */ #modal-contacto .has-error .xtravel-input-wrap, #modal-contacto .has-error .xtravel-textarea-wrap { border-color:#dc2626; box-shadow:0 0 0 2px rgba(220,38,38,.25); } #modal-contacto .has-error .xtravel-field-label { color:#dc2626; } #modal-contacto .success-msg { color:#059669; } #modal-contacto .error-msg { color:#dc2626; } /* Tarjetas de opciones (unificadas) */ /* WhatsApp & form mini contenedores */ .xtravel-header #modal-contacto #xtravel-whatsapp-form, .xtravel-header #modal-contacto .contact-form-styled { background:#ffffffcc; backdrop-filter:blur(4px); border:1px solid #e2e8f0; box-shadow:inset 0 0 0 1px #ffffff,0 3px 10px -2px rgba(0,0,0,.08); border-radius:14px; } /* Limpieza: removidos bloques duplicados al final del archivo (ver commit). */ @keyframes xtravel-fade-in { from { opacity:0; transform:translateY(18px);} to { opacity:1; transform:translateY(0);} } .animate-fade-in { animation:xtravel-fade-in .25s ease-out; } /* Ajustes móviles (legacy accordion removido v1.3.3) */ @media (max-width:767.98px){ #navbar-main ul { width:100%; } .xtravel-header .xth-dropdown .xth-dd-line{ line-height:1.12; } .xtravel-header .xth-dropdown .xth-dd-title{ font-size:.80rem; } .xtravel-header .xth-dropdown .xth-dd-cat{ letter-spacing:.05em; font-size:.60rem; opacity:.85; } /* Definición mobile única de dropdown-item-stack */ .xtravel-header .xth-dropdown .dropdown-item-stack { display:grid; grid-template-columns:26px 1fr auto; align-items:center; gap:.5rem; padding:.5rem .65rem .55rem; border-radius:8px; } .xtravel-header .xth-dropdown .dropdown-item-stack .item-icon { width:26px; height:26px; display:flex; align-items:center; justify-content:center; border-radius:8px; background:#f8fafc; font-size:.85rem; box-shadow:inset 0 0 0 1px #e2e8f0; } .xtravel-header .xth-dropdown .dropdown-item-stack .item-title { font-size:.70rem; font-weight:600; color:#374151; margin:0 0 2px; } } /* Centrado seguro del modal de contacto al abrir (sin depender de utilidades externas) */ #modal-contacto.flex { display:flex; align-items:center; justify-content:center; } #modal-contacto.flex > .relative { width:100%; display:flex; justify-content:center; } @media (max-height:600px){ /* En pantallas muy bajas, alinear arriba para evitar que quede cortado */ #modal-contacto.flex { align-items:flex-start; padding-top:1.25rem; } } /* Compact badge colors (utility fallback if Tailwind missing) */ .badge-turno { display:inline-flex; align-items:center; gap:.3em; padding:.15em .6em; border-radius:9999px; font-size:.65rem; font-weight:600; margin-left:.5em; } .badge-turno-blue { background:#dbeafe; color:#2563eb; } .badge-turno-green { background:#bbf7d0; color:#16a34a; } .badge-turno-amber { background:#fef3c7; color:#b45309; } /* Simple utility if tailwind not yet loaded */ .text-xs { font-size:.75rem; } .text-sm { font-size:.875rem; } /* === Subset de utilidades tipo Tailwind (scoped) === */ .xtravel-header { --xh-transition:150ms cubic-bezier(.4,0,.2,1); font-family: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Ubuntu, "Helvetica Neue", Arial, sans-serif; } .xtravel-header .flex { display:flex; } .xtravel-header .inline-flex { display:inline-flex; } .xtravel-header .items-center { align-items:center; } .xtravel-header .justify-between { justify-content:space-between; } .xtravel-header .gap-1 { gap:.25rem; } .xtravel-header .gap-2 { gap:.5rem; } .xtravel-header .gap-3 { gap:.75rem; } .xtravel-header .p-1\.5 { padding:.375rem; } .xtravel-header .p-2 { padding:.5rem; } .xtravel-header .p-3 { padding:.75rem; } .xtravel-header .p-4 { padding:1rem; } .xtravel-header .px-2 { padding-left:.5rem; padding-right:.5rem; } .xtravel-header .px-3 { padding-left:.75rem; padding-right:.75rem; } .xtravel-header .px-4 { padding-left:1rem; padding-right:1rem; } .xtravel-header .py-0\.5 { padding-top:.125rem; padding-bottom:.125rem; } .xtravel-header .py-1 { padding-top:.25rem; padding-bottom:.25rem; } .xtravel-header .py-2 { padding-top:.5rem; padding-bottom:.5rem; } .xtravel-header .mt-0 { margin-top:0; } .xtravel-header .mb-2 { margin-bottom:.5rem; } .xtravel-header .ml-1 { margin-left:.25rem; } .xtravel-header .ml-auto { margin-left:auto; } .xtravel-header .space-y-4 > * + * { margin-top:1rem; } .xtravel-header .rounded-lg { border-radius:.5rem; } .xtravel-header .rounded-md { border-radius:.375rem; } .xtravel-header .rounded { border-radius:.25rem; } .xtravel-header .rounded-full { border-radius:9999px; } .xtravel-header .border { border:1px solid #e5e7eb; } .xtravel-header .border-b { border-bottom:1px solid #e5e7eb; } .xtravel-header .shadow { box-shadow:0 1px 2px 0 rgba(0,0,0,.05),0 1px 3px 1px rgba(0,0,0,.08); } .xtravel-header .shadow-sm { box-shadow:0 1px 2px 0 rgba(0,0,0,.06); } .xtravel-header .text-xs { font-size:.75rem; } .xtravel-header .text-sm { font-size:.875rem; } .xtravel-header .text-lg { font-size:1.125rem; } .xtravel-header .text-xl { font-size:1.25rem; } .xtravel-header .text-\[12px\] { font-size:12px; } .xtravel-header .text-\[13px\] { font-size:13px; } .xtravel-header .font-medium { font-weight:500; } .xtravel-header .font-semibold { font-weight:600; } .xtravel-header .font-bold { font-weight:700; } .xtravel-header .uppercase { text-transform:uppercase; } .xtravel-header .tracking-wide { letter-spacing:.05em; } .xtravel-header .text-gray-50 { color:#f9fafb; } .xtravel-header .text-gray-400 { color:#9ca3af; } .xtravel-header .text-gray-500 { color:#6b7280; } .xtravel-header .text-gray-600 { color:#4b5563; } .xtravel-header .text-gray-700 { color:#374151; } .xtravel-header .text-gray-800 { color:#1f2937; } .xtravel-header .text-gray-900 { color:#111827; } .xtravel-header .text-orange-500 { color:var(--xtravel-brand-500); } .xtravel-header .text-orange-600 { color:var(--xtravel-brand-600); } .xtravel-header .text-green-500 { color:#22c55e; } .xtravel-header .text-green-600 { color:#16a34a; } .xtravel-header .text-green-700 { color:#15803d; } .xtravel-header .text-blue-500 { color:#3b82f6; } .xtravel-header .text-blue-600 { color:#2563eb; } .xtravel-header .text-blue-400 { color:#60a5fa; } .xtravel-header .text-blue-700 { color:#1d4ed8; } .xtravel-header .text-yellow-500 { color:#eab308; } .xtravel-header .text-yellow-600 { color:#ca8a04; } .xtravel-header .text-yellow-700 { color:#a16207; } .xtravel-header .text-orange-700 { color:var(--xtravel-brand-700); } .xtravel-header .text-purple-500 { color:#a855f7; } .xtravel-header .text-purple-600 { color:#9333ea; } .xtravel-header .text-pink-400 { color:#f472b6; } .xtravel-header .bg-white { background:#fff; } .xtravel-header .bg-gray-50 { background:#f9fafb; } .xtravel-header .bg-gray-100 { background:#f3f4f6; } .xtravel-header .bg-orange-50 { background:var(--xtravel-brand-50); } .xtravel-header .bg-green-50 { background:#f0fdf4; } .xtravel-header .bg-yellow-50 { background:#fefce8; } .xtravel-header .bg-purple-50 { background:#faf5ff; } .xtravel-header .bg-blue-50 { background:#eff6ff; } .xtravel-header .hover\:bg-orange-100:hover { background:color-mix(in oklch, var(--xtravel-brand) 20%, white); } .xtravel-header .hover\:bg-green-100:hover { background:#dcfce7; } .xtravel-header .hover\:bg-yellow-100:hover { background:#fef9c3; } .xtravel-header .hover\:bg-purple-100:hover { background:#f3e8ff; } .xtravel-header .hover\:bg-blue-100:hover { background:#dbeafe; } .xtravel-header .hover\:text-orange-500:hover { color:var(--xtravel-brand-500); } .xtravel-header .hover\:text-orange-600:hover { color:var(--xtravel-brand-600); } .xtravel-header .hover\:text-green-700:hover { color:#15803d; } .xtravel-header .hover\:text-blue-700:hover { color:#1d4ed8; } .xtravel-header .focus\:ring-2:focus { box-shadow:0 0 0 2px color-mix(in oklch, var(--xtravel-brand) 45%, white); outline:0; } .xtravel-header .focus\:outline-none:focus { outline:0; } .xtravel-header .transition-all { transition:all var(--xh-transition); } .xtravel-header .w-full { width:100%; } .xtravel-header .h-8 { height:2rem; } .xtravel-header .w-8 { width:2rem; } .xtravel-header .rounded-lg { border-radius:.5rem; } .xtravel-header .inline-block { display:inline-block; } .xtravel-header .hidden { display:none; } .xtravel-header .block { display:block; } .xtravel-header .mx-auto { margin-left:auto; margin-right:auto; } .xtravel-header .max-w-7xl { max-width:80rem; } .xtravel-header .px-1 { padding-left:.25rem; padding-right:.25rem; } .xtravel-header .py-2 { padding-top:.5rem; padding-bottom:.5rem; } .xtravel-header .pl-10 { padding-left:2.5rem; } .xtravel-header .relative { position:relative; } .xtravel-header .absolute { position:absolute; } .xtravel-header .inset-0 { top:0; right:0; bottom:0; left:0; } .xtravel-header .left-0 { left:0; } .xtravel-header .right-2 { right:.5rem; } .xtravel-header .top-2 { top:.5rem; } .xtravel-header .bottom-2 { bottom:.5rem; } .xtravel-header .z-50 { z-index:50; } .xtravel-header .z-20 { z-index:20; } .xtravel-header .z-40 { z-index:40; } .xtravel-header .overflow-hidden { overflow:hidden; } .xtravel-header .overflow-y-auto { overflow-y:auto; } .xtravel-header .max-h-\[60vh\] { max-height:60vh; } @media (min-width:640px){ .xtravel-header .sm\:inline-block { display:inline-block; } .xtravel-header .sm\:max-w-4xl { max-width:56rem; } } @media (min-width:768px){ .xtravel-header .md\:flex { display:flex; } .xtravel-header .md\:hidden { display:none; } .xtravel-header .md\:w-auto { width:auto; } .xtravel-header .md\:order-1 { order:1; } .xtravel-header .md\:p-2 { padding:.5rem; } .xtravel-header .md\:space-x-1 > * + * { margin-left:.25rem; } /* Variantes hover responsivas usadas en botones de menú */ .xtravel-header .md\:hover\:bg-orange-50:hover { background:var(--xtravel-brand-50); } .xtravel-header .md\:hover\:bg-green-50:hover { background:#f0fdf4; } .xtravel-header .md\:hover\:bg-blue-50:hover { background:#eff6ff; } .xtravel-header .md\:hover\:bg-yellow-50:hover { background:#fefce8; } .xtravel-header .md\:hover\:bg-gray-50:hover { background:#f9fafb; } .xtravel-header .md\:hover\:text-orange-700:hover { color:var(--xtravel-brand-700); } .xtravel-header .md\:hover\:text-green-700:hover { color:#15803d; } .xtravel-header .md\:hover\:text-blue-700:hover { color:#1d4ed8; } .xtravel-header .md\:hover\:text-yellow-700:hover { color:#a16207; } .xtravel-header .md\:hover\:text-gray-700:hover { color:#374151; } } /* Bloque redundante del modal contacto eliminado (consolidado arriba). */ /* ====== Ajustes extra tamaño/modal ====== */ #modal-contacto .modal-card { max-width:600px; } @media (min-width:640px){ #modal-contacto .modal-card { max-width:640px; } } @media (min-width:900px){ #modal-contacto .modal-card { max-width:680px; } } @media (min-width:1180px){ #modal-contacto .modal-card { max-width:720px; } } /* Layout interno responsive: dos columnas para secciones formulario y opciones lado a lado si se diera el caso */ @media (min-width:900px){ #modal-contacto .modal-sections.multicol-layout { display:grid; grid-template-columns:320px 1fr; gap:1.25rem; padding:1.25rem 1.5rem 1.5rem; } #modal-contacto .modal-sections.multicol-layout .contact-section { padding:1rem 1.1rem 1.25rem; } #modal-contacto .modal-sections.multicol-layout .contact-section--options { position:sticky; top:0; align-self:start; } } #modal-contacto .contact-section { padding:1.5rem 1.4rem 1.65rem; } /* Variant sizes (pueden agregarse como clase en el futuro) */ #modal-contacto.size-sm .modal-card { max-width:540px; } #modal-contacto.size-lg .modal-card { max-width:880px; } /* Bloque antiguo de estética de botones removido (usamos .xtravel-btn + variantes). */ /* Botón especial enlace WhatsApp */ #modal-contacto a#btn-wa-send { text-decoration:none; } #modal-contacto a#btn-wa-send:focus { outline:2px solid var(--xh-color-green-500); outline-offset:2px; } /* Inputs tamaño y legibilidad */ #modal-contacto .xtravel-input, #modal-contacto .xtravel-textarea { font-size:.8rem; } #modal-contacto .xtravel-textarea { min-height:110px; } /* Alinear iconos de opción mejor en pantallas grandes */ @media (min-width:640px){ #modal-contacto .contact-option-btn span.text-left { font-size:.78rem; } } /* ============================================================= * Utilidades extra creadas tras depuración * .btn-base -> base para botones neutrales (usar junto a variantes) * .input-base -> base para inputs (aplica a input, textarea) * .section-card -> wrapper de secciones con padding estándar * ============================================================= */ .xtravel-header .btn-base { display:inline-flex; align-items:center; gap:.45rem; font-weight:600; font-size:.68rem; padding:.55rem .9rem; border-radius:var(--xh-radius); line-height:1; cursor:pointer; border:1px solid #e5e7eb; background:#f3f4f6; color:#374151; transition:background var(--xh-transition),color var(--xh-transition),box-shadow var(--xh-transition); } .xtravel-header .btn-base:hover { background:#fff; box-shadow:0 2px 6px rgba(0,0,0,.12); } .xtravel-header .btn-base:focus { outline:2px solid var(--xh-color-orange-500); outline-offset:2px; } .xtravel-header .input-base { width:100%; font-size:.78rem; padding:.55rem .6rem; border:1px solid #d1d5db; border-radius:var(--xh-radius); background:#fff; color:#111827; transition:border-color var(--xh-transition), box-shadow var(--xh-transition), background var(--xh-transition); } .xtravel-header .input-base:focus { outline:0; border-color:var(--xh-color-orange-500); box-shadow:0 0 0 2px rgba(249,115,22,.25); } .xtravel-header .section-card { background:var(--xh-gradient-card); border:1px solid #eef2f7; border-radius:var(--xh-radius-lg); box-shadow:var(--xh-shadow-sm); } /* Nota: Para usar estas utilidades, puede reemplazarse en el markup múltiples clases repetidas. Ejemplo: