Inicio
Servicios
¿Cómo funciona?
0
Iniciar sesión
Contáctenos
Todos los cursos
Eliminar filtros
Tu Nivel
Básico
Intermedio
Avanzado
Eliminar filtros
Intermedio
×
No se encontró ningún curso que coincida con su búsqueda.
/* ── Variables necesarias (si no las tienes ya) ── */ :root { --navy: #0B1F3A; --teal: #00B89F; --teal-dark: #008E79; } /* ── Calculator card ── */ .calc-card { background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); border-radius: 20px; padding: 32px; backdrop-filter: blur(8px); } .calc-title { font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.5); text-transform: uppercase; letter-spacing: 0.8px; margin-bottom: 20px; } .calc-tabs { display: flex; gap: 6px; margin-bottom: 24px; background: rgba(255,255,255,0.05); border-radius: 100px; padding: 4px; } .calc-tab { flex: 1; padding: 8px 12px; border-radius: 100px; border: none; cursor: pointer; font-size: 12px; font-weight: 500; background: transparent; color: rgba(255,255,255,0.5); transition: all 0.2s; } .calc-tab.active { background: var(--teal); color: var(--navy); } .calc-label { font-size: 13px; color: rgba(255,255,255,0.55); margin-bottom: 10px; } .calc-amount { font-size: 44px; color: #fff; letter-spacing: -1px; margin-bottom: 4px; } .calc-amount span:first-child { font-size: 22px; color: var(--teal); } input[type=range] { width: 100%; margin: 16px 0 20px; -webkit-appearance: none; height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--teal) 50%, rgba(255,255,255,0.12) 50%); outline: none; } input[type=range]::-webkit-slider-thumb { -webkit-appearance: none; width: 20px; height: 20px; border-radius: 50%; background: var(--teal); border: 3px solid var(--navy); box-shadow: 0 0 0 2px var(--teal); cursor: pointer; } .calc-details { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 24px; } .calc-detail { background: rgba(255,255,255,0.04); border-radius: 10px; padding: 12px 14px; } .calc-detail-label { font-size: 11px; color: rgba(255,255,255,0.4); margin-bottom: 4px; } .calc-detail-val { font-size: 16px; font-weight: 500; color: #fff; } .calc-cta { width: 100%; padding: 14px; background: var(--teal); color: var(--navy); font-size: 15px; font-weight: 600; border: none; border-radius: 100px; cursor: pointer; transition: background 0.2s, transform 0.15s; } .calc-cta:hover { background: #00cdb3; transform: translateY(-1px); }