/* ===================================================== COFFEE+ — Botones compartidos Incluir después de Bootstrap en el de cada página. Variables requeridas en :root según botón usado: --fucsia-v2 → btn-custom-fillfucsia, btn-guide-v2 --petrol-blue → btn-guide-v2 --grey-logo → btn-guide-v2 ===================================================== */ /* Base */ .btn-custom { padding: 0.8rem 2rem; border-radius: 2rem; font-size: 1.1rem; font-weight: 600; transition: all 0.3s ease; box-shadow: 0 4px 8px rgba(100, 100, 100, 0.2); border: none; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Variante: relleno fucsia */ .btn-custom-fillfucsia { background-color: var(--fucsia-v2); color: white; min-width: 250px; font-family: 'Montserrat', sans-serif; font-weight: 600; font-size: 1rem; text-shadow: 2px 2px 4px black; -webkit-tap-highlight-color: transparent; } .btn-custom-fillfucsia:hover { background-color: #a40762; border-color: #a40762; color: white; transform: translateY(-2px); box-shadow: 0 6px 12px rgba(100, 100, 100, 0.3); } /* Variante: guía Coffee+ — paleta petrol/fucsia Para redimensionar en una página específica, sobreescribir solo font-size: el padding escala solo (em). */ .btn-guide-v2 { /* Sizing */ font-size: 0.95rem; padding: 0.8em 3em 0.45em; /* asimetría top/bottom: compensa ascendente alto de League Spartan */ line-height: 1; /* Layout */ display: inline-block; border-radius: 50rem; white-space: nowrap; text-decoration: none; text-align: center; /* Tipografía */ font-family: 'League Spartan', sans-serif; font-weight: 700; letter-spacing: 0.04em; color: var(--grey-logo); /* Visual */ background: radial-gradient(ellipse at 18% 28%, rgba(255, 255, 255, 0.11) 0%, transparent 55%), linear-gradient(135deg, var(--dark-blue) 0%, var(--petrol-blue) 100%); border: 1.5px solid var(--fucsia-v2); box-shadow: 0 4px 10px rgba(0, 0, 0, 0.25); /* Interacción */ transition: all 0.3s ease; -webkit-tap-highlight-color: transparent; } .btn-guide-v2:hover { color: white; transform: translateY(-2px); box-shadow: 0 0 0 2px var(--fucsia-v2), 0 8px 16px rgba(0, 0, 0, 0.3); background: radial-gradient(ellipse at 18% 28%, rgba(255, 255, 255, 0.06) 0%, transparent 55%), linear-gradient(rgba(0, 0, 0, 0.14), rgba(0, 0, 0, 0.14)), linear-gradient(135deg, var(--dark-blue) 0%, var(--petrol-blue) 100%); }