/* Fuente global (antes inline en ) */ body, button, input, select, textarea { font-family: 'Poppins', sans-serif !important; } /* Navbar glass (antes inline) */ .glass-navbar { background-color: #ffffff !important; border-bottom: 1px solid #e0e0e0; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.05); transition: background-color 0.3s ease, box-shadow 0.3s ease; } .glass-navbar.scrolled { background-color: #ffffff !important; box-shadow: 0 8px 24px rgba(0, 0, 0, 0.1); } .glass-navbar .navbar-brand { margin-left: 6px; } .glass-navbar .navbar-toggler { padding: 0.35rem 0.45rem; border-radius: 10px; margin-right: 8px; } .glass-navbar .navbar-toggler-icon { background-image: none; background-color: #1f1f1f; border-radius: 999px; display: block; height: 3px; width: 26px; position: relative; transition: background-color 0.2s ease, transform 0.2s ease; } .glass-navbar .navbar-toggler:hover .navbar-toggler-icon { transform: scaleX(1.05); } .glass-navbar .navbar-toggler-icon::before, .glass-navbar .navbar-toggler-icon::after { content: ""; position: absolute; left: 0; width: 26px; height: 3px; background-color: #1f1f1f; border-radius: 999px; opacity: 1; transition: transform 0.2s ease, top 0.2s ease, opacity 0.2s ease; } .glass-navbar .navbar-toggler-icon::before { top: -8px; } .glass-navbar .navbar-toggler-icon::after { top: 8px; } .glass-navbar .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon { background-color: transparent; } .glass-navbar .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::before { top: 0; transform: rotate(45deg); opacity: 1; } .glass-navbar .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon::after { top: 0; transform: rotate(-45deg); opacity: 1; } @media (max-width: 991.98px) { .glass-navbar .navbar-collapse { background-color: #ffffff; border: 1px solid #e6e6e6; border-radius: 12px; box-shadow: 0 12px 24px rgba(0, 0, 0, 0.08); margin-top: 0.75rem; padding: 0.75rem 1rem; } .glass-navbar .navbar-nav { align-items: flex-start; gap: 0.25rem; width: 100%; } .glass-navbar .navbar-nav .nav-link { padding: 0.5rem 0; width: 100%; } .glass-navbar .navbar-nav .btn { margin-top: 0.5rem; text-align: center; width: 100%; } } /* Fade de carga (antes inline) */ .is-loading { opacity: 0; } .is-loaded { opacity: 1; transition: opacity .25s ease; } /* Contacto (antes inline dentro de la section) */ #contact-feedback { border-radius: 22px; border: 1px solid rgba(37, 99, 235, .35); background: rgba(37, 99, 235, .1); color: #1e3a8a; transition: opacity .2s ease, transform .2s ease; margin-bottom: 1rem; } #contact-feedback.alert-danger { border-color: rgba(239, 68, 68, .3); background: rgba(239, 68, 68, .1); color: #b91c1c; } #contact-feedback.alert-success { border-color: rgba(16, 185, 129, .4); background: rgba(16, 185, 129, .1); color: #047857; } .contact-field .form-control { background: #f8fafc; border: 1px solid rgba(148, 163, 184, .5); border-radius: 14px; padding: 1rem .95rem; transition: border-color .2s ease, box-shadow .2s ease; } .contact-field .form-control:focus { outline: none; border-color: rgba(37, 99, 235, .6); box-shadow: 0 0 0 3px rgba(37, 99, 235, .15); } .contact-field .form-control.is-invalid { border-color: rgba(220, 38, 38, .8); box-shadow: 0 0 0 3px rgba(220, 38, 38, .1); } .contact-field .invalid-feedback { font-size: .8rem; font-weight: 600; letter-spacing: .02em; } /* Footer (antes inline) */ .hp-footer{ --hp-bg: #0b1220; --hp-surface: rgba(255,255,255,.04); --hp-border: rgba(255,255,255,.10); --hp-text: rgba(255,255,255,.86); --hp-muted: rgba(255,255,255,.62); --hp-link: rgba(255,255,255,.80); --hp-link-hover: #ffffff; --hp-accent: #2563eb; --hp-accent-2: #1e40af; --hp-radius: 16px; background: var(--hp-bg); color: var(--hp-text); margin-top: 5%; border-top: 1px solid var(--hp-border); } .hp-footer__mark{ width: 10px; height: 10px; border-radius: 999px; background: var(--hp-accent); box-shadow: 0 0 0 6px rgba(37, 99, 235, .15); } .hp-footer__title{ font-weight: 800; letter-spacing: .2px; } .hp-footer__section-title{ font-size: .95rem; font-weight: 800; color: rgba(255,255,255,.92); } .hp-footer__text{ color: var(--hp-muted); font-size: .95rem; line-height: 1.55; margin: 0; } .hp-footer__meta{ display: grid; gap: .55rem; } .hp-footer__meta-item{ display: grid; grid-template-columns: 22px 1fr; gap: .65rem; align-items: start; color: var(--hp-muted); font-size: .92rem; line-height: 1.45; } .hp-footer__meta-ico{ width: 22px; height: 22px; display: grid; place-items: center; color: rgba(255,255,255,.75); } .hp-footer__link{ color: var(--hp-link); text-decoration: none; border-bottom: 1px solid transparent; transition: color .18s ease, border-color .18s ease, background-color .18s ease; } .hp-footer__link:hover{ color: var(--hp-link-hover); border-bottom-color: rgba(255,255,255,.35); } .hp-footer__link:focus-visible{ outline: 2px solid rgba(37,99,235,.7); outline-offset: 3px; border-radius: 8px; } .hp-footer__social{ width: 42px; height: 42px; border-radius: 999px; display: grid; place-items: center; background: var(--hp-surface); border: 1px solid var(--hp-border); color: rgba(255,255,255,.82); transition: transform .16s ease, background-color .16s ease, border-color .16s ease; } .hp-footer__social:hover{ transform: translateY(-1px); background: rgba(37,99,235,.18); border-color: rgba(37,99,235,.45); color: #ffffff; } .hp-footer__bottom{ border-top: 1px solid var(--hp-border); } .hp-footer__muted{ color: var(--hp-muted); } .hp-footer__sep{ margin: 0 .5rem; color: rgba(255,255,255,.40); } /* CTA opcional */ .hp-footer__cta{ display: inline-block; padding: 10px 14px; border-radius: 12px; background: var(--hp-accent-2); color: #fff; font-weight: 800; text-decoration: none; border: 1px solid rgba(255,255,255,.10); } .hp-footer__cta:hover{ background: var(--hp-accent); } /* Chat bubbles + tooltip (antes inline) */ .chat-bubble { max-width: 80%; padding: 10px 15px; border-radius: 20px; font-size: 0.9rem; word-wrap: break-word; opacity: 0; transform-origin: bottom; } .chat-user { align-self: flex-end; background-color: #e9ecef; color: #000; animation: fadeInUp 0.5s ease-out forwards; margin-left: 20%; } .chat-bot { align-self: flex-start; background-color: #007bff; color: #fff; animation: fadeInUp 0.5s ease-out forwards; margin-right: 20%; } @keyframes fadeInUp { 0% { opacity: 0; transform: translateY(20px) scale(0.95); } 100% { opacity: 1; transform: translateY(0) scale(1); } } @keyframes fadeOutDown { 0% { opacity: 1; transform: translateY(0) scale(1); } 100% { opacity: 0; transform: translateY(20px) scale(0.95); } } #chat-container::-webkit-scrollbar { width: 4px; } #chat-container::-webkit-scrollbar-thumb { background: rgba(0,0,0,0.2); border-radius: 2px; } #chat-container { scrollbar-width: thin; scrollbar-color: rgba(0,0,0,0.2) transparent; } #chatForm textarea::placeholder { font-size: 0.85rem; color: #888; } #chatForm textarea { font-size: 0.85rem; } @keyframes bubbleIn { 0% { opacity: 0; transform: scale(0.3) translateY(40px); filter: blur(2px); } 50% { opacity: 0.8; transform: scale(1.1) translateY(-5px); filter: blur(0px); } 70% { transform: scale(0.95) translateY(2px); } 100% { opacity: 1; transform: scale(1) translateY(0); } } .chat-tooltip { position: absolute; bottom: 80px; right: 0; background: white; padding: 16px 20px; border-radius: 20px; box-shadow: 0 8px 24px rgba(66, 134, 244, 0.15); width: 300px; opacity: 0; transform-origin: bottom right; pointer-events: all; display: none; border: 2px solid rgba(66, 134, 244, 0.1); will-change: transform, opacity; transition: opacity 0.6s ease; } .chat-tooltip.hide { opacity: 0 !important; transition: opacity 0.6s ease; } .chat-tooltip::after { content: ''; position: absolute; bottom: -12px; right: 24px; width: 20px; height: 20px; background: white; transform: rotate(45deg); border-right: 2px solid rgba(66, 134, 244, 0.1); border-bottom: 2px solid rgba(66, 134, 244, 0.1); transition: all 0.3s ease; } .chat-tooltip.show { animation: bubbleIn 0.6s cubic-bezier(0.175, 0.885, 0.32, 1.275) forwards; display: block; } @keyframes pulse { 0% { box-shadow: 0 0 0 0 rgba(66, 134, 244, 0.4); } 70% { box-shadow: 0 0 0 10px rgba(66, 134, 244, 0); } 100% { box-shadow: 0 0 0 0 rgba(66, 134, 244, 0); } } .pulse-animation { animation: pulse 2s infinite; } .icon-container { display: flex; justify-content: center; align-items: center; position: relative; width: 32px; height: 32px; } .chat-icon, .panda-icon { top: 50%; left: 50%; transform: translate(-50%, -50%); transition: opacity 0.5s ease-in-out; width: 100%; height: 100%; display: flex; align-items: center; justify-content: center; } .panda-icon { filter: brightness(0) invert(1); } @keyframes iconFade { 0%, 45% { opacity: 1; } 50%, 95% { opacity: 0; } 100% { opacity: 1; } } .chat-icon { animation: iconFade 4s infinite; } .panda-icon { animation: iconFade 4s infinite reverse; }