/* ========================================================== JESUSILLAN.COM COMPONENTS.CSS v6.0 Componentes reutilizables ========================================================== */ /* ========================================================== BOTONES BASE ========================================================== */ .btn{ display:inline-flex; align-items:center; justify-content:center; gap:18px; padding:18px 38px; border:none; border-radius:999px; cursor:pointer; text-decoration:none; transition:var(--transition); font-family:var(--font-body); font-size:.92rem; font-weight:600; letter-spacing:.10em; text-transform:uppercase; white-space:nowrap; } /* ========================================================== BOTÓN AMAZON ========================================================== */ .btn-amazon{ display:inline-flex; align-items:center; justify-content:center; gap:24px; min-height:82px; padding:20px 44px; border-radius:999px; text-decoration:none; color:var(--color-text); background: linear-gradient( 180deg, rgba(255,255,255,.05), rgba(255,255,255,.02) ); border:1px solid rgba(199,166,90,.35); box-shadow: 0 12px 30px rgba(0,0,0,.35); transition:all .35s ease; } .btn-amazon:hover{ transform:translateY(-4px); border-color:var(--color-gold); box-shadow: 0 18px 42px rgba(0,0,0,.45), var(--shadow-glow); } .btn-amazon img{ width:185px; height:auto; display:block; } .btn-amazon span{ color:var(--color-text); font-size:1.05rem; letter-spacing:.14em; } /* ========================================================== BOTÓN COMPARTIR ========================================================== */ .btn-share{ display:inline-flex; align-items:center; justify-content:center; gap:14px; padding:18px 30px; border-radius:999px; background:transparent; border:1px solid rgba(199,166,90,.25); color:var(--color-text-soft); transition:var(--transition); } .btn-share:hover{ color:var(--color-gold); border-color:var(--color-gold); transform:translateY(-2px); } .btn-share svg{ width:22px; height:22px; } /* ========================================================== BOTÓN OUTLINE ========================================================== */ .btn-outline{ background:none; color:var(--color-gold); border:1px solid var(--color-gold); } .btn-outline:hover{ background:var(--color-gold); color:#111; } /* ========================================================== CTA ========================================================== */ .cta{ text-align:center; } .cta h2{ margin-bottom:1.5rem; } .cta-buttons{ display:flex; justify-content:center; align-items:center; gap:32px; flex-wrap:wrap; } /* ========================================================== MOCKUP LIBRO ========================================================== */ .book-mockup{ position:relative; display:block; width:min(520px,100%); margin:auto; filter:drop-shadow( 0 35px 70px rgba(0,0,0,.55) ); transition:transform .45s ease; animation:bookFloat 8s ease-in-out infinite; } .book-mockup:hover{ transform:translateY(-10px) scale(1.02); } @keyframes bookFloat{ 0%{ transform:translateY(0); } 50%{ transform:translateY(-10px); } 100%{ transform:translateY(0); } } /* ========================================================== HALO DEL LIBRO ========================================================== */ .book-glow{ position:absolute; left:50%; top:50%; transform:translate(-50%,-50%); width:620px; height:620px; border-radius:50%; background: radial-gradient( circle, rgba(199,166,90,.18), rgba(199,166,90,.08), transparent 72% ); filter:blur(55px); pointer-events:none; z-index:-1; } /* ========================================================== TARJETAS ========================================================== */ .card{ position:relative; overflow:hidden; padding:2rem; border-radius:var(--radius-l); background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); backdrop-filter:blur(12px); transition:all .35s ease; } .card::before{ content:""; position:absolute; inset:0; background:linear-gradient( 180deg, rgba(255,255,255,.03), transparent ); opacity:0; transition:opacity .35s ease; } .card:hover{ transform:translateY(-8px); border-color:rgba(199,166,90,.28); box-shadow: 0 20px 45px rgba(0,0,0,.35); } .card:hover::before{ opacity:1; } /* ========================================================== RESEÑAS ========================================================== */ .review{ position:relative; } .review::before{ content:"“"; position:absolute; left:-6px; top:-18px; font-family:var(--font-title); font-size:5rem; line-height:1; color:rgba(199,166,90,.10); } .review-stars{ margin-bottom:1rem; color:var(--color-gold); letter-spacing:.18rem; } .review-author{ margin-top:1.5rem; color:var(--color-gold); font-weight:600; } /* ========================================================== BADGES ========================================================== */ .badge{ display:inline-flex; align-items:center; justify-content:center; padding:.55rem 1.15rem; border-radius:999px; background:rgba(199,166,90,.10); border:1px solid rgba(199,166,90,.20); color:var(--color-gold); font-size:.78rem; letter-spacing:.14em; text-transform:uppercase; } /* ========================================================== TAGS ========================================================== */ .tag{ display:inline-flex; align-items:center; justify-content:center; padding:.8rem 1.2rem; border-radius:999px; background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.05); color:var(--color-text-soft); transition:all .3s ease; } .tag:hover{ color:var(--color-gold); border-color:rgba(199,166,90,.35); transform:translateY(-2px); } /* ========================================================== ANIMACIONES ========================================================== */ .fade-up{ opacity:0; transform:translateY(35px); transition: opacity .8s ease, transform .8s ease; } .fade-up.visible{ opacity:1; transform:none; } /* ========================================================== TOAST ========================================================== */ #site-toast{ position:fixed; left:50%; bottom:30px; transform:translateX(-50%) translateY(20px); padding:14px 24px; border-radius:999px; background:rgba(20,20,20,.94); color:var(--color-text); border:1px solid rgba(199,166,90,.30); backdrop-filter:blur(12px); opacity:0; pointer-events:none; transition:all .35s ease; z-index:9999; } #site-toast.show{ opacity:1; transform:translateX(-50%) translateY(0); } /* ========================================================== PARTÍCULAS ========================================================== */ .spark{ position:absolute; width:4px; height:4px; border-radius:50%; pointer-events:none; opacity:0; background:var(--contra-primary); box-shadow: 0 0 6px var(--contra-primary), 0 0 14px var(--contra-primary), 0 0 26px var(--contra-glow); animation:sparkAnimation 7s ease-in-out infinite; } .spark::after{ content:""; position:absolute; left:50%; top:50%; width:12px; height:1px; transform:translate(-50%,-50%) rotate(45deg); background:rgba(255,210,140,.45); } @keyframes sparkAnimation{ 0%{ opacity:0; transform: translateY(12px) scale(.30); } 15%{ opacity:1; transform: translateY(0) scale(1); } 60%{ opacity:.75; } 100%{ opacity:0; transform: translateY(-18px) scale(.20); } } /* ========================================================== RESPONSIVE ========================================================== */ @media (max-width:900px){ .cta-buttons{ flex-direction:column; gap:20px; } .btn-amazon{ width:100%; justify-content:center; } .btn-share{ width:100%; justify-content:center; } } @media (max-width:768px){ .btn{ width:100%; } .btn-amazon{ min-height:72px; padding:18px 24px; gap:18px; } .btn-amazon img{ width:145px; } .book-mockup{ width:min(380px,90vw); } .book-glow{ width:420px; height:420px; } }