/* ============================================================= * XTravel Header Styles (depurado) * Cambios notables: * - Unificación reglas dropdown / botones / modales. * - Eliminación de animaciones y hovers duplicados. * - Variables centralizadas y utilidades minimalistas. * - Prefers-reduced-motion para animaciones opcionales. * - Sombras suavizadas para menor coste de pintura. * - Versión sincronizada con bootstrap (cache busting). * Version: 1.2.10 * ============================================================= */ :root { --xh-color-orange-500:#f97316; --xh-color-orange-600:#ea580c; --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:70px; /* Altura fija móviles */ --xh-header-height:80px; /* Altura fija desktop */ /* Escalas tipográficas (v1.2.2) */ --xh-font-menu:0.9rem; /* principal */ --xh-font-menu-lg:0.95rem; /* >=768px */ --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); } } /* 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); } } .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 .nav-logo { width:100% !important; height:auto !important; max-height:40px !important; transition:all .25s ease; object-fit:contain; } .xtravel-header .item-cat-gray { background:#f3f4f6; color:#374151; } /* Dropdown container (simplificado v1.2.0) */ .xtravel-header .xth-dropdown { min-width:240px; max-width:360px; 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; animation:xh-dd-fade .14s ease-out; backdrop-filter:blur(6px); } .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:#f97316; } .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 */ /* Animación (definición única) */ .xtravel-header .xth-dropdown { transform-origin:top left; animation:xh-dd-fade .16s ease-out; } @keyframes xh-dd-fade{ from{opacity:0; transform:translateY(4px);} 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 i.fa-solid { transition:transform .18s ease; } .xtravel-header .xth-dropdown a:hover i.fa-solid { 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:13.5px; } @media (min-width:768px){ .xtravel-header { font-size:14px; } } /* Botón categoría unificado */ .xtravel-header .nav-cat-btn { font-size:var(--xh-font-menu); font-weight:600; line-height:1.15; padding:.55rem .8rem; 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 .xth-dropdown a.dropdown-item-compact { font-size:.75rem; } .xtravel-header .xth-dropdown .dropdown-header { font-size:.65rem; } .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; } } /* Ajustes internos item dropdown (v1.2.0) */ .xtravel-header .xth-dropdown .dropdown-header{ position:sticky; top:0; z-index:5; backdrop-filter:blur(4px); background:#fff; } /* Botón hamburguesa minimal (mobile) */ .xtravel-header .hamburger-btn { position:relative; width:40px; height:40px; border-radius:10px; display:inline-flex; align-items:center; justify-content:center; gap:0; background:#f1f5f9; border:1px solid #e2e8f0; transition:.25s; } .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-lines { position:relative; width:20px; height:14px; } .xtravel-header .hamburger-btn .hamburger-lines span { position:absolute; left:0; width:100%; height:2px; background:#334155; border-radius:2px; transition:.28s cubic-bezier(.4,0,.2,1); transform-origin:center; } .xtravel-header .hamburger-btn .hamburger-lines span:nth-child(1){ top:0; } .xtravel-header .hamburger-btn .hamburger-lines span:nth-child(2){ top:6px; } .xtravel-header .hamburger-btn .hamburger-lines span:nth-child(3){ bottom:0; } .xtravel-header .hamburger-btn.is-active .hamburger-lines span:nth-child(1){ transform:translateY(6px) rotate(45deg); } .xtravel-header .hamburger-btn.is-active .hamburger-lines span:nth-child(2){ opacity:0; transform:translateX(-6px); } .xtravel-header .hamburger-btn.is-active .hamburger-lines span:nth-child(3){ transform:translateY(-6px) rotate(-45deg); } /* Estilos item dropdown desktop conservados arriba; mobile ahora usa bloque plano */ @media (min-width:768px){ .xtravel-header .xth-dropdown a.dropdown-item-compact{ font-size:var(--xh-font-submenu-lg); } } /* ====== Menú móvil plano (xth-mobile-flat) ====== */ @media (max-width:767.98px){ .xtravel-header .xth-mobile-flat{ animation:xfade .25s ease; } @keyframes xfade{ from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:translateY(0);} } .xtravel-header .xth-mobile-flat-list{ list-style:none; margin:0; padding:0.35rem 0 0.75rem; display:flex; flex-direction:column; gap:.95rem; } .xtravel-header .xth-mobile-flat .cat-block{ margin:0; padding:0; } .xtravel-header .xth-mobile-flat .cat-title{ display:flex; align-items:center; gap:.55rem; font-weight:600; font-size:.8rem; color:#0f172a; padding:.4rem .25rem; text-transform:uppercase; letter-spacing:.5px; } .xtravel-header .xth-mobile-flat .cat-items{ list-style:none; margin:0; padding:0 .25rem 0 .25rem; display:flex; flex-direction:column; gap:.1rem; } .xtravel-header .xth-mobile-flat .cat-items li a.item-link{ display:flex; align-items:flex-start; gap:.55rem; padding:.55rem .75rem; background:#fff; border:1px solid #e2e8f0; border-radius:.85rem; font-size:.72rem; line-height:1.15; font-weight:500; color:#374151; text-decoration:none; box-shadow:0 2px 4px -2px rgba(0,0,0,.06); transition:.18s; } .xtravel-header .xth-mobile-flat .cat-items li a.item-link:hover{ background:#f8fafc; color:#0f172a; box-shadow:0 4px 10px -4px rgba(0,0,0,.12); } .xtravel-header .xth-mobile-flat .cat-items li a.item-link:active{ background:#eef2f7; } .xtravel-header .xth-mobile-flat .cat-items li a.item-link .icon{ width:16px; text-align:center; font-size:.75rem; margin-top:2px; opacity:.85; } .xtravel-header .xth-mobile-flat .cat-items li a.item-link .badge-nuevo{ background:#dc2626; color:#fff; font-size:.5rem; padding:2px 5px; border-radius:8px; font-weight:600; margin-left:.4rem; line-height:1; } /* v1.3.1 Ajustes: menú móvil siempre scrollable y sublistas visibles */ .xtravel-header #navbar-mobile-flat{ max-height:calc(100vh - var(--xh-header-height-mobile,64px) - 12px); overflow-y:auto; overscroll-behavior:contain; border:1px solid #e2e8f0; border-radius:1rem; background:#f8fafc; padding:.25rem .4rem .75rem; } .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; } /* v1.3.2 Acordeón: listas colapsadas por defecto */ .xtravel-header .xth-mobile-flat .cat-block .cat-items{ display:none; } .xtravel-header .xth-mobile-flat .cat-block.is-open .cat-items{ display:flex; } .xtravel-header .xth-mobile-flat .cat-block .cat-title{ width:100%; text-align:left; background:transparent; border:0; cursor:pointer; } .xtravel-header .xth-mobile-flat .cat-block.is-open .cat-title{ color:#f97316; } .xtravel-header .xth-mobile-flat .cat-block .toggle-icon{ transition:transform .25s ease; } .xtravel-header .xth-mobile-flat .cat-block.is-open .toggle-icon{ transform:rotate(180deg); } /* Espaciado extra cuando hay muchas categorías */ .xtravel-header .xth-mobile-flat .cat-block + .cat-block{ border-top:1px solid #e2e8f0; padding-top:.55rem; } /* Minimizar densidad en listas largas */ .xtravel-header .xth-mobile-flat .cat-items li a.item-link{ padding:.5rem .65rem; } /* Mejorar foco accesible */ .xtravel-header .xth-mobile-flat .cat-items li a.item-link:focus-visible{ outline:2px solid #fb923c; outline-offset:2px; } } /* 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; } /* 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 i,.xtravel-header .xtravel-textarea-wrap i{ position:absolute; left:.65rem; top:50%; transform:translateY(-50%); font-size:.85rem; color:#64748b; } .xtravel-header .xtravel-textarea-wrap i{ 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:160px; object-fit:cover; background:#f1f5f9; } @media (min-width:640px){ .xth-search-results ul li img{ height:180px; } } .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 i{ transition:transform .18s ease; } .xth-search-results a:hover span.inline-flex i{ 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; backdrop-filter:blur(4px); } .xth-search-results .badge-type-page{ background:#eff6ff; color:#1d4ed8; } .xth-search-results .badge-type-post{ background:#fff7ed; color:#c2410c; } .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 .22s,transform .22s,border-color .22s; } .xtravel-header .xth-search-card:hover { border-color:#f97316; 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 i{ transition:transform .18s; } .xtravel-header .xth-search-card .visit-link:hover i{ 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; } .xtravel-header .xth-search-card .badge-cat{ backdrop-filter:blur(6px); } @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 a.dropdown-item-compact:hover{ background:#f1f5f9; } .xtravel-header .nav-cat-btn:hover { box-shadow:0 2px 6px -2px rgba(0,0,0,.12); } .xtravel-header .nav-cat-btn:focus-visible { outline:2px solid #fb923c; outline-offset:2px; } /* Hover temático amigable */ .xtravel-header .xth-dropdown.border-orange-100 a.dropdown-item-compact:hover { background:rgba(249,115,22,.08); } .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; } /* (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(2,minmax(200px,max-content)); gap:.4rem .9rem; padding:.55rem .6rem .75rem; } @media (min-width:900px){ .xtravel-header .nav-submenu.multicol .submenu-items { grid-template-columns:repeat(3,minmax(210px,max-content)); } } @media (min-width:1200px){ .xtravel-header .nav-submenu.multicol .submenu-items { grid-template-columns:repeat(4,minmax(220px,max-content)); } } /* Ajuste dinámico: ancho se adapta al contenido hasta un máximo razonable */ @media (min-width:768px){ .xtravel-header .nav-submenu.multicol { width:fit-content; max-width:calc(100vw - 2rem); overflow-x:auto; } } @media (min-width:1280px){ .xtravel-header .nav-submenu.multicol { max-width:calc(100vw - 4rem); } } .xtravel-header .nav-submenu.multicol .submenu-items > li { margin:0; } /* Indicador focus accesible */ .xtravel-header .xth-dropdown a.dropdown-item-compact:focus { box-shadow:0 0 0 2px rgba(251,146,60,.35); outline:0; border-radius:6px; } /* Ajustar spacing entre items en columnas */ .xtravel-header .xth-dropdown.multicol ul > li { margin-bottom:2px; } /* Último item sin margen extra visual */ /* ================== 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 i, #modal-contacto .xtravel-textarea-wrap i { position:absolute; left:12px; top:50%; transform:translateY(-50%); color:#94a3b8; font-size:14px; } #modal-contacto .xtravel-textarea-wrap i.fa-message { 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:#f97316; border-color:#f97316; } #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:linear-gradient(90deg,#f97316,#fb923c); color:#fff; border-color:#f97316; } #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 active state === */ #language-switcher .language-link { transition:background .18s,color .18s, box-shadow .18s; border:1px solid transparent; border-radius:12px; padding:.25rem .55rem; display:inline-flex; align-items:center; gap:.35rem; font-weight:600; font-size:.65rem; } #language-switcher .language-link:hover { background:#fff; } #language-switcher .language-link.active { background:#fff; color:#f97316; box-shadow:0 0 0 1px #fcd34d inset; } .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:#fff7ed; color:#c2410c; } .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:#fff7ed; color:#c2410c; box-shadow:0 0 0 1px #fed7aa inset; } .xtravel-header .nav-cat-btn.active .fa-chevron-down { transform:rotate(180deg); transition:transform .18s ease; } .xtravel-header .nav-cat-btn .fa-chevron-down { transition:transform .18s ease; } /* Panel de submenú posicionado dinámicamente */ .xtravel-header .nav-submenu { will-change:top,left,width; transition:opacity .18s ease, transform .18s ease; } .xtravel-header .nav-submenu.hidden { opacity:0; pointer-events:none; transform:translateY(-4px); } .xtravel-header .nav-submenu:not(.hidden) { opacity:1; transform:translateY(0); } /* 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 */ @media (max-width:767px){ #navbar-main { position:absolute; top:100%; left:0; width:100%; background:#fff; box-shadow:0 4px 6px -1px rgba(0,0,0,.1); border-top:1px solid #f0f0f0; padding:.5rem; transition:transform .3s ease, opacity .3s ease; opacity:0; transform:translateY(-10px); z-index:40; } #navbar-main.flex { opacity:1; transform:translateY(0); } #navbar-main ul { width:100%; } #navbar-main li { border-bottom:1px solid #f3f4f6; } #navbar-main li:last-child { border-bottom:none; } #navbar-main button { width:100%; justify-content:space-between; padding:.6rem .8rem; border-radius:.375rem; font-weight:600; } /* ===== Submenús móviles minimalistas ===== */ .xtravel-header .mobile-accordion-panel { background:transparent; border:0; box-shadow:none; padding:0 .15rem .25rem; margin:0; } .xtravel-header .mobile-accordion-panel .dropdown-header { display:none !important; } .xtravel-header .mobile-accordion-panel ul.submenu-items { display:block; padding:.15rem 0 .35rem; margin:0; background:transparent; } .xtravel-header .mobile-accordion-panel ul.submenu-items > li { margin:0; padding:0; border:0; } .xtravel-header .mobile-accordion-panel a.dropdown-item-compact { background:#f8fafc; border:1px solid #eef2f7; margin:.35rem 0; border-radius:.65rem; padding:.65rem .75rem; font-size:.72rem; line-height:1.15; box-shadow:0 1px 2px rgba(0,0,0,.04); } .xtravel-header .mobile-accordion-panel a.dropdown-item-compact i { font-size:.75rem; opacity:.7; } .xtravel-header .mobile-accordion-panel a.dropdown-item-compact:hover { background:#fff; box-shadow:0 2px 4px -2px rgba(0,0,0,.08); border-color:#e2e8f0; } .xtravel-header .mobile-accordion-panel a.dropdown-item-compact .item-cat-pill, .xtravel-header .mobile-accordion-panel a.dropdown-item-compact .badge-nuevo { display:none !important; } /* Separador visual leve entre grupos abiertos */ .xtravel-header .mobile-accordion-panel.is-open { border-left:2px solid #f97316; padding-left:.4rem; } /* Botón categoría en móvil: estética más plana */ .xtravel-header .mobile-accordion-trigger { background:#ffffff; border:1px solid #e5e7eb; border-radius:.7rem; margin:.3rem 0; padding:.65rem .85rem; font-size:.78rem; font-weight:600; display:flex; align-items:center; gap:.55rem; box-shadow:0 1px 2px rgba(0,0,0,.04); } .xtravel-header .mobile-accordion-trigger:hover { background:#f8fafc; } .xtravel-header .mobile-accordion-trigger[aria-expanded="true"], .xtravel-header .mobile-accordion-trigger.is-open { background:#fff7ed; border-color:#fed7aa; } .xtravel-header .mobile-accordion-trigger i.fa-solid { font-size:.85rem; } /* Transición de altura ya manejada en JS; aquí sólo suavizamos opacidad */ .xtravel-header .mobile-accordion-panel { transition:max-height .35s cubic-bezier(.4,0,.2,1), opacity .25s ease; } .xtravel-header .mobile-accordion-panel:not(.is-open) { opacity:0; } .xtravel-header .mobile-accordion-panel.is-open { opacity:1; } } /* 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:#f97316; } .xtravel-header .text-orange-600 { color:#ea580c; } .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:#c2410c; } .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:#fff7ed; } .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:#ffedd5; } .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:#f97316; } .xtravel-header .hover\:text-orange-600:hover { color:#ea580c; } .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 rgba(251,146,60,.5); 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:#fff7ed; } .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:#c2410c; } .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; } } /* Más aire interno en secciones */ #modal-contacto .contact-section { padding:1.5rem 1.4rem 1.65rem; } #modal-contacto .contact-section > form { padding:0.25rem 0.25rem 0.5rem; } /* 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; } #modal-contacto .contact-option-btn i.fa-arrow-right { font-size:1rem; } } /* ============================================================= * 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: