/* ========================================================= ALELU – THEME CSS (Header & Footer negros) 1) Variables 2) Base global 3) Navbar (header negro) 4) Footer (negro) 5) Logo (imagen + texto apilado) 6) Componentes (cards, catálogo, modal) 7) Secciones (Servicios, Why-Luxe) 8) Botón WhatsApp flotante 9) Utilidades / Media queries ========================================================= */ /* ========================================================= ALELU – THEME CSS (Header & Footer negros + Poppins) ========================================================= */ /* 0) Fuente (puedes mover esto al con si prefieres) */ @import url("https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,300;0,400;0,500;0,600;0,700;1,400&display=swap"); /* 1) Variables de marca */ :root{ /* Paleta desde el logo */ --alelu-primary: #6C13F2; /* púrpura (principal) */ --alelu-accent: #B7A271; /* dorado chispa */ --alelu-deep: #0a1f44; /* azul profundo (fondos/gradientes) */ --alelu-ink: #131012; /* negro cálido */ --alelu-light: #f7f8fb; /* gris claro base UI */ --alelu-muted-80:rgba(14,23,38,.68); /* Sombras */ --shadow-sm: 0 4px 12px rgba(0,0,0,.08); --shadow-md: 0 8px 20px rgba(0,0,0,.15); --shadow-lg: 0 16px 40px rgba(0,0,0,.35); /* Radios */ --radius-lg: 20px; --radius-md: 16px; --radius-pill: 999px; /* (Opcional) mapeo a Bootstrap */ --bs-body-bg: #ffffff; --bs-body-color: #121418; } /* 2) Base global */ *, *::before, *::after { box-sizing: border-box; } html { scroll-behavior: smooth; } body{ font-family: "Poppins", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif; font-weight: 400; color: var(--bs-body-color); background-color: var(--alelu-light); line-height: 1.55; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; /* espacio por navbar fijo + botón flotante */ padding-top: 100px; padding-bottom: 80px; } img, svg{ max-width: 100%; height: auto; display: block; } a{ text-decoration: none; color: inherit; } h1, .display-1 { font-weight: 700; letter-spacing: -0.4px; } h2, .display-2 { font-weight: 700; letter-spacing: -0.3px; } h3, .display-3 { font-weight: 600; letter-spacing: -0.2px; } h4 { font-weight: 600; } h5, h6 { font-weight: 500; } .small, .text-muted, .text-muted-80 { font-weight: 400; } /* Helpers de sección */ .section-padding{ padding: 4rem 0; } .section-heading{ text-align: center; margin-bottom: 2.5rem; } .section-heading h2{ font-weight: 700; } .section-heading p{ color: #6b7280; } /* 3) Navbar (header negro) */ .navbar-dark.bg-dark{ background-color: #000 !important; border-bottom: 1px solid rgba(255,255,255,.08); } .navbar-dark .navbar-brand, .navbar-dark .nav-link{ color: rgba(255,255,255,.92) !important; font-weight: 500; } .navbar-dark .nav-link:hover, .navbar-dark .nav-link:focus{ color:#fff !important; } .navbar-dark .nav-link.active, .navbar-dark .nav-link[aria-current="page"]{ color:#fff !important; position: relative; } .navbar-dark .nav-link.active::after{ content:""; position:absolute; left: 0; right: 0; bottom: -8px; height: 2px; border-radius: 2px; background: linear-gradient(90deg, var(--alelu-accent), var(--alelu-primary), var(--alelu-accent)); } .navbar-toggler{ border-color: rgba(255,255,255,.25); } .navbar-toggler:focus{ box-shadow: 0 0 0 .2rem rgba(255,255,255,.2); } /* 4) Footer (negro) */ .site-footer{ background:#000; color:#cfcfcf; padding: 32px 0; border-top: 1px solid rgba(255,255,255,.08); } .site-footer a{ color:#e6e6e6; } .site-footer a:hover{ color: var(--alelu-accent); } .site-footer .footer-title{ color:#fff; font-weight:600; margin-bottom:.75rem; } .site-footer .social a{ display:inline-flex; align-items:center; justify-content:center; width:36px; height:36px; border-radius:50%; background: rgba(255,255,255,.06); margin-right:8px; color:#fff; transition: transform .2s ease, background .2s ease; } .site-footer .social a:hover{ transform: translateY(-2px); background: rgba(255,255,255,.12); } /* 5) Logo (imagen + texto apilado) */ .logo-image{ background-color: #fff; /* círculo para PNG transparente */ border-radius: 50%; padding: 2px; height: 72px; width: auto; object-fit: contain; display: inline-block; } .logo-stacked{ display: flex; flex-direction: column; align-items: center; text-align:center; } .logo-text{ font-size: 12px; margin-top: 4px; letter-spacing:.2px; font-weight: 500; } /* 6) Componentes */ /* 6.1 Card moderna */ .card-modern{ background:#fff; border-radius:.75rem; box-shadow: var(--shadow-sm); padding:1.5rem; } /* 6.2 Cards catálogo */ .card{ transition: transform .2s ease-in-out, box-shadow .2s ease-in-out; } .card:hover{ transform: translateY(-5px); box-shadow: var(--shadow-md) !important; } .card-title{ min-height: 48px; display:flex; align-items:center; justify-content:center; text-align:center; } .card-text{ min-height: 72px; } .card.card-category{ display: flex; flex-direction: column; } /* Haz la imagen más alta y recorta con cover */ .card-category .card-img-top{ height: clamp(200px, 35vh, 320px); width: 100%; object-fit: cover; } /* Reduce el espacio blanco del texto */ .card-category .card-body{ padding: .75rem 1rem; } .card-category .card-title{ margin-bottom: .25rem; } .card-category .card-text{ margin-bottom: .5rem; } /* 6.3 Modal de video */ .modal-body{ padding: 0; } .modal-header .btn-close{ filter: invert(1); } /* visible en header oscuro */ /* 6.4 Botones de marca */ .btn-brand{ background: var(--alelu-primary); border-color: var(--alelu-primary); color:#fff; } .btn-brand:hover{ filter: brightness(.92); } .btn-outline-light{ border-color: rgba(255,255,255,.35); color:#e9eff5; } .btn-outline-light:hover{ background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.6); } /* 7) Secciones */ /* 7.1 Servicios (icono animado) */ .service-item{ background:#fff; border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); transition: all .4s ease; height: 100%; padding: 1.5rem; text-align:center; } .service-item:hover{ transform: translateY(-8px); box-shadow: var(--shadow-md); } .service-icon{ font-size: 48px; color: var(--alelu-primary); transition: transform .6s ease, color .3s ease; display:inline-block; margin-bottom: 15px; } .service-item:hover .service-icon{ transform: rotate(360deg) scale(1.2); color: var(--alelu-deep); } .service-item h3{ font-size: 20px; font-weight: 600; margin-bottom: 12px; } .service-item p{ font-size: 15px; color: #555; } /* 7.2 Why-Luxe (oscuro elegante) */ .why-luxe{ color:#eef3f7; background: radial-gradient(1200px 600px at 10% -10%, rgba(108,19,242,.20), transparent 45%), radial-gradient(1200px 600px at 90% -20%, rgba(10,31,68,.35), transparent 50%), linear-gradient(180deg, #0b1528 0%, #0a1f44 65%, #081426 100%); position: relative; overflow: hidden; } .brand-text{ color: var(--alelu-primary); } .text-muted-80{ color: var(--alelu-muted-80); } .eyebrow{ display:inline-block; font-size:.85rem; padding:.25rem .6rem; border-radius: var(--radius-pill); color:#e7d7b7; background: rgba(183,162,113,.15); border:1px solid rgba(183,162,113,.35); letter-spacing:.6px; text-transform: uppercase; font-weight:600; } .underline{ width:90px; height:3px; border-radius:3px; background: linear-gradient(90deg, var(--alelu-accent), var(--alelu-primary), var(--alelu-accent)); opacity:.95; } .card-glass{ background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.14); border-radius: var(--radius-lg); padding: 22px 20px; box-shadow: 0 1px 0 rgba(255,255,255,.12) inset, 0 10px 30px rgba(0,0,0,.25); backdrop-filter: blur(12px); transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .card-glass:hover{ transform: translateY(-6px); box-shadow: var(--shadow-lg); border-color: rgba(133,185,151,.45); } .icon-ring{ --size: 56px; width: var(--size); height: var(--size); border-radius: 50%; display:grid; place-items:center; margin-bottom: 6px; background: radial-gradient(100% 100% at 50% 0%, rgba(255,255,255,.16), rgba(255,255,255,.04)), conic-gradient(from 220deg, var(--alelu-accent), var(--alelu-primary), var(--alelu-deep), var(--alelu-accent)); box-shadow: inset 0 0 0 6px rgba(0,0,0,.25), 0 6px 18px rgba(0,0,0,.25); color:#fff; } .icon-ring i{ font-size: 1.25rem; filter: drop-shadow(0 2px 4px rgba(0,0,0,.35)); } .card-glass h3{ color:#f4f8fb; } .card-glass p{ color: rgba(231,237,245,.9); } /* 7.3 Why-Luxe (versión clara) */ .why-luxe--light{ color:#0f172a; background: radial-gradient(1200px 600px at 20% -10%, rgba(108,19,242,.08), transparent 45%), radial-gradient(1200px 600px at 80% -20%, rgba(183,162,113,.10), transparent 50%), linear-gradient(180deg, #ffffff 0%, #f7faf8 100%); } .why-luxe--light .text-muted-80{ color:#475569; } .why-luxe--light .brand-text{ color: var(--alelu-primary); } .why-luxe--light .eyebrow{ color:#4b5563; background: rgba(108,19,242,.08); border:1px solid rgba(108,19,242,.25); } .why-luxe--light .underline{ background: linear-gradient(90deg, var(--alelu-accent), var(--alelu-primary), var(--alelu-accent)); } .why-luxe--light .card-glass{ background:#fff; border:1px solid rgba(2,6,23,.08); border-radius: var(--radius-lg); padding:22px 20px; box-shadow: var(--shadow-sm); backdrop-filter:none; transition: transform .25s ease, box-shadow .25s ease, border-color .25s ease; } .why-luxe--light .card-glass:hover{ transform: translateY(-6px); box-shadow: var(--shadow-md); border-color: rgba(108,19,242,.25); } .why-luxe--light .card-glass h3{ color:#0b1220; } .why-luxe--light .card-glass p{ color:#444; } /* Icono con contraste en claro */ .why-luxe--light .icon-ring, .why-luxe--light .icon-ring i{ color: var(--alelu-primary); } .why-luxe--light .icon-ring{ background: radial-gradient(100% 100% at 50% 0%, #ffffff, #f6f8fb), conic-gradient(from 220deg, var(--alelu-accent), var(--alelu-primary), #8c7cf0, var(--alelu-accent)); box-shadow: inset 0 0 0 6px rgba(108,19,242,.08), 0 6px 12px rgba(0,0,0,.06); } .why-luxe--light .icon-ring i{ filter:none; text-shadow: 0 1px 2px rgba(0,0,0,.06); font-size: 1.35rem; } /* 8) Botón WhatsApp flotante */ .whatsapp-float{ position: fixed; width: 60px; height: 60px; bottom: 40px; right: 40px; background-color: #25d366; color: #FFF; border-radius: 50%; display: flex; justify-content: center; align-items: center; font-size: 28px; box-shadow: 2px 2px 3px rgba(0,0,0,.25); z-index: 1040; /* sobre navbar (1030), bajo modal (1055) */ transition: transform .2s ease, box-shadow .2s ease, background .2s ease; } .whatsapp-float:hover{ transform: translateY(-4px); box-shadow: 0 8px 18px rgba(0,0,0,.25); background-color: #1ebe5b; } .whatsapp-float:focus-visible{ outline: 3px solid rgba(108,19,242,.35); outline-offset: 3px; } /* 9) Utilidades / Responsive */ @media (max-width: 991.98px){ body{ padding-top: 90px; } .logo-image{ height: 64px; } } @media (max-width: 768px){ body{ padding-top: 84px; } .logo-image{ height: 56px; } .logo-text{ font-size: 11px; } .whatsapp-float{ width: 50px; height: 50px; bottom: 20px; right: 20px; font-size: 24px; } .section-padding{ padding: 3rem 0; } } @media (max-width: 575.98px){ .icon-ring{ --size: 52px; } } /* Accesibilidad – reduce motion */ @media (prefers-reduced-motion: reduce){ .card, .service-item, .card-glass, .whatsapp-float, .navbar-dark .nav-link.active::after{ transition: none !important; transform: none !important; } }