/* ───────────────────────────────────────── ASG Card v2 Fuente: Epilogue — agregar en : ────────────────────────────────────────── */ .asg-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.25rem; width: 100%; max-width: 1100px; margin: 0 auto; } .asg-card { background: #ffffff; border: 1px solid rgba(21, 96, 130, 0.1); border-radius: 18px; padding: 2rem 1.5rem 1.75rem; display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; overflow: hidden; opacity: 0; transform: translateY(36px); } .asg-card::after { content: ''; position: absolute; bottom: 0; left: 0; right: 0; height: 3px; transform: scaleX(0); transform-origin: left; transition: transform 0.4s ease; } .asg-card:hover::after { transform: scaleX(1); } .asg-card.ca::after { background: #4DA7E1; } .asg-card.cs::after { background: #6EDD61; } .asg-card.cg::after { background: #FFD451; } .asg-letter-wrap { width: 120px; height: 120px; border-radius: 16px; display: flex; align-items: center; justify-content: center; margin-bottom: 1.25rem; } .asg-card.ca .asg-letter-wrap { background: rgba(77, 167, 225, 0.1); } .asg-card.cs .asg-letter-wrap { background: rgba(110, 221, 97, 0.1); } .asg-card.cg .asg-letter-wrap { background: rgba(255, 212, 81, 0.12); } .asg-letter { font-family: 'Epilogue', sans-serif; font-weight: 800; font-size: 6rem; line-height: 1; opacity: 0; transform: scale(0.3) rotate(-12deg); } .asg-card.ca .asg-letter { color: #4DA7E1; } .asg-card.cs .asg-letter { color: #6EDD61; } .asg-card.cg .asg-letter { color: #FFD451; } .asg-name { font-family: 'Epilogue', sans-serif; font-weight: 700; font-size: 0.9rem; margin-bottom: 0.5rem; opacity: 0; } .asg-card.ca .asg-name { color: #1a6fa0; } .asg-card.cs .asg-name { color: #2a8c24; } .asg-card.cg .asg-name { color: #a07800; } .asg-desc { font-family: 'Figtree', sans-serif; font-size: 0.78rem; line-height: 1.55; color: #233237; max-width: 180px; opacity: 0; } @media (max-width: 768px) { .asg-grid { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; } }