/* Font Awesome ya NO se carga aquí con @import (eran 5 archivos encadenados y bloqueantes: fontawesome, brands, solid, sharp-thin, sharp-duotone-thin — mucho más lento y frágil). Ahora se carga con un solo en el de cada página (ver index.php, login.php, etc.), con el paquete "all.min.css" que ya incluye solid + brands + regular. */ html { overflow-x: hidden; } body{ background-color: #FAFCFE; font-family: 'Inter', sans-serif; font-weight: 700; overflow-x: hidden; } .titulo{ font-size: 22px; } .tituloD{ font-size: 3rem; font-weight: 800; } .navbar-glass{ position: fixed; top: 0; left: 0; width: 100%; height: 5em; background: rgba(255,255,255,.3); backdrop-filter: blur(16px); box-shadow: 0 10px 30px rgba(0,0,0,.08); z-index: 999; } .navbar-content{ width: 100%; height: 100%; display: flex; align-items: center; justify-content: space-between; padding: 0 50px; margin: 0 auto; } .logo{ display:flex; align-items:center; gap:10px; text-decoration:none; color:#0f172a; font-weight:700; } .logo-box{ width:36px; height:36px; background:#2563eb; color:white; display:flex; align-items:center; justify-content:center; border-radius:10px; } .menu{ display:flex; align-items:center; gap:10px; list-style:none; margin:0; padding:0; } .menu li{ text-decoration:none; color:#64748b; padding:10px 16px; border-radius:10px; font-weight:500; } .menu li.active{ background:#dbeafe; color:#2563eb; } .menu-cta-item{ display:none; } .menu a{ text-decoration:none; color:#64748b; } .btn-demo{ text-decoration:none; color:#0f172a; border:1px #00000062; padding:10px 18px; border-radius:12px; box-shadow: 0 4px 12px rgba(0, 0, 0, 0.07); } .btn-login{ display:inline-flex; align-items:center; gap:8px; text-decoration:none; color:#fff; background:#2563eb; padding:10px 20px; border-radius:12px; font-size:.95rem; font-weight:600; box-shadow: 0 4px 12px rgba(37, 99, 235, .25); transition: background .25s ease, transform .2s ease, box-shadow .2s ease; } .btn-login i{ font-size:.85em; } .btn-login:hover{ background:#1d4ed8; color:#fff; transform:translateY(-2px); box-shadow: 0 10px 22px rgba(37, 99, 235, .35); } .btn-login:active{ transform:translateY(0); box-shadow: 0 4px 12px rgba(37, 99, 235, .25); } .logo{ display:flex; align-items:center; gap:12px; } .logo-text{ height:2.6em; width:auto; max-width:160px; display:block; object-fit:contain; } .hero-dashboard{ border-radius:24px; object-fit:cover; } .hero-section{ min-height: 85vh; display:flex; align-items:center; background:#f8fafc; position:relative; overflow:hidden; } .hero-section .container{ max-width:1200px; } .tituloD{ font-size:4.2rem; line-height:1.05; font-weight:800; color:#0f172a; max-width:600px; letter-spacing:-2px; } .hero-section .lead{ color:#64748b; font-size:1.3rem; line-height:1.8; max-width:620px; margin-top:30px; } .btn-warning-oa{ background:#ffffff; border:1px solid #e2e8f0; color:#0f172a; padding:14px 30px; font-weight:600; transition:.3s; box-shadow: 0 4px 12px rgba(0,0,0,.06); } .btn-warning-oa:hover{ transform:translateY(-2px); box-shadow: 0 10px 25px rgba(0,0,0,.08); } .btn-oa-primary { background: #2563eb; color: #fff; border: none; font-weight: 600; padding: 14px 30px; transition: background .25s, transform .2s, box-shadow .2s; } .btn-oa-primary:hover { background: #1d4ed8; color: #fff; transform: translateY(-2px); box-shadow: 0 8px 20px rgba(37,99,235,.35); } .btn-oa-primary:active { transform: translateY(0); box-shadow: none; } .btn-outline-secondary{ border:1px solid #dbe3ee; color:#0f172a; padding:14px 30px; font-weight:600; background:white; box-shadow: 0 4px 12px rgba(0,0,0,.04); } .btn-outline-secondary:hover{ background:white; color:#0f172a; } .hero-img-wrap{ position:relative; border-radius:24px; overflow:hidden; box-shadow: 0 40px 80px rgba(15,23,42,.08), 0 15px 30px rgba(15,23,42,.05); transform:translateY(0); transition:.4s ease; } .hero-img-wrap:hover{ transform:translateY(-6px); } .hero-img-wrap img{ display:block; width:100%; border-radius:24px; } .hero-img-overlay{ position:absolute; inset:0; background: linear-gradient( 180deg, rgba(255,255,255,0) 0%, rgba(255,255,255,.03) 100% ); pointer-events:none; } .hero-pattern{ position:absolute; inset:0; background: radial-gradient( circle at 20% 20%, rgba(37,99,235,.04), transparent 40% ), radial-gradient( circle at 80% 40%, rgba(59,130,246,.05), transparent 35% ); } .blob{ position:absolute; border-radius:50%; filter:blur(90px); z-index:-1; } .blob-1{ width:280px; height:280px; background:#3b82f615; top:-50px; right:-100px; } .blob-2{ width:250px; height:250px; background:#60a5fa12; bottom:-80px; left:-80px; } .section-head h2{ font-size:3rem; font-weight:800; color:#0f172a; } .section-head p{ font-size:1.25rem; color:#64748b; } .oa-card{ background:#ffffff; border:1px solid #e2e8f0; border-radius:24px; height:100%; padding:2rem !important; cursor:pointer; transition:.35s ease; box-shadow: 0 10px 30px rgba(15,23,42,.05); } .oa-card:hover{ cursor:pointer; transform:translateY(-8px); box-shadow: 0 20px 45px rgba(15,23,42,.08); } .card-icon-wrap{ width:58px; height:58px; display:flex; align-items:center; justify-content:center; border-radius:16px; background:#dbeafe; color:#2563eb; } .card-icon-wrap i{ font-size:1.6rem; } .oa-card h3{ font-size:1.55rem; font-weight:700; color:#0f172a; margin-top:20px; margin-bottom:18px; } .oa-card p{ color:#64748b; font-size:1.15rem; line-height:1.9; margin-bottom:0; } .btn-outline-primary{ border:1px solid #cbd5e1; color:#0f172a; background:#fff; min-width:290px; padding:14px 24px; border-radius:12px; font-weight:600; transition:.3s; } .btn-outline-primary:hover{ transform:translateY(-2px); background:#fff; color:#0f172a; box-shadow: 0 10px 25px rgba(0,0,0,.08); } footer{ background: linear-gradient( 135deg, #07132e 0%, #08173a 100% ); color:#cbd5e1; padding:80px 0 30px; } .footer-brand{ font-size:1.8rem; font-weight:700; color:white; } .logo-icon{ width:42px; height:42px; display:flex; align-items:center; justify-content:center; border-radius:12px; background:#2563eb; } footer p{ color:#94a3b8; line-height:1.9; } footer h6{ color:white; font-weight:700; font-size:.95rem; text-transform:uppercase; letter-spacing:.5px; margin-bottom:25px; } footer a{ text-decoration:none; color:#94a3b8; transition:.25s ease; } footer a:hover{ color:white; } footer ul li{ margin-bottom:14px; } footer .bi{ color:#2563eb; } .social-link{ width:42px; height:42px; display:flex; align-items:center; justify-content:center; border-radius:10px; background:rgba(255,255,255,.06); color:white; transition:.3s ease; } .social-link:hover{ transform:translateY(-3px); } .social-link[aria-label="LinkedIn"]:hover { background: #0077b5; } .social-link[aria-label="Twitter"]:hover { background: #000000; } .social-link[aria-label="Facebook"]:hover { background: #1877f2; } .footer-border{ border-top:1px solid rgba(255,255,255,.08); margin-top:30px; padding-top:30px; } .footer-copy{ color:#94a3b8 !important; font-size:.95rem; } .feature-title{ font-size: clamp(1rem, 4vw, 3rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.04em; color: #0f172a; } .feature-subtitle{ max-width: 760px; font-size: 0.85rem; line-height: 1.8; color: #64748b; } .feature-card{ display: flex; align-items: flex-start; gap: 1.5rem; height: 100%; padding: 2rem; background: #ffffff; border: 1px solid rgba(15,23,42,.06); border-radius: 24px; box-shadow: 0 4px 6px rgba(15,23,42,.03), 0 10px 25px rgba(15,23,42,.06); transition: all .35s ease; cursor: pointer; } .feature-card:hover{ transform: translateY(-8px); box-shadow: 0 12px 20px rgba(15,23,42,.06), 0 25px 50px rgba(15,23,42,.12); } .feature-icon{ width: 68px; height: 68px; min-width: 68px; display: flex; align-items: center; justify-content: center; border-radius: 16px; background: #eef4ff; color: #2563eb; font-size: 1.6rem; } .feature-content{ flex: 1; } .feature-content h3{ margin-bottom: 1rem; font-size: 1.8rem; font-weight: 700; color: #0f172a; } .feature-content p{ margin: 0; font-size: 1.08rem; line-height: 1.9; color: #64748b; } .section-gradient{ background: radial-gradient( circle at top center, rgba(37,99,235,.05), transparent 55% ), #f8fafc; } @media (max-width: 991.98px){ .feature-title{ font-size: 3rem; } .feature-subtitle{ font-size: 1.15rem; } .feature-card{ padding: 1.5rem; } .feature-content h3{ font-size: 1.4rem; } } @media (max-width: 576px){ .feature-card{ flex-direction: column; gap: 1.25rem; } .feature-icon{ width: 60px; height: 60px; min-width: 60px; font-size: 1.4rem; } .feature-title{ font-size: 2.5rem; } .feature-content h3{ font-size: 1.25rem; } .feature-content p{ font-size: 1rem; line-height: 1.8; } } /* ========================================== HERO ========================================== */ .platform-hero{ background: radial-gradient( circle at top center, rgba(37,99,235,.05), transparent 60% ), #f8fafc; } .platform-title{ font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; line-height: 1.05; letter-spacing: -0.04em; color: #0f172a; margin-bottom: 1.5rem; } .platform-subtitle{ max-width: 850px; font-size: 1.4rem; line-height: 1.8; color: #64748b; } /* ========================================== CARDS SUPERIORES ========================================== */ .platform-card{ background: #fff; border-radius: 24px; padding: 2.5rem; border: 1px solid rgba(15,23,42,.05); box-shadow: 0 4px 8px rgba(15,23,42,.04), 0 15px 35px rgba(15,23,42,.06); transition: .35s ease; } .platform-card:hover{ transform: translateY(-8px); } .platform-card h2{ font-size: 2rem; font-weight: 700; color: #0f172a; margin-bottom: 1rem; } .platform-card p{ color: #64748b; line-height: 1.9; font-size: 1.1rem; } /* ========================================== ICONOS ========================================== */ .platform-icon{ width: 72px; height: 72px; display: flex; align-items: center; justify-content: center; background: #eef4ff; border-radius: 18px; color: #2563eb; font-size: 1.9rem; margin-bottom: 2rem; } .platform-icon.small{ width: 64px; height: 64px; font-size: 1.5rem; margin-bottom: 1.5rem; } /* ========================================== LISTAS ========================================== */ .platform-list{ margin: 2rem 0 0; padding: 0; list-style: none; } .platform-list li{ position: relative; padding-left: 1.4rem; margin-bottom: 1rem; color: #64748b; line-height: 1.8; } .platform-list li::before{ content: ""; width: 6px; height: 6px; border-radius: 50%; background: #2563eb; position: absolute; left: 0; top: 13px; } /* ========================================== IMÁGENES ========================================== */ .platform-image{ border-radius: 24px; overflow: hidden; box-shadow: 0 10px 25px rgba(15,23,42,.08); } .platform-image img{ width: 100%; height: 320px; object-fit: cover; transition: .4s ease; } .platform-image:hover img{ transform: scale(1.04); } /* ========================================== FEATURES AZULES ========================================== */ .platform-feature{ background: #f3f7ff; border-radius: 24px; padding: 2.5rem; height: 100%; } .platform-feature h3{ font-size: 1.8rem; font-weight: 700; color: #0f172a; margin-bottom: 1rem; } .platform-feature p{ color: #64748b; line-height: 1.9; margin: 0; } /* ========================================== PRÓXIMAS FUNCIONALIDADES ========================================== */ .future-title{ font-size: clamp(3rem,5vw,4rem); font-weight: 800; color: #0f172a; margin-bottom: 1rem; } .future-subtitle{ max-width: 700px; color: #64748b; font-size: 1.2rem; line-height: 1.8; } /* ========================================== TIMELINE ========================================== */ .timeline-wrapper{ position: relative; max-width: 1100px; margin: 0 auto; } .timeline-line{ position: absolute; left: 24px; top: 0; bottom: 0; width: 2px; background: #dbe3ef; } .timeline-item{ display: flex; gap: 3rem; position: relative; margin-bottom: 2.5rem; } .timeline-number{ width: 48px; height: 48px; min-width: 48px; background: #eef4ff; color: #2563eb; border-radius: 12px; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 1.25rem; position: relative; z-index: 2; } .timeline-card{ flex: 1; background: #fff; border-radius: 20px; padding: 2rem; border: 1px solid rgba(15,23,42,.05); box-shadow: 0 5px 10px rgba(15,23,42,.03), 0 10px 25px rgba(15,23,42,.05); transition: .35s ease; } .timeline-card:hover{ transform: translateX(8px); } .timeline-card h4{ display: flex; align-items: center; gap: .75rem; font-size: 1.5rem; font-weight: 700; margin-bottom: 1rem; color: #0f172a; } .timeline-card h4 i{ color: #111827; } .timeline-card p{ margin: 0; color: #64748b; line-height: 1.9; font-size: 1.05rem; } /* ========================================== RESPONSIVE ========================================== */ @media (max-width: 991px){ .platform-title{ font-size: 3.5rem; } .platform-card{ padding: 2rem; } .timeline-item{ gap: 1.5rem; } } @media (max-width: 768px){ .platform-title{ font-size: 2.8rem; } .platform-subtitle{ font-size: 1.1rem; } .platform-card h2{ font-size: 1.5rem; } .platform-feature h3{ font-size: 1.4rem; } .timeline-card h4{ font-size: 1.2rem; } .timeline-card{ padding: 1.5rem; } .timeline-line{ left: 20px; } .timeline-number{ width: 40px; height: 40px; min-width: 40px; font-size: 1rem; } } /* ========================================== CONTACTO — sección y layout ========================================== */ .contact-section { padding-bottom: 6rem; } /* ========================================== CONTACTO — card azul y datos de contacto ========================================== */ .contact-blue { background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%); border-radius: 24px; color: #fff; } .contact-blue h2 { color: #fff; font-size: 1.5rem; font-weight: 700; } .contact-blue ul li { color: rgba(255,255,255,.9); font-size: 1rem; line-height: 1.7; } .contact-blue ul li i { color: rgba(255,255,255,.8); margin-top: 3px; font-size: 1.1rem; } .contact-icon-wrap { min-width: 3rem; height: 3rem; border-radius: .75rem; background: #eef4ff; display: flex; align-items: center; justify-content: center; } .contact-icon-wrap i { color: #2563eb; font-size: 1.1rem; } /* ========================================== TOAST — notificación de envío ========================================== */ #oa-toast { position: fixed; bottom: 1.75rem; right: 1.75rem; z-index: 9999; display: flex; align-items: flex-start; gap: .875rem; background: #0f172a; color: #f8fafc; padding: 1rem 1.25rem; border-radius: 14px; font-size: .95rem; line-height: 1.5; box-shadow: 0 8px 24px rgba(0,0,0,.18), 0 2px 6px rgba(0,0,0,.1); max-width: 340px; width: max-content; transform: translateY(6rem); opacity: 0; pointer-events: none; transition: transform .35s cubic-bezier(.22,1,.36,1), opacity .35s ease; } #oa-toast.show { transform: translateY(0); opacity: 1; pointer-events: auto; } #oa-toast .toast-icon { width: 2rem; height: 2rem; min-width: 2rem; border-radius: 8px; background: #22c55e; display: flex; align-items: center; justify-content: center; font-size: .9rem; color: #fff; } #oa-toast .toast-body strong { display: block; font-weight: 600; color: #fff; margin-bottom: .15rem; } #oa-toast .toast-body span { color: #94a3b8; font-size: .875rem; } /* ========================================== TIPOGRAFÍA UNIFICADA — títulos de página ========================================== */ .oa-page-title { font-size: clamp(2.5rem, 5vw, 3.5rem); font-weight: 800; color: #0f172a; letter-spacing: -0.04em; line-height: 1.05; } .oa-page-subtitle { max-width: 680px; font-size: 1.2rem; line-height: 1.8; color: #64748b; margin: 0 auto; } /* ========================================== NAVBAR — hamburguesa móvil ========================================== */ .navbar-right { display: flex; align-items: center; gap: 12px; } .hamburger { display: none; flex-direction: column; justify-content: center; align-items: center; gap: 5px; width: 40px; height: 40px; background: none; border: none; cursor: pointer; padding: 4px; border-radius: 8px; transition: background .2s; } .hamburger:hover { background: rgba(0,0,0,.05); } .hamburger span { display: block; width: 22px; height: 2px; background: #0f172a; border-radius: 2px; transition: transform .3s ease, opacity .3s ease; } /* Animación a X */ .hamburger.open span:nth-child(1) { transform: translateY(7px) rotate(45deg); } .hamburger.open span:nth-child(2) { opacity: 0; } .hamburger.open span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); } /* ========================================== FOOTER — lista de contacto sin overflow ========================================== */ .footer-contact-list a, .footer-contact-list span { word-break: break-word; overflow-wrap: break-word; font-size: .875rem; } /* ========================================== BENEFICIOS — card destacada ========================================== */ .oa-card.card-featured{ background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 100%); border-color: #2563eb; color: #fff; } .oa-card.card-featured h3{ color: #fff; } .oa-card.card-featured p{ color: rgba(255,255,255,.85); } .oa-card.card-featured .card-icon-wrap{ background: rgba(255,255,255,.18); color: #fff; } /* ========================================== BENEFICIOS — stats box ========================================== */ .stats-box{ background: #fff; border: 1px solid rgba(15,23,42,.06); border-radius: 24px; box-shadow: 0 4px 8px rgba(15,23,42,.04), 0 15px 35px rgba(15,23,42,.06); } .stat-num{ font-size: clamp(2rem, 5vw, 3rem); font-weight: 800; color: #2563eb; line-height: 1; letter-spacing: -0.03em; font-family: 'Inter', sans-serif; } /* ══════════════════════════════════════════ RESPONSIVE MÓVIL — todas las páginas Breakpoint principal: 768px ══════════════════════════════════════════ */ @media (max-width: 768px) { /* ── Navbar ── */ .hamburger { display: flex; } .btn-demo, .btn-login { display: none; } .menu { display: none; position: absolute; top: 5em; left: 0; right: 0; flex-direction: column; background: rgba(255,255,255,.98); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid #e2e8f0; padding: .75rem 1rem 1rem; gap: 4px; box-shadow: 0 10px 30px rgba(0,0,0,.08); z-index: 998; } .menu.open { display: flex; } .menu li { width: 100%; border-radius: 10px; padding: 10px 14px; } .menu a { display: block; width: 100%; } .navbar-content { padding: 0 16px; } .menu li.menu-cta-item{ display:block; width:100%; padding:0; border-radius:0; margin-top:6px; } .menu li:not(.menu-cta-item) + li.menu-cta-item{ border-top:1px solid #e2e8f0; padding-top:10px; } .menu a.menu-cta-demo, .menu a.menu-cta-login{ display:flex; align-items:center; justify-content:center; gap:8px; width:100%; padding:12px 16px; border-radius:12px; font-weight:600; text-align:center; } .menu a.menu-cta-demo{ background:#fff; color:#0f172a; border:1px solid #e2e8f0; box-shadow:0 4px 12px rgba(0,0,0,.05); } .menu a.menu-cta-login{ background:#2563eb; color:#fff; box-shadow:0 4px 12px rgba(37,99,235,.25); } /* ── Hero (index) ── */ .hero-section { min-height: auto; padding: 6rem 0 3rem; } .tituloD { font-size: 2.2rem; letter-spacing: -1px; max-width: 100%; } .hero-section .lead { font-size: 1.05rem; margin-top: 16px; } /* ── Títulos de sección ── */ .section-head h2 { font-size: 2rem; } .oa-page-title { font-size: 2rem; } .oa-page-subtitle { font-size: 1rem; } /* ── Cards ── */ .oa-card { border-radius: 16px; } .feature-card { flex-direction: column; gap: 1.25rem; } .feature-icon { width: 60px; height: 60px; min-width: 60px; font-size: 1.4rem; } .feature-content h3 { font-size: 1.25rem; } .feature-content p { font-size: 1rem; line-height: 1.8; } /* ── Platform ── */ .platform-card { padding: 1.5rem; } .platform-card h2 { font-size: 1.4rem; } .platform-image img { height: 220px; } /* ── Timeline ── */ .timeline-item { gap: 1.25rem; } .timeline-card { padding: 1.25rem; } .timeline-card h4 { font-size: 1.1rem; } .timeline-line { left: 20px; } .timeline-number { width: 40px; height: 40px; min-width: 40px; font-size: 1rem; } /* ── Beneficios — stats ── */ .stat-num { font-size: 2.2rem; } /* ── Contacto ── */ .contact-blue { border-radius: 16px; } /* ── Footer ── */ footer { padding: 48px 0 24px; } .footer-brand { font-size: 1.4rem; } .footer-copy { text-align: center; } .footer-border { text-align: center; justify-content: center !important; } /* ── Toast en móvil ── */ #oa-toast { right: 1rem; left: 1rem; bottom: 1rem; max-width: 100%; } } /* Tablet intermedio */ @media (min-width: 769px) and (max-width: 991px) { .tituloD { font-size: 3rem; } .hero-section { min-height: auto; padding: 7rem 0 4rem; } .platform-card h2 { font-size: 1.6rem; } .section-head h2 { font-size: 2.4rem; } }